1

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?

Community
  • 1
  • 1
vbnet3d
  • 1,151
  • 1
  • 19
  • 37
  • Put both the app and the image file on the user's desktop. – markE Jul 08 '16 at 22:06
  • @markE I wish that were an option. I have too many images to do that. Would this work if they were in the same folder, but not necessarily on the desktop? – vbnet3d Jul 09 '16 at 15:04
  • It's been a while since I checked if same-folder worked across all browsers, but it used to be that some browsers threw CORS errors and others didn't. I've posted an answer with an alternative solution. – markE Jul 09 '16 at 15:44

1 Answers1

2

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.

markE
  • 102,905
  • 11
  • 164
  • 176
  • 1
    I had forgotten about this option... I believe the is ideal answer for the offline-only situation. Thanks for the help! – vbnet3d Jul 09 '16 at 15:58
  • I'm building an image cropper, so i wouldn't know the exact encoded URLs. is there a way to generate them from inside the code? – Kylar Jan 03 '17 at 05:57