将画布数据写入字符串并在浏览器中显示

Question

我有以下代码。我正试图 1.从外部站点导入图像 2.将图像转换为画布 3.在ID ='any'

的div中显示浏览器中画布的toDataURL（）字符串

我有第1步和第2步但你可以在输出中看到你是否将评论从google切换到imgur链接 img.src 无论图像源是什么，toDataURL的输出都是相同的。

我想这样写verus写入数据库，以便在浏览器中查看字符串长度和字符，而不必翻转到数据库。

谢谢， 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

这是画布的经典错误。您无法使用跨域图片toDataURL。如果查看错误控制台，您将看到“SECURITY_ERR：DOM Exception 18”