Converting Externally Hosted Images into Data URIs in Javascript

I am building a function that creates a canvas from a container div on a webpage. I ran into an issue with the site images not being allowed on the canvas due to CORs because they're "external images".

They're "external images" because we're working with a site-builder/host(https://www.knack.com/) that puts all uploaded images into their AWS bucket. If I upload an image to "mysite.com" they will save them into the database as aws hosted images. That makes the image src = "https://s3.amazonaws.com/assets.knackhq.com/assets/numbers/numbers/original/filename.jpg".

The images all display fine in browser, but in trying to create a canvas the CORs errors come out.

Now, I found a "workaround". If I convert the image url to a Data URI the image is added to the canvas without problem.

There's an issue with the workaround though. Manually sending the urls through an online converter site works, but is unfeasible for the amount of images we have and since we will be adding more constantly. I've tried many methods of using JS to convert the images to data URI but so far, those methods keep failing due to CORs errors as well.

In short:

  • I want to convert images to a clean canvas but I can't because they're external images
  • I'm stuck dealing with the images as external images due to the constraints and processes of the site I'm working with
  • I do not have access to the server to change settings regarding CORs or setting up any sort of converter on the server
  • If I convert the external images to a data URI they work great
  • I need to convert the images dynamically as it is unfeasible to manually convert every image and then code it in
  • I don't have a way of dynamically converting external images to data URIs

Does anyone know of a working method to do this in JS or a converter API I can call in my code to perform the conversion? Or any other solution at all? I'm pretty much open to anything that can work with the constraints I've listed up here.



Read more here: https://stackoverflow.com/questions/67925190/converting-externally-hosted-images-into-data-uris-in-javascript

Content Attribution

This content was originally published by t73designs at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: