add fallback loading to cross-domain images vuematerial#424

nuntipat · Feb 8, 2017 · 52d77ff · 52d77ff
1 parent 47b17b8
commit 52d77ff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/components/mdCard/mdCardMediaCover.vue b/src/components/mdCard/mdCardMediaCover.vue
@@ -46,6 +46,13 @@
       }
     },
     mounted() {
+      const applyBackground = (darkness = 0.6) => {
+        if (this.mdTextScrim) {
+          this.applyScrimColor(darkness);
+        } else if (this.mdSolid) {
+          this.applySolidColor(darkness);
+        }
+      };
       let image = this.$el.querySelector('img');
 
       if (image && (this.mdTextScrim || this.mdSolid)) {
@@ -57,12 +64,8 @@
             darkness = 0.7;
           }
 
-          if (this.mdTextScrim) {
-            this.applyScrimColor(darkness);
-          } else if (this.mdSolid) {
-            this.applySolidColor(darkness);
-          }
-        });
+          applyBackground(darkness);
+        }, applyBackground);
       }
     }
   };

diff --git a/src/components/mdImage/mdImage.vue b/src/components/mdImage/mdImage.vue
@@ -31,6 +31,10 @@
     },
     methods: {
       analyzeLightness(image) {
+        const applyLoad = () => {
+          this.loaded = true;
+        };
+
         getImageLightness(image, (lightness) => {
           let limit = 256;
           let darkness = (Math.abs(limit - lightness) * 100 / limit + 15) / 100;
@@ -39,10 +43,8 @@
             this.applyBlack = true;
           }
 
-          this.$nextTick(() => {
-            this.loaded = true;
-          });
-        });
+          this.$nextTick(applyLoad);
+        }, applyLoad);
       },
       createImage() {
         this.loaded = false;

diff --git a/src/core/utils/getImageLightness.js b/src/core/utils/getImageLightness.js
@@ -1,6 +1,8 @@
-const getImageLightness = (image, onLoad) => {
+const getImageLightness = (image, onLoad, onError) => {
   let canvas = document.createElement('canvas');
 
+  image.crossOrigin = 'Anonymous';
+
   image.onload = function() {
     let colorSum = 0;
     let ctx;
@@ -31,6 +33,8 @@ const getImageLightness = (image, onLoad) => {
 
     onLoad(Math.floor(colorSum / (this.width * this.height)));
   };
+
+  image.onerror = onError;
 };
 
 export default getImageLightness;