javascript - 使用 JavaScript 将画布转换为图像

Question

我想使用 JavaScript 将画布转换为图像，当我尝试时canvas.toDataURL("image/png"); 它会出现以下错误

SecurityError：操作不安全

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://)，那么绘制的任何图像都会触发标志。这使调试很烦人，但使用 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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //