Drew a couple of pictures and realised that I’m not as handy at drawing with the mouse as I used to be - so then I figured it would be better if I just put a random picture of a unicorn in. So I whacked open Developer Tools and tried to directly draw an image on the canvas element:
var img = document.createElement("img"); img.src = "http://somewhere-off-site.com/unicorn.jpg"; ctx.drawImage(img,0,0);
Can you see the problem? Pub-quiz points if you correctly guessed ‘Cross Domain Security’. It was perfectly fine to chuck the picture into the canvas without a problem cropping up. The issue happens when the code tried to call ‘getDataURL’ for transmission. That’s the no no.
So what did I do? I cheated a little bit - browsing to the picture I wanted, getting the dataURL and copying it across to the original browser window.
var canvas = document.createElement("canvas"); canvas.width = 50; canvas.height= 50; // Random image from Google Image search for unicorn - don't judge me! var img = document.createElement("img"); img.src = "http://media.avclub.com/images/articles/article/62/62295/GLE_302-Sc9_2191_jpg_627x325_crop_upscale_q85.jpg"; var ctx = canvas.getContext("2d"); ctx.drawImage(img,-450,100); var dataStr = canvas.toDataURL("image/png"); window.location=dataStr;
The window URL changes to give me my data URL (which I’ve put as the src attribute for the image tag below:
Last thing to do is set the encoded data as the src rather than the external image URL in the code above:
var img = document.createElement("img"); img.src = "data:image/jpeg;base64,/9j/4AAQSkZJR...."; ctx.drawImage(img,0,0);
No more security problems - but we did cheat! It’s a far from perfect solution (and far from perfect coding) but it works for what I wanted to do. I wanted to manually put external image data on to a canvas element and do it manually.