Add async method to utils for loading/checking images

1 files changed, 15 insertions, 0 deletions

diff --git a/src/js/utils.js b/src/js/utils.js
index ebfb9c96..0cd332dd 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -119,6 +119,21 @@ const utils = {
         });
     },
 
+    // Load image avoiding xhr/fetch CORS issues
+    // Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded.
+    // By default it checks if it is at least 1px, but you can add a second argument to change this.
+    loadImage(src, minWidth = 1) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            const handler = () => {
+                delete image.onload;
+                delete image.onerror;
+                (image.naturalWidth >= minWidth ? resolve : reject)(image);
+            };
+            Object.assign(image, {onload: handler, onerror: handler, src});
+        });
+    },
+
     // Load an external script
     loadScript(url) {
         return new Promise((resolve, reject) => {