使用 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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //