[web] Find an ergonomic solution for CORS images for CanvasKit and Skwasm about flutter HOT 2 OPEN

I suggest making Image.network load the image in the background in the HTML context (the WebGL canvas is running in an HTML context).

By using document.createElement in javascript to create an element and setting the crossOrigin attribute on it, we can load the image into memory behind the scene. Then we load the image onto the canvas from memory without tainting the canvas.

The user experience would be to use Image.network as with other images, and it just works. Enabling CORS on the server will always be required of course.

My knowledge of Flutter Web is limited as of now, but I could present a more concrete solution if I could discuss this with some people well-versed in the Flutter web code and architecture.

Any thoughts on this @yjbanov?

See the following references on CORS images and canvas:
Allowing cross-origin use of images and canvas (MDN)
Using Cross-domain images in WebGL and Chrome 13 (Chromium Blog)

from flutter.

Using Cross-domain images in WebGL and Chrome 13 (Chromium Blog)

After doing some research, I think this could be done in the NetworkImage._loadAsync method in _network_image_web.dart.

from flutter.