WN - Canvas, HTML5 och JS

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Canvas, HTML5 och JS (https://www.wn.se/forum/showthread.php?t=1055657)

yakuzaemme

2012-11-08 10:13

Canvas, HTML5 och JS

Hallå!

Sitter och jobbar lite med en redigerare som använder Canvas, HTML5.

Det finns en redigerare, som är en riktig canvas, sedan en färdigställd produkt som har <img> med style satt till canvas-data (data uri).

Exempel:

Citat:

(____DATAURI_____ är den långa uri)

Hur går jag tillväga om jag vill kalla denna färdigställda "canvas", på detta sätt:

Kod:

var canvas = document.getElementById('main_canvas');

var context = canvas.getContext("2d");

context.fillStyle = 'green';

//etc...

Tacksam för alla svar!

P3N	2012-11-09 13:34

Vet inte svaret på din fråga men funderar på hur du skall kunna ändra en img tagg som om det vore en canvas tagg? Ser lite skumt ut det där.

yakuzaemme

2012-11-09 13:41

Citat:

Ursprungligen postat av P3N (Inlägg 20455063)

Vet inte svaret på din fråga men funderar på hur du skall kunna ändra en img tagg som om det vore en canvas tagg? Ser lite skumt ut det där.

Inte jag som gjort basen, utan jag hoppade in då programmeraren inte kunde fortsätta. Det är en img-tagg med style satt till data-uri, fungerar bra.

Löste det hur som helst, vågar tyvärr inte skriva ut lösning/kod då detta inte är ett eget projekt utan till kund.

Clarence

2012-11-09 14:23

Citat:

Ursprungligen postat av P3N (Inlägg 20455063)

Vet inte svaret på din fråga men funderar på hur du skall kunna ändra en img tagg som om det vore en canvas tagg? Ser lite skumt ut det där.

Ehm genom att anropa toDataUrl på canvas-elementet och ersätta src för <img>, kanske?

yakuzaemme

2012-11-09 14:56

Citat:

Ursprungligen postat av Clarence (Inlägg 20455072)

Ehm genom att anropa toDataUrl på canvas-elementet och ersätta src för <img>, kanske?

Nästan, men ditt sätt kanske fungerar också.

Har gjort som så att den anropar canvas.toDataURL, parameter image/png, och sätter in det den får tillbaka i stylen på img-taggen, dvs:

Kod:

var image = canvas.toDataURL('image/png');

$('#min_bild').css('background-image', "url('" + image + "')");

P3N	2012-11-10 18:36

Måste bara tacka trådskaparen (yakuzaemme) för att du gjorde mig nyfiken på data uri. Sitter och gör en ny version av en sida och det är suveränt med data uri. Är en fröjd att se skillnaden när jag testar den nya sidan på Pingdom tools. Tack :-)

yakuzaemme

2012-11-10 20:40

Citat:

Ursprungligen postat av P3N (Inlägg 20455159)

Hehe, kul att man kan göra nytta med sina problem. Bara att säga till om du har någon fråga/problem! :)

Alla tider är GMT +2. Klockan är nu 05:22.