Question

I have the below code. I am attempting to
1. import an image from an external site
2. convert image to canvas
3. display the toDataURL() string of the canvas in the browser in the div with ID =’any’

I got steps 1 and 2 but you can see in the output if you switch the comment to the imgur link from google on the line with
img.src
that the output for the toDataURL is the same no matter what the image source is.

I want to do this verus writing to a database for looking at string length and characterists in browser instead of having to flip to the database.

Thanks,
ajt

<canvas id="baseCanvas" width="275" height="95" style="solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
baseCanvas = document.getElementById('baseCanvas');
var img = new Image();

img.onload = function() {
baseCanvas.getContext('2d').drawImage(img,0,0);
baseCanvas.toDataURL('image/png'); 
}

img.src = 'http://www.google.com/images/srpr/logo3w.png';
// img.src = 'http://s.imgur.com/images/imgur.gif'

</script>

<div id="any"></div>
<script type="text/javascript">
document.getElementById('any').innerHTML = baseCanvas.toDataURL('image/png')
</script>

Answer 1

This is a classic error with canvas. You can’t do toDataURL with cross domain image. If you look at the error console you will see “SECURITY_ERR: DOM Exception 18”