0

I am developing an application for iPhone using the PhoneGap and I am coding in JavaScript. What I do is that I am downloading an image from the web and encode it into Base64 to store it in my database using the:

dataURL = canvas.toDataURL("image/png");

The stored image is of the form:

data:image/jpeg;base64,ENCODING...

Now, I need when the user is offline, to get the image from the database and display it on the HTML5 canvas item. I have the following code for that:

var canvas = document.getElementById("draw_area");
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = dataURL;

myImage.onload = function (){
    context.drawImage (myImage, 0, 0);        
};

BUT I get an empty canvas even though I check and am sure that the src is the exact base64 encoding I get from the database. Should I do something else first, like decoding and then display the image? If yes, how do I implement that?

tasanoui
  • 67
  • 3
  • 12

3 Answers3

1

This can be done simply by

<img id="company_logo"/>
<script type="text/javascript" > 
document.getElementById("company_logo").src="data:image/png;base64,"+base64String;
</script>
Thomas V J
  • 658
  • 8
  • 7
0

as my personal experience , it's CSP related, try add this line to your html meta or append it to your existing CSP.

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:">
Jeffrey Kao
  • 13
  • 1
  • 3
-1

Using your code as base I hacked a q'n'd sample together. It worked but only, if it's on an web server initially (no "file:///...") and in the same domain, otherwise a security error gets thrown when calling context.toDataURL().
See this SO post.

So maybe you should first try to wrap your script in a try...catch and see if an error gets thrown.

Edit: here's the hacked version (place it on a server and put a "green.png" next to it):

<html>
<body>
<img id="image" src="green.png"/>
<canvas id="draw1" style="width:100px;height:100px;border:1px solid red"></canvas>
<canvas id="draw2" style="width:100px;height:100px;border:1px solid green"></canvas>
<script type="text/javascript">
var image = document.getElementById("image");
var canvas1 = document.getElementById("draw1");

canvas1.getContext("2d").drawImage(image,0,0);

var canvas2 = document.getElementById("draw2");

var dataUrl = canvas1.toDataURL();

var myImage = new Image();

myImage.src = dataUrl;

canvas2.getContext('2d').drawImage(myImage, 0, 0);            


</script>
</body>
</html>
Community
  • 1
  • 1
David Rettenbacher
  • 5,088
  • 2
  • 36
  • 45
  • @ Warappa I do not get any error back. I test it with a try and catch statement without any problem. I also retrieve the item from the database correctly. Now how can I display it? – tasanoui Jul 27 '11 at 19:44
  • thanks for the update, it seems to be a good idea and I really need to solve this problem! But the image I need to display is a Google's static map which I encode using the .toDataURL() function and then I need to display it to the user when is offline. Do you know something more on that? – tasanoui Jul 28 '11 at 12:56