19
Views
6
Comments
Writing canvas to an image
Question
Application Type
Reactive
Service Studio Version
11.8.13 (Build 32892)

I need to draw shapes onto an image.  The image itself is coming from an outside source, (basically, a land plot image, where we are drawing "zones" onto it - the image is sent to us as a link to an external image, we are not given the .png file itself).  

I was trying to use JavaScript to create a canvas object, use drawImage to put the image into the canvas, draw my shapes onto the canvas, then use the canvas.toDataURL() as the .src of my image.

The problem is that when trying to use canvas.toDataURL(), I get the following error:

Access to image at 'https://***' from origin 'https://dev.***' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I presume this is because the image came from an outside URL.  Is there a better approach than this to draw objects onto an image?  Or if not, a way to not have the image blocked?

mvp_badge
MVP
Rank: #39

Hi Jeff,

Does the image change very often? Is it user-dependent, or is the URL mostly constant? I think the easiest way to avoid this CORS issue would be to serve the content yourself - if you receive a URL to an external image, you could download it, store it in your database and serve it from the same origin as your draw tool.

Rank: #502

For security, the source from outside will be blocked in most of the web implementation method

  1. You can try the suggestion of Afonso. It is better to handle this case
  2. The other solution is to change the configuration of the web server. If you are not in right permission, it is not good idea 

Hope this help