使用JavaScript将画布转换为图像

Question

我想使用JavaScript将画布转换为图像，当我尝试canvas.toDataURL("image/png");时，它会给出错误SecurityError: The operation is insecure。请帮我解决这个问题。

提前致谢。

Answer 1

你有正确的想法，它可以在非常简单的情况下工作，例如：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);

http://jsfiddle.net/simonsarris/vgmFN/

但是如果你的画布“弄脏了”就会出现问题。这是通过将图像绘制到来自不同来源的画布来完成的。例如，如果您的画布托管在www.example.com，并且您使用来自www.wikipedia.org的图像，则您的画布'origin-clean标志在内部设置为false。

将origin-clean标志设置为false后，您将不再被允许致电toDataURL或getImageData

---

从技术上讲，如果域，协议和端口匹配，图像的来源相同。

---

如果您在本地工作（file：//），那么绘制的任何图像都会将标志设置为off。这会使调试变得烦人，但使用Chrome时，您可以使用标记--allow-file-access-from-files启动它以允许此操作。

Answer 2

这对我有用

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //