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

Question

我有以下代码。我正在尝试 1.从外部站点导入图像 2. 将图像转换为画布 3.在id='any'的div中显示浏览器中canvas的toDataURL()字符串

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

我想执行此操作而不是写入数据库以查看浏览器中的字符串长度和特征，而不必翻到数据库。

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