1

We are trying to build an image editor in Blazor WASM. The source image is a 3rd party site, so when we use HttpClient to retrieve the data, we are hit with a CORS error.

So, we setup a "proxy" (not exactly a proxy), but an ASP.NET API that would retrieve the image and then stream it, to avoid the CORS problem. But now, because this is AWS Lambda, we are running into the AWS Lambda payload limit.

We then tried HttpRequestMessage.SetBrowserRequestMode(BrowserRequestMode.NoCors) and ran into this: https://github.com/dotnet/aspnetcore/issues/24080

We are seemingly running out options.

My next attempt I would like to do is allow the image to flow naturally to <img> from the 3rd party hosting site. This seems to work as the browser does NOT throw a CORS error on the retrieving the data from a 3rd party site.

Is there anyway in Blazor WASM to "steal" the image data from the <img> and put it into a byte array or stream so that we have the image data to work with?

Any other ideas on how to load a large image file into a stream or byte array given the above constraints?

I've also considered chunking it, but that seems like a big hassle.

Tim Bassett
  • 1,325
  • 1
  • 12
  • 23
  • 1
    Please supply more details. The error message and code causing the issue would be a start. – Brian Parker May 20 '22 at 01:18
  • 1
    >>The error message and code causing the issue would be a start. << There is no error message, nor code. I am asking for an alternate method. It is non-sensical to provide a code or an error message for something I have already confirmed will not work via other posts on SO. I am asking for an alternative approach. – Tim Bassett May 20 '22 at 09:56
  • @TimBassett, it appears the problem is simply that [browsers won't let you do this](https://stackoverflow.com/questions/41030425/disabling-cors-using-js-fetch). The suggested alternative is to use a proxy (i.e. not pure web-assembly but the hosted model that also scaffolds an API server). If you look at SO when you try to add an image and you paste in a URL, you'll notice that it sends the URL to StackOverflow's own server (hence no CORS issue) which then makes the actual request from the server itself. You can see how you could do the same thing and return the actual bytes of the image. – Kirk Woll May 20 '22 at 13:13
  • 1
    As for your idea about using an `img` element, this answer appears to show a path forward: https://stackoverflow.com/questions/62511789/javascript-how-to-get-image-as-bytes-from-a-page-without-redownloading – Kirk Woll May 20 '22 at 13:28
  • 1
    @KirkWoll - That does show promise, will look @ later this weekend. Thanks! – Tim Bassett May 20 '22 at 17:31
  • @KirkWoll - Thanks, but no dice. "Taints" the canvas, same underlying problem: CORS. If I ever meet the person that created CORS in a dark alley.... (JK) – Tim Bassett May 20 '22 at 19:03
  • @TimBassett Oh shoot, bummer. :( – Kirk Woll May 20 '22 at 19:07

0 Answers0