meerdere canvas meerdere plaatjes

[High Quality king]

Hallo Tweakers,

Ik ben fotograaf en heb een flash website (*snip* spam). Met de uitfasering van flash probeer ik al weken alles om te zetten naar javascript en html5.

In de code hieronder wordt wordt een array geladen met daarin de urls van de plaatjes. De code werkt prima met de <img> tag. Het probleem met de <img> tag is dat mijn werk makkelijk te kopiëren is. Om dat te voorkomen wil ik ieder plaatje in een canvas zetten.

Het probleem met onderstaande code is dat ik de plaatjes allemaal kort eventjes zie, maar alleen het plaatje in het laatste canvas blijft staan. Kan iemand mij richting de oplossing sturen.

JavaScript:

function loadImages(arr, i)
{
    img = new Image();
    img.src = arr[i];
    img.onload = function()
    {
        var dim = resizeSlides(img, window.innerWidth, heightCorrected);
        
        document.getElementById("holder").innerHTML += '<canvas id="loadedimg' + i + '" width="'+ dim[0] + '" height = "' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;border:solid 1px #000000;">Your browswer does not support Html5 canvas</canvas>';
        imgCanvas = document.getElementById("loadedimg" + i);
        
        context = imgCanvas.getContext("2d");
        context.drawImage(img,  0 , 0 , dim[0] , dim[1]);
        
        //document.getElementById("holder").innerHTML += '<img src="' + img.src + '" id="loadedimg' + i + '" onclick="clickSlides('+ i +')" width="' + dim[0] + '" height="' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;" />';
        
        startPos = startPos + dim[0] + 5;
        if( i < arr.length-1 ){ loadImages(arr, i+1);};
    }
};

[ Voor 2% gewijzigd door RobIII op 27-01-2013 15:09 ]

[F.West98]

Worden ze niet allemaal op elkaar gestapeld tijdens het laden?

[High Quality king]

nee dat regeltje hieronder zorgt ervoor dat ieder canvas een stukje verplaatst wordt. StartPositie + Breedte plaatje + marge.

JavaScript:

startPos = startPos + dim[0] + 5;

De canvassen worden goed geplaatst en de foto's erin. Het probleem is dat de plaatjes hierna weer verdwijnen, net alsof ieder canvas steeds gecleared wordt. Ik begrijp alleen niet waarom.

Dit regeltje zorgt er steeds voor dat het plaatje in een ander canvas wordt geplaatst.

JavaScript:

imgCanvas = document.getElementById("loadedimg" + i);

[ Voor 18% gewijzigd door High Quality king op 27-01-2013 15:03 ]

[RobIII]

Je lost helemaal niets op met een canvas, flash of welke andere manier dan ook. Een print-screen volstaat. Dit is al honderden keren voorbij gekomen. Je kunt je foto's watermerken en veel anders kun je er niet aan doen.

[High Quality king]

Het on-line werkende voorbeeld van wat ik wil bereiken, maar dan in javascript ipv flash is kennelijk spam. Maar goed geen antwoord op de vraag dus. En geen voorbeeld meer... handig.

Hoe komt het dat ik alleen het laatste plaatje zie (in het laatste canvas) en een hele hoop lege canvassen, wel in de maat van de plaatjes.

Tijdens het f5-en zie ik heel kort het juiste plaatje in het juiste canvas, maar als alle plaatjes geladen zijn is dus alleen het laatste canvas gevuld.

Het Canvas zorgt voor een gerenderd en resized plaatje. Niet de kwaliteit van het origineel dus en detecteerbaar voor mij als onregmatige kopie. Ik wil het dus op deze manier hebben en vraag mij af waarom het niet werkt.

Floren heet ik en ik woon in NL (misschien kom je zo zonder te spammen toch op mijn voorbeeld url, de output moet worden als op de portretten pagina).

[R4gnax]

High Quality king schreef op zondag 27 januari 2013 @ 16:50:
Het Canvas zorgt voor een gerenderd en resized plaatje. Niet de kwaliteit van het origineel dus en detecteerbaar voor mij als onregmatige kopie. Ik wil het dus op deze manier hebben en vraag mij af waarom het niet werkt.

Herschaal je foto's dan met de hand voordat je ze upload naar je website en bewaar de originelen zorgvuldig ergens apart. Probleem opgelost, lijkt me.

Verder eens met RobIII:
Het idee dat je plaatjes kunt 'beschermen' via techniek in je browser is hopeloos achterhaald. Ook via een canvas element een lage kwalititeitsversie maken zet geen zoden aan de dijk. Iedereen die een beetje kundig is kan via de debug tools die in alle hedendaagse browsers beschikbaar zijn alsnog de URLs voor de originele plaatjes voorbij zien komen. (Nog afgezien van het feit dat de URLs waarschijnlijk ook verbatim ergens in je pagina of JavaScript file staan.)

Wil je toch per sè hiermee doorzetten, dan zal ik je één hint geven: je overschrijft innerHTML. Ga eerst eens uitzoeken wat dat inhoudt...

[ Voor 39% gewijzigd door R4gnax op 27-01-2013 17:06 ]

[High Quality king]

Ik zou graag inhoudelijk antwoord op mijn vraag willen hebben. Het hele systeem is juist bedoelt, zodat de foto's steeds fullscreen gerendered kunnen worden. Ik ben al heel lang bezig met dit stuk code, weet dat het geen zaligmakende oplossing is voor al mijn problemen enz enz.

Ik word alleen gewoon heel verdrietig omdat ik niet snap waarom mijn code niet werkt...

[marko77]

misschien helpt het als je aangeeft wat je precies wilt bereiken ipv zelf een oplossing bedenken die wellicht helemaal niet nodig is en onnodig complex. Ik heb zo'n idee dat dit prima zonder canvas kan namelijk.

[crisp]

Ik vermoed dat het gebruik van innerHTML hier de 'state' van je eerder canvas-elementen reset. Gebruik gewoon DOM-methods (createElement en appendChild) om je canvas-elementen aan te maken.

[High Quality king]

Je hebt gelijk Marko77, de makkelijke oplossing is namelijk:

JavaScript:

function loadImages(arr, i) 
{ 
    img = new Image(); 
    img.src = arr[i]; 
    img.onload = function() 
    { 
        var dim = resizeSlides(img, window.innerWidth, heightCorrected); 
        /* 
        document.getElementById("holder").innerHTML += '<canvas id="loadedimg' + i + '" width="'+ dim[0] + '" height = "' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;border:solid 1px #000000;">Your browswer does not support Html5 canvas</canvas>'; 
        imgCanvas = document.getElementById("loadedimg" + i); 
         
        context = imgCanvas.getContext("2d"); 
        context.drawImage(img,  0 , 0 , dim[0] , dim[1]); 
         */
        document.getElementById("holder").innerHTML += '<img src="' + img.src + '" id="loadedimg' + i + '" onclick="clickSlides('+ i +')" width="' + dim[0] + '" height="' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;" />'; 
         
        startPos = startPos + dim[0] + 5; 
        if( i < arr.length-1 ){ loadImages(arr, i+1);}; 
    } 
};

Vervolgens rechter muis knop menu uit met:

HTML:

<body oncontextmenu="return false;">

en nog een stukje code ter preventie van slepen naar de adresbalk.

Dan heb ik alles opgelost, vind ik niet erg elegante oplossing en heb ik nog steeds niet geleerd waarom mijn code niet werkt.

[High Quality king]

Super bedankt crisp, ik ga het proberen en laat het weten.

Ik heb nu dit staan:

JavaScript:

function loadImages(arr, i)
{
    img = new Image();
    img.src = arr[i];
    img.onload = function()
    {
        var dim = resizeSlides(img, window.innerWidth, heightCorrected);
        var imgCanvas = document.getElementById("holder").createElement("canvas");
            imgCanvas.setAttribute("id", '"loadedimg' + i + '"' );
            imgCanvas.setAttribute("width", dim[0] );
            imgCanvas.setAttribute("height", dim[1] );
            imgCanvas.setAttribute("style", '"position:absolute;left:' + startPos + 'px;border:solid 1px #000000;"' );
            imgCanvas.setAttribute("onclick", '"clickSlides('+ i +')"' );
            
        document.getElementById("holder").appendChild(imgCanvas);
        context = imgCanvas.getContext("2d");
        context.drawImage(img,  0 , 0 , dim[0] , dim[1]);
        
        startPos = startPos + dim[0] + 5;
        if( i < arr.length-1 ){ loadImages(arr, i+1);};
    }
};

Die code ziet er mooier uit, maar ik zie nu ook geen lege canvassen meer... Heb ik de syntax misschien verkeerd?

[ Voor 89% gewijzigd door High Quality king op 27-01-2013 18:21 ]

[crisp]

createElement is een method van document. Verder heb je setAttribute bijna nooit nodig voor properties. En als laatste zou ik eerst de onload handler definieëren alvorens de src te zetten:

JavaScript:

function loadImages(arr, i)
{
    var img = new Image();
    img.onload = function()
    {
        var dim = resizeSlides(img, window.innerWidth, heightCorrected);
        var imgCanvas = document.createElement("canvas");
            imgCanvas.id = "loadedimg" + i;
            imgCanvas.width = dim[0];
            imgCanvas.height = dim[1];
            imgCanvas.style.cssText = "position:absolute;left:" + startPos + "px;border:solid 1px #000000";
            imgCanvas.onclick = function() { clickSlides(i); };
            
        document.getElementById("holder").appendChild(imgCanvas);
        context = imgCanvas.getContext("2d");
        context.drawImage(img,  0 , 0 , dim[0] , dim[1]);
        
        startPos = startPos + dim[0] + 5;
        if( i < arr.length-1 ){ loadImages(arr, i+1);};
    }
    img.src = arr[i];
};

(untested)

[High Quality king]

Ah shit echt super bedankt man! Het werkt echt als een zonnetje. Ik ben je eeuwig dankbaar! Wanneer heb je setAttribute wel nodig eigenlijk dan?

[crisp]

High Quality king schreef op zondag 27 januari 2013 @ 20:55:
Ah shit echt super bedankt man! Het werkt echt als een zonnetje. Ik ben je eeuwig dankbaar! Wanneer heb je setAttribute wel nodig eigenlijk dan?

Eigenlijk vooral voor 'custom' attributen. Voor standaard attributen is het bijna altijd beter ze direct te benaderen; zie ook http://stackoverflow.com/...s-attribute-in-javascript

[High Quality king]

ah duidelijk. Nogmaals ontzettend bedankt voor je hulp.

[RobIII]

High Quality king schreef op zondag 27 januari 2013 @ 21:10:
ah duidelijk. Nogmaals ontzettend bedankt voor je hulp.

Maar nu de hamvraag: wát ben je hier nu mee opgeschoten behalve een leuke vingeroefening?

High Quality king schreef op zondag 27 januari 2013 @ 16:50:
Het on-line werkende voorbeeld van wat ik wil bereiken, maar dan in javascript ipv flash is kennelijk spam. Maar goed geen antwoord op de vraag dus. En geen voorbeeld meer... handig.

Daarom vragen we mensen altijd om een testcase te maken; iets waarnaar je kunt verwijzen met enkel de hoognodige code (of in dit geval flash element), ontdaan van allerlei zaken zoals (merk)namen, contactgegevens etc. die dient om 'n probleem te illustreren. In 't geval van je canvas voorbeeld had je zelfs een jsfiddle kunnen maken.

[ Voor 55% gewijzigd door RobIII op 27-01-2013 22:29 ]

[High Quality king]

Crisp heeft ervoor gezorgd dat ik nu een net stuk code heb, dat ik zelf snap. Mijn beelden kunnen nu niet meer op de originele resolutie worden gedownload (wel als je heel moeilijk doet, maar niet als je de gemidddelde beeldredacteur bent), niet meer met save as of naar de adresbalk schuiven. Ik heb verder nu een werkend equivalent van mijn flashpagina in html5, die het ook doet op mijn android phone. Ik bezoek vooral GoT om te leren en hopelijk andere mensen iets te kunnen leren.

Ik heb in ieder geval veel geleerd van de hulp van Crisp, omdat ik javascript niet zo goed beheers.

[RobIII]

High Quality king schreef op woensdag 30 januari 2013 @ 16:37:
Crisp heeft ervoor gezorgd dat ik nu een net stuk code heb, dat ik zelf snap. Mijn beelden kunnen nu niet meer op de originele resolutie worden gedownload (wel als je heel moeilijk doet, maar niet als je de gemidddelde beeldredacteur bent)

Als je een gemiddelde beeldredacteur bent jat je sowieso niet andermans ("copyrighted" c.q. auteursrechtelijk beschermd) materiaal. En de lui die er wél op uit zijn je foto's te jatten kunnen met (o.a.) F12 volstaan om de url's naar daadwerkelijke afbeeldingen te krijgen (en dat is maar 1 van de 1001 andere mogelijkheden zoals in de (browser)cache neuzen, wireshark, printscreen etc.).

Dan:

High Quality king schreef op woensdag 30 januari 2013 @ 16:37:
niet meer met save as of naar de adresbalk schuiven.

en:

High Quality king schreef op zondag 27 januari 2013 @ 17:43:
Vervolgens rechter muis knop menu uit met:

HTML:

<body oncontextmenu="return false;">

Waarmee je als auteur van je pagina met je vingers aan functionaliteit van mijn browser komt; ik kan nu (bijv.) niet meer rechtsklik->translate page doen (of "save to pocket", "inspect element", LastPass context menu gebruiken, etc.) of, wat veel gebruikers doen i.p.v. Ctrl-C/Ctrl-V gebruik maken van de rest van functies uit het context menu. Dit is gewoon not-done (tenzij je het context-menu vervangt met daadwerkelijke functionaliteit zoals een TinyMCE bijvoorbeeld doet, in dat geval kun je er nog over twisten).

M.a.w: de lui die op de "hoge resolutie versies" van je foto's uit zijn krijgen ze toch wel en alle andere mensen geef je een penalty Lose/lose als je 't mij vraagt

[R4gnax]

100% eens met RobIII die hier fijn de puntjes op de i zet.

Crisp heeft je weliswaar een manier gegeven om jouw non-oplossing levend te krijgen (ik vermijd bewust de term 'werkend', want werken doet het dus voor geen moer) maar dat had 'ie achteraf gezien beter niet zo vrijwillig kunnen doen.

Soms moet je gewoon tegengas geven om mensen een zet in de goede richting mee te geven.

[ Voor 21% gewijzigd door R4gnax op 30-01-2013 17:39 ]

[High Quality king]

Ik begrijp dat auteursrecht bij veel tweakers een moeilijk concept is, maar kunnen eten is voor mij toch wel een eerste levensbehoefte. Ik ben natuurlijk niet voor de kat zijn k*t aan het werken. In mijn voormalige flashwebsite die ik noodgedwongen moet vervangen door incompatibiliteit in de computerwereld was er ook al geen sprake van een functioneel contextmenu. Als je weer naar een andere website gaat, heb je al je fuctionaliteit weer terug, dus in feite neem ik je niks af. Behalve dat ik zeg dat als je in mijn huis(pagina) bent je je aan mijn huisregels moet houden.

Ik heb vrienden waar ik vanaf het balkon mag plassen, ik heb liever niet dat ze dat bij mij doen. Als je meer wilt weten over bepaalde elementen van mijn website geef ik graag antwoord.

Met F12 krijg je een full screen browser, maar de resolutie van mijn gerenderde beelden is afhankelijk van de schermresolutie. Het zal je trouwens verbazen hoe vaak een redacteur in de snelheid van de dagelijkse zaken even een hires plaatje van google of een website pakt. Bij het bekijken van de broncode krijg je het xml bestand te zien waar de urls en bijschriften van de foto's in staan. Ook te kopieeren dus, maar weer een extra stapje (bovendien functioneel, zodat ik mijn site makkelijker kan bijhouden).

@R4gnax, wat wil jij bereiken op dit forum dan als je niemand wilt helpen en afkeurend reageert als iemand als Crisp wel iemand helpt? Ik kom hier om beter te leren coden. Ik kan nu beter coden in javascript dan dat ik hiervoor kon. BTW heb jij ook geholpen met je opmerking over innerHTML, alleen begreep ik die toen niet, omdat ik += gebruikte en ik de canvassen wel te zien kreeg. Nu begreep ik later van Crisp dat += geen append doet, maar kopieert en herschrijft. Daarom werkte het dus eerst niet. Dat wist jij al, maar ik begreep dat niet uit jouw opmerking.

[ Voor 9% gewijzigd door High Quality king op 31-01-2013 11:00 ]

[RobIII]

High Quality king schreef op donderdag 31 januari 2013 @ 10:41:
Ik begrijp dat auteursrecht bij veel tweakers een moeilijk concept is, maar kunnen eten is voor mij toch wel een eerste levensbehoefte.

Er is toch niemand die daar problemen mee heeft hier (in dit topic) Ik (en we) zeg(gen) je gewoon dat je met al je foefjes helemaal niets oplost. Lees mijn post nog eens heel goed: de mensen die willen jatten jatten je foto's toch wel, en de mensen die (jouw) auteursrecht respecteren straf je alleen maar met verminkte functionaliteit van de browser.

High Quality king schreef op donderdag 31 januari 2013 @ 10:41:
Met F12 krijg je een full screen browser, maar de resolutie van mijn gerenderde beelden is afhankelijk van de schermresolutie.

Wat we je proberen duidelijk te maken: je foefjes lossen he-le-maal niets op; met F12 krijg je geen full-screen browser maar developer tools (a.k.a. Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly). Daar kun je in de 'network' tab precies zien welke bestanden geladen worden door je browser; zoek daar de url van 't geladen plaatje op, dubbelklik erop en je hebt een nieuwe tab met de originele resolutie. Het kost echt nul komma nakkes moeite om aan de originele resolutie te komen die je webserver serveert hoor Als het over de lijn gaat is 't te "lenen" (lees: jatten). Simple as that.

High Quality king schreef op donderdag 31 januari 2013 @ 10:41:
Bij het bekijken van de broncode krijg je het xml bestand te zien waar de urls en bijschriften van de foto's in staan. Ook te kopieeren dus, maar weer een extra stapje (bovendien functioneel, zodat ik mijn site makkelijker kan bijhouden).

Behalve dat je dan moeilijk doet (waarom de broncode induiken als je voorgenoemde tools hebt!?): al eens gehoord van Security through obscurity? Zoals eerder gezegd: voor de mensen die je werk willen jatten maakt dat ene "drempeltje" (wat al een groot woord is voor zoiets simpels en gangbaars, het is eigenlijk niet eens een barst in de weg, laat staan een drempel) echt niets meer uit hoor. Die krijgen de bestanden toch wel; immers: als het op je webserver staat en de bestanden worden naar de browser verstuurd is het al gebeurd. En de rest van de mensen straf je op je website met kreupele functionaliteit.

Sorry, maar ik heb niet de indruk dat je 't helemaal begrepen hebt.

[High Quality king]

Ah sorry Roblll, maar ik zit hier op apple en kon dus even niet achterhalen wat F12 deed. F11 is fullscreen, dat had ik even door elkaar gehaald. Mensen die mijn werk jatten waar ik normaal geld aan zou verdienen, jatten dit omdat ze geen tijd hebben om mij te bellen en een prijs af te spreken (daarom dus maar even snel kopieren en hopen dat ik er niet achter kom). Ik had het inderdaad niet zo begrepen over dat F12 gedeelte, maar zoals ik al aangaf probeer ik niet de tweaker tegen te houden, maar wel de gemiddelde gebruiker.

Ik begrijp je punt, dat ik mensen niet de functionaliteit van mijn balkon af te plassen afneem, maar ik maak het ze wel een beetje moeilijker. Ook ben ik tevreden met de beperkte functionaliteit van het contextmenu in flash, alleen was dit niet te bekijken op ipads, iphones en mijn nieuwe android phone (wel mijn oude HTC desire). Ik vind het ook jammer dat die functionaliteit mij is afgenomen. Ook, omdat ik nu met een nutteloos duur flash pakket zit, maar ja het is niet anders.

Buiten alle functionaliteit is het idd ook een leuke vingeroefening. Ik had nog niks met html5 gedaan of javascript. Nu gebruik ik dus veel javascript en het voor mij voorheen onbekende canvas element. Ik word er aardig gelukkig van. Weer iets wat ik heb gedaan.

Die raspberry pi die ik heb gekocht, kan ook veel minder dan mijn workstation, toch vind ik het leuk om er mee te klooien.

[Caelorum]

Persoonlijk denk ik ook dat je meer effect gaat hebben met het waarmerken van foto's en een lagere resolutie foto's op je site zetten en dan na afspraak van prijs hoge resolutie foto's zonder waarmerk te leveren, dan de manier waarop je nu werkt. Het kost ook niet meer werk, want ook waarmerken en downscalen is goed te doen serverside.

[TheNephilim]

Wellicht een beetje offtopic, maar als ik jou was zou ik heel voorzichtig zijn met het tegen gaan van het kopiëren van je foto's. Beter kun je gewoon zorgen dat je niet alles op je website knikkert maar een mooie selectie.

Mensen die echt willen gaan er toch wel mee aan de haal en allerlei truukjes en dergelijke maken een website voor bezoekers tot een hel. Daarnaast gaat het er vaak niet beter uitzien!

Zelf ook eens een fotograaf als klant gehad die een website wilde, ook hier meteen over 'kopiëren' bla bla... nou de website is er niet beter van geworden met alle maatregelen die volgens haar nodig waren.

Even naast alle andere discussies, je weet dat HTML5 nog niet heeeel goed ondersteund is en zeker het canvas element niet.

[RobIII]

TheNephilim schreef op donderdag 31 januari 2013 @ 15:48:
Even naast alle andere discussies, je weet dat HTML5 nog niet heeeel goed ondersteund is en zeker het canvas element niet.

HTML5 is heel goed ondersteund hoor, of jij hebt de lat wel héél hoog liggen. Je moet, anno 2013, nog een verdomd goed excuus hebben om géén HTML5 te gebruiken.

[OkkE]

De enige echte oplossing voor dit probleem is in mijn ogen een watermerk zoals ook alle grote stockfoto websites het doen (bijv. iStockphoto). In elke foto je naam en evt. gegevens opnemen, als ze de foto dan toch gebruiken heb je direct extra reclame ook.

[RobIII]

OkkE schreef op donderdag 31 januari 2013 @ 16:34:
De enige echte oplossing voor dit probleem is in mijn ogen een watermerk zoals ook alle grote stockfoto websites het doen (bijv. iStockphoto). In elke foto je naam en evt. gegevens opnemen, als ze de foto dan toch gebruiken heb je direct extra reclame ook.

En als je geen zichtbare watermerken wil zou je nog kunnen kijken naar EXIF en/of steganography waarmee je op z'n minst (mits afbeeldingen niet re-compressed / aangepast worden etc.) kunt aantonen dat de afbeelding van jou is. Sterker: je zou zelfs daarin 't IP (of, wanneer mensen moeten inloggen bijvoorbeeld de username) + datum van serveren van de file kunnen "embedden" wanneer (lees: per keer) dat je die image serveert zodat je de boosdoener kunt achterhalen. Maar ook dat is dus niet waterdicht; je voorkomt er watermerken mee, maar 't "onzichtbare watermerk" in de EXIF/staganography is al heel snel beschadigd/foetsie bij de minste bewerking (al dan niet opzettelijk).

[TheNephilim]

RobIII schreef op donderdag 31 januari 2013 @ 16:00:
[...]

HTML5 is heel goed ondersteund hoor, of jij hebt de lat wel héél hoog liggen. Je moet, anno 2013, nog een verdomd goed excuus hebben om géén HTML5 te gebruiken.

Mwah, er zijn nog teveel consumenten die IE8 of IE7 gebruiken. Inderdaad, HTML5 in de basis werkt prima, maar als je zoiets als canvas wil gebruiken moet je wel even kijken wat je doelgroep is. Tenminste, volgens [url=http://caniuse.com/#feat=canvas]caniuse.com].

Zelf bouwen ik Wordpress thema's mét gebruik van HTML5 en ook CSS3. Voor bepaalde dingen zul je (als dat klant dat wil) toch terug moeten vallen op oudere technieken. Over het algemeen zien veel klanten gelukkig wel in dat het besteden van extra tijd aan IE8 en lager niet de moeite is.