Error loading Base64 on canvas

Question

I am trying to load a Base64 string from my database into a canvas.

I got this line from the reverse method: I saved it in my database after drawing on canvas. So now I want to upload it back to another canvas. I tried this code, which I found on the Internet and somewhere else here in StackOverflow, but it does not work.

<script type="text/javascript"> $(document).ready(function(){ var canvas = document.getElementById("loading_canvas"); var ctx = canvas.getContext("2d"); var image = new Image(); $.post('doodles/load', function(data) { image.src = data; }); ctx.drawImage(image, 0, 0); }); </script> 

I am loading data from my database using ajax call.

If I alert() data var, it displays an encoded Base64 string. So this is actually not the case. I just end up with a blank canvas all the time.

Does anyone know what I'm doing wrong here? Many thanks!

Answer 1

Try drawing the image after the image loading event:

 var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0); } $.post('doodles/load', function(data) { image.src = data; }); 

src should have the full data url, not just the base64 dataset, so check it as well. Example (from Wikipedia ):

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> 

Answer 2

if your data is base64 data-uri , you should only move one line and everything works fine.

 <script type="text/javascript"> $(document).ready(function(){ var canvas = document.getElementById("loading_canvas"); var ctx = canvas.getContext("2d"); var image = new Image(); $.post('doodles/load', function(data) { image.src = data; ctx.drawImage(image, 0, 0); }); }); </script>