HTML5画布将图像保存为JPEG？

Question

我有一个HTML5画布：

<canvas id="canvas"></canvas>

我尝试将其内容保存为JPEG（并下载或在新窗口中打开）

我尝试过：

var dt = canvas.toDataURL('image/jpeg');
this.href = dt;

我收到了一个安全错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 

有没有办法在不使用服务器端PHP脚本的情况下完成该任务？

Answer 1

源自与提供网页代码的服务器不同的服务器的图像将导致绘制该图像的任何html画布变得“污染”。受污染的画布可能无法导出其图像数据......

原因如下：

您的浏览器具有内置安全措施，可阻止恶意软件窃取您的重要信息。这包括窃取您的银行登录屏幕的图像，如果允许html画布允许（1）使用html画布创建登录屏幕的图像并且（2）使用canvas.toDataURL将该图像传输给窃贼，则可以完成该图像。

解决方案很简单（无需脚本）。只需将您的图像放在与.html，.css和.js文件相同的服务器上，并提供该服务器中的所有文件。