Tainted canvas cannot be exported

Question

Following this thread Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

I've been able to solve a strange CORS issue with my html-canvas. As described in the thread above, I got the standard browser CORS violation warning when adding images via the function below but quite "randomly" depending on clearing browser cache or not, I cannot really reproduce why. When removing the crossOrigin: 'anonymous' attribute, I was perfectly able to add images to a canvas from S3 via this function:

fabric.Image.fromURL url, ((img) ->
    # scale template image
    img.scale 0.5
    img.name = 'template_img'
    # add image to canvas
    canvas.add img
    # send to back
    canvas.sendToBack img
    # make not selectable since its the background image
    img.selectable = false
    return
  )

Now my App wants to EXPORT the canvas via

dataURL = canvas.toDataURL(
        format: 'png'
        quality: 0.8)

However, due to the now missing crossOrigin = 'anonymous' attribute, this is being blocked by the browser:

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

In fact, I am in a loop now:

Adding the crossOrigin attribute makes adding images on my canvas fail.
Removing the crossOrigin attribute makes me adding images on my canvas but disallows to export it

I have tried everything to make this work, playing around with CORS rules as well but besides the standard wildcards and domain-settings, there is not much I can do.

My CORS ruleset on AWS S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

What can I do to add images to my canvas and export it afterwards?

Are the images on your domain / server? or are they from another domain? — Blindman67, Sep 02 '17 at 08:22
`a strange CORS issue` - what issue? is the image still cross origin? — Jaromanda X, Sep 02 '17 at 08:23
The images are on S3 where I have a CORS rule established. The CORS issue was exactly as in the thread above described: I get CORS violation due to caching 'randomly' and removing the crossOrigin attribute solved it. — DonMB, Sep 02 '17 at 08:26

score 4 · Accepted Answer · answered Sep 03 '17 at 10:16

For anyone who stumbles over this issue as well. I did some more research and found that this is indeed a common problem of Chrome as Safari seems to work fine. When adding a timestamp behind the URL being added on the canvas, I prevent the browser from caching it every time. This solves the crossOrigin issue and lets me add the attribute properly.

Modified code:

url = url + "?" + Math.random()
fabric.Image.fromURL url, ((img) ->
  # scale template image
  img.scale 0.5
  img.name = 'template_img'
  # add image to canvas
  canvas.add img
  # send to back
  canvas.sendToBack img
  # make not selectable since its the background image
  img.selectable = false
  return
), crossOrigin: 'anonymous'

Tainted canvas cannot be exported

1 Answers1