Make crossorigin optional

[souramoo]

PR #54 fixed an issue but caused issue #56 - to fix #56, #54 was reverted. This PR fixes both by making the crossorigin optional and disabled by default - the behaviour of chromium on image loading is complex and hopefully by being flexible this fixes the issue for good!

[nzbin]

Can you provide a reproduce demo to let me know the CORS problem?

[souramoo]

Sure!

https://codepen.io/souramoo/pen/PorVvrQ

the first link has a download button labelled 'dl' which does not work, while the other images do.

[nzbin]

In this article, it has giving a solution for cross origin image.

https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome#solution

fetch(ctx.images[ctx.index].src + "?not-from-cache-please")
            .then((res) => res.blob())
            .then((blob) => {
            fileSaver.saveAs(blob, 'image')
            });

https://codepen.io/nzbin/pen/yLdZdJm

[souramoo]

Unfortunately this does not work for all URLs - especially signed URLs where the image is hosted in AWS/GCP/Azure and any changes to the URL will invalidate the URL. My use case is displaying images with a download button loaded from signed AWS S3 URLs to enforce authentication.

This PR fixes it for all URLs without requiring resigning of the URL from the server (which is not always possible).

[nzbin]

Unfortunately this does not work for all URLs - especially signed URLs where the image is hosted in AWS/GCP/Azure and any changes to the URL will invalidate the URL.

This PR fixes it for all URLs without requiring resigning of the URL from the server (which is not always possible).

So I hope you can give me an image URL to test. I think if the plugin can load cross origin image, you can also fetch it by yourself.

[souramoo]

Have updated the codepen with a test URL.

https://codepen.io/souramoo/pen/PorVvrQ

The image URL is:

https://storage.googleapis.com/soura-karaoke-storage/hacksoft.svg?x-goog-signature=4966360cbf1953e34401b42ecb9ceeb7f995627d52304c4c13062256171359c06abd0202aead84a27f435427ffc3d854b8ff73d96a57e66af8a725348415ce55b4edbef9df4c1fdfc47f327394f9a7ee1fbe92a9dc73a45bc3f5a46101b794b13fb70c4a1f56a870a77ca203053aae6038dac82564d6012412f291139a143728a02da58bdc17f5dbc87fb7e8f3bd73dad08a808e2b26541f2a376e113f3a9b8af057ba321b05306d300e96a02a5f16ad68b178fb85d55157e4acaa0c51721e06a7f5ed1e4ca8c32492c107b95662cd5bf756c7560814c43cdf7ba34088be132e9cede8f32e6e7409064318a0529e9662ed61b6ea1c80543b8b71578cd42e06b5&x-goog-algorithm=GOOG4-RSA-SHA256&x-goog-credential=karaoke%40souraserver.iam.gserviceaccount.com%2F20240910%2Feurope-west2%2Fstorage%2Fgoog4_request&x-goog-date=20240910T093531Z&x-goog-expires=432000&x-goog-signedheaders=host

This URL if changed will no longer work. If fetching it to download it after the browser has already displayed the image, will also no longer work in chromium as the URL has been tainted.

[nzbin]

Test with 3.10.2 and the image can't display. https://codepen.io/nzbin/pen/zYVbYEB

Then test with 3.10.0 and the image can be downloaded. I don't know why...