CODEWITHSUNDEEP
javascripthtml
Araw
Araw

Reputation: 2478

Base64 png to Canvas

I'm struggeling with drawing a image on a Canvas. What I have done so far is that I have inserted imagedata from a Canvas into a database. The problem is that when I try to create an image of the data and draw it back on the Canvas later it does not draw the same, only some pixels may be drawen while the rest is just blank like nothing should be drawen there.

I'm getting the image data like this:

var CanvasData = document.getElementById('canvas'); 
CanvasData = CanvasData.toDataURL("image/png");

And drawing the image back on the Canvas like this (the data is stored in a database):

var result = xmlhttp.responseText;
var CanvasDraw = document.getElementById('canvas'); 
var ctxChange = CanvasDraw.getContext('2d');        

imagedata = new Image();
imagedata.src = result;
imagedata.onload = function(){
    ctxChange.drawImage(imagedata, 0, 0);
}

Here's a link to pastebin for an example of imagedata: http://pastebin.com/XGmV49k9 Result is the data that is returned from a AJAX call and is the same as what is stored in the database.

Thanks for any help.

Upvotes: 1

Views: 554

Answers (1)

antyrat
antyrat

Reputation: 27765

Seems that error in this line:

imagedata.src = result;

Should be:

imagedata.src = CanvasData;

Upvotes: 2

Related Questions