Chrome:受污染的画布可能无法导出；仅限离线应用 [英] Chrome: Tainted canvases may not be exported; Offline-only app

问题描述

此问题与该主题上的许多现有问题相似，但并不相同，包括

This question is similar, but not identical to many of the existing questions on this topic, including Tainted canvases may not be exported.

我正在编写一个仅脱机应用程序，该应用程序必须保持这种状态，并且不能使用本地Web服务器.有什么方法可以规避画布上的CORS检查，以便将数据复制回基础图像.

I am writing an offline-only app that has to stay that way and cannot use a local web server. Is there any way to circumvent the CORS check on the canvas in order to copy the data back to the base image.

这是我尝试的代码示例:

Here is an example of the code I am trying:

var c1 = document.getElementById("tmp1");
var ctx1 = c1.getContext('2d');
var tmpImg1 = document.getElementById("tmpimg1");
ctx1.drawImage(img1, 0, 0, 150, 150);     
tmpImg1.src = c1.toDataURL();

---

Chrome发出的错误消息如下:

---

The error message from Chrome is as follows:

未捕获的SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出污染的画布.

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

---

在仅脱机的情况下，哪些可用选项仍具有相同的最终结果?

推荐答案

您可以将所有 img.src 指定为内联base64编码的URL.

You could specify all your img.src as inline base64-encoded URLs.

img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAA ..."

通过这种方式，所有img都位于您的应用本地，并且满足CORS.

This way all the imgs are local to your app and CORS is satisfied.

这篇关于Chrome:受污染的画布可能无法导出；仅限离线应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！