Chrome：受污染的画布可能无法导出； 仅限离线应用

Question

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

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

---

The error message from Chrome is as follows:

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

---

In an offline-only situation, what options are available that still have the same end result?

Answer 1

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

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

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