使用JavaScript将画布转换为图像

Question

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

SecurityError：该操作不安全

- mmpatel009

---

看看这个答案。http://stackoverflow.com/questions/7279438/why-is-this-todataurl-line-a-security-error - Dmitry Volokh

此处不涉及查询。 - shabunc

在画布中，如果从其他域加载图像，则会出现错误。当画布中的图像未加载时，对我来说它可以正常工作。 - mmpatel009

使用PHP保存图像文件：https://dev59.com/V6bja4cB1Zd3GeqPbiEm#50131281 - Sibin John Mattappallil

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);

JSFiddle

如果您在画布上绘制了来自不同源的图像，则会出现问题，这会使您的画布变得“肮脏”。例如，如果您的画布托管在www.example.com，并且使用来自www.wikipedia.org的图像，则您的画布的origin-clean标志在内部设置为false。

一旦 origin-clean 标志被设置为 false，则不允许再调用 toDataURL 或 getImageData 方法。

---

从技术上讲，只有当域名、协议和端口匹配时，图像才属于相同的源。

---

如果您正在本地工作（file://），则任何绘制的图像都会触发此标志。这使得调试变得烦人，但使用 Chrome 您可以使用标志 --allow-file-access-from-files 来允许它。

- Simon Sarris

---

+1 对于 Chrome 标志，我之前没有听说过，但在许多情况下绝对有用。谢谢！ - Adrian

谢谢...!! Simon，非常简单明了的回答 :) - shruti

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

- Sharan Rajendran

---

这个回答与问题无关，问题并没有使用jqPlot，并且询问的是在尝试将图像数据字符串化时出现的错误。你的示例并不能解决这个问题，因为它没有复制出现问题所需的条件（即跨域图像资源）。 - apsillers