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:
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?
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'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.