From 7aab59b3e301d4f900008d4ac14f938dd3b795eb Mon Sep 17 00:00:00 2001 From: alaa-alshamy Date: Mon, 24 Jan 2022 22:55:04 +0300 Subject: [PATCH] Fix chrome issue with the crossOrigin images In Chrome browser if the image loaded before without crossorigin it will be cached and used later even if the next usage has crossorigin so it will fail with CORS error. so add a random query parameter just to prevent the Chrome from using the cached image. see more info about the Chrome issue in this link: https://stackoverflow.com/a/49503414 --- src/core/cache-storage.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/core/cache-storage.ts b/src/core/cache-storage.ts index 2be98ed..3cd889e 100644 --- a/src/core/cache-storage.ts +++ b/src/core/cache-storage.ts @@ -96,6 +96,10 @@ export class Cache { //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous if (isInlineBase64Image(src) || useCORS) { img.crossOrigin = 'anonymous'; + // in chrome if the image loaded before without crossorigin it will be cached and used later even if the next usage has crossorigin + // so it will fail with CORS error, so add a random query parameter just to prevent the chrome from using the cached image + // see more info about the chrome issue in this link: https://stackoverflow.com/a/49503414 + src = src + (src.indexOf('?') === -1 ? '?' : '&') + 'cacheBusting=1'; } img.src = src; if (img.complete === true) {