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

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.


Thanks for the quick reply.  How would I got about getting the image from the URL into the database?  

mvp_badge
MVP


You can use GetRequest_Submit from the HTTPRequestHandler extension to make a GET request to an URL, and you'll receive binary data as your output:


Then it would be a matter of just storing it onto a Binary Data column in one of your Entities.

I'll try to implement that, but I'm getting an error on the GetRequest_Submit when using the URL.  The URL is HTTPS not HTTP, could that be the issue?  (The URL works fine if just typed into a browser, but I get a "The connection has timed out" error when used in the GetRequest_Submit).

mvp_badge
MVP

HTTPS should be fine as long as the certificate is valid, it shouldn't case issues. Do you get any HTTPS errors or warnings when you visit that URL in your browser?

Connections timing out point to an infrastructure issue: when you visit the URL in your browser, your computer is requesting it - but when you use it with the GetRequest_Submit action, your OutSystems environment server is requesting it for you. It sounds like it's not able to reach that URL. Is your OutSystems environment cloud-based, or on-premise? 

If it is on-premise, you should contact whoever manages your infrastructure: there might be a need to add a new firewall rule or an exception to this URL. If your environment is cloud-based, you should get in touch with OutSystems Support - they'll be able to investigate the cause of the timeout and do any necessary configuration changes.

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.