JavaScript 代码报错

代码如下：

<!doctype html>
<html>
    <body id="body">
        <img id="pic">
        <script src="./b.js"></script>
    </body>
</html>

其中, b.js 内代码如下：

var c,ctx,p1,p2,b;
c=document.createElement("canvas");
p1=document.createElement("img");
p2=document.getElementById("pic");
b=document.getElementById("body");
b.appendChild(p1);
p1.src="./a.jpg";
p1.onload=function() {
    try{
        c.width=p1.width;
        c.height=p1.height;
        ctx=c.getContext("2d");
        b.appendChild(c);
        ctx.drawImage(p1,0,0);
        alert("Fine 2.");
        while(p2==null)alert("Error.");
        alert("Fine 3.");
        p2.src=c.toDataURL("image/png");
        alert("Fine.");
        } catch (e) {
            alert(""+e);
        }
}

在此文件夹下，还有一个 jpg 文件。

代码报错，报错信息如下：
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
我想利用浏览器将 jpg 转 png ，请问报错如何解决？

报错信息 "SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." 意味着你的脚本尝试将一个受限制的画布（tainted canvas）导出为数据URL，但这是被浏览器安全策略禁止的。

这种情况通常发生在以下情况下：

  • 画布绘制了来自不同域的图像。
  • 图像是通过本地文件系统（例如 file://）加载的。

浏览器实施了同源策略（same-origin policy），这意味着当画布绘制了来自其他域的图像时，它被认为是受限制的（tainted），从而限制了对导出为数据URL的访问。

要解决这个问题，你可以尝试以下方法：

  1. 确保图像来源与你的脚本在同一个域名下。将图像上传到与你的网页相同的域名，然后从该域名加载图像。这样就避免了跨域限制，画布就不会被标记为受限制的了。

  2. 如果你正在本地开发并且使用了 file:// 协议，尝试将你的文件部署到一个本地服务器（例如使用 Node.js 或者 Python 的简单 HTTP 服务器），并通过服务器访问你的网页。这样使用 HTTP 协议加载图像，就不会受到同源策略的限制。

请注意，如果你在使用第三方图像并无法更改其来源或部署到服务器上，那么无法直接通过 JavaScript 在浏览器中进行转换。在这种情况下，你可能需要考虑使用服务器端的图像处理工具来完成转换操作。

希望这些解决方案能帮助你解决问题！如果还有其他疑问，请随时提问。

p2.crossOrigin = "Anonymous"; // 加这句试试