fix: add crossOrigin property to image for iOS browsers

Fixed #57
fengyuanchen · Nov 23, 2019 · 8ac64e3 · 8ac64e3
1 parent 01453b9
commit 8ac64e3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## next
+
+- Fix the `The operation is insecure` error (#57).
+
 ## 1.0.5 (Jan 23, 2019)
 
 - Fix wrong generated URL when the given image's orientation is 1 (#64).

diff --git a/src/index.js b/src/index.js
@@ -132,6 +132,14 @@ export default class Compressor {
     image.onerror = () => {
       this.fail(new Error('Failed to load the image.'));
     };
+
+    // Match all browsers that use WebKit as the layout engine in iOS devices,
+    // such as Safari for iOS, Chrome for iOS, and in-app browsers.
+    if (WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent)) {
+      // Fix the `The operation is insecure` error (#57)
+      image.crossOrigin = 'anonymous';
+    }
+
     image.alt = file.name;
     image.src = data.url;
   }