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

我有以下代码。我试图 1导入的图像从外部站点 2.转换图像以帆布 3.显示在与ID =“任意”将画布数据写入字符串并在浏览器中显示它

我在div浏览器画布的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>

来源

2012-03-20 humanbeing

这是一个经典的错误用帆布。您不能使用跨域图像做toDataURL。如果你看看错误控制台，你会看到“SECURITY_ERR：DOM Exception 18”

来源

2012-03-20 03:32:56 tungd

你是说如果图像是本地的机器，它会传递正确的值toDataURL？ – humanbeing 2012-03-20 20:36:40

不是。这只是与“相同来源政策”相关的许多问题之一。如果你想阅读，谷歌的术语。否则，如果您正在学习或只想完成任务，请查看http://www.maxnov.com/getimagedata/ – tungd 2012-03-21 07:43:29

感谢您的回复 – humanbeing 2012-03-22 00:42:55

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

回答

相关问题