Notify Users for the failure in loading Image via external URL (#1813)

* Load image via URL

* notify users for image load failue due to CORS error

* added a check for notifybox

* added some more checks

* added bootstrap version v4 classes

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

examples/demo.css

@@ -333,7 +333,7 @@ a.name-header{
   display: block;
 }
 
-#update-prompt-modal {
+#update-prompt-modal,.notify-box {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
@@ -347,7 +347,28 @@ a.name-header{
  left: 10%;
  top: 30px;
 }
-#update-prompt-modal.show {
+
+.notify-box {
+  width:34vw;
+  padding:18px;
+  border-radius:8px;
+  margin-left:0.8rem;
+  text-align:left;
+  color:#333;
+  background:#c3c3c3;
+}
+
+/* Bootstrap class for display none remove it after updating to version v4 */
+.d-none {
+  display:none;
+}
+
+/* Bootstrap class for display block remove it after updating to version v4 */
+.d-block {
+  display:block;
+}
+
+#update-prompt-modal.show,.notify-box {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;

examples/index.html

@@ -58,6 +58,15 @@
 
   <div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>
 
+  <div class="notify-box d-none">
+    <strong>Failed To Load Image</strong>
+    <button type="button" class="ml-2 mb-1 close" id="close-popup"><span>&times;</span></button>
+    <div class="notify-msg">
+      Can not Load Image Due to CORS Error Learn more about this 
+      <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" target="_blank">here</a>
+    </div>
+  </div>
+
   <div class="container-fluid">
 
     <header class="text-center">

src/ui/LoadImage.js

@@ -7,6 +7,22 @@ function LoadImage(ref, name, src, main_callback) {
     };
     return image;
   }
+
+  // function to check whether a image can be fetched from external source or not
+  function checkForError(image_url) {
+    return fetch(image_url).then(function(res) {
+      if(res)
+        return false;
+      else 
+        return true;
+    }).catch(function(err) {
+      if(err)
+        console.log('Error occured because of image URL ',err);
+
+      return true;
+    });
+  }
+
   function CImage(src, step, callback) {
     var datauri;
     if (src.match(/^data:/i)) {
@@ -25,18 +41,42 @@ function LoadImage(ref, name, src, main_callback) {
       });
     }
     else if (ref.options.inBrowser) {
-      var ext = src.split('.').pop();
+      
-      var image = document.createElement('img');
+      let notifyBox = document.querySelector('div.notify-box');
-      var canvas = document.createElement('canvas');
+      let closePopUP = document.getElementById('close-popup');
-      var context = canvas.getContext('2d');
+      if(src.indexOf('images/') !== 0  && src.indexOf('./images/') !== 0 && checkForError(src)){
-      image.onload = function() {
+
-        canvas.width = image.naturalWidth;
+        if(notifyBox){
-        canvas.height = image.naturalHeight;
+          notifyBox.classList.remove('d-none');
-        context.drawImage(image, 0, 0);
+          notifyBox.classList.add('d-block');
-        datauri = canvas.toDataURL(ext);
+        }
-        callback(datauri, step);
+
-      };
+        if(closePopUP){
-      image.src = src;
+          closePopUP.addEventListener('click',function(){
+            if(notifyBox){
+              notifyBox.classList.remove('d-block');
+              notifyBox.classList.add('d-none');
+            }
+            if(document.querySelector('button.remove'))
+              document.querySelector('button.remove').click(); // Remove the step due to redundant processing.
+            location.reload();
+          });
+        }
+      }
+      else{
+        var ext = src.split('.').pop();
+        var image = document.createElement('img');
+        var canvas = document.createElement('canvas');
+        var context = canvas.getContext('2d');
+        image.onload = function() {
+          canvas.width = image.naturalWidth;
+          canvas.height = image.naturalHeight;
+          context.drawImage(image, 0, 0);
+          datauri = canvas.toDataURL(ext);
+          callback(datauri, step);
+        };
+        image.src = src;
+      }
     }
     else {
       datauri = require('urify')(src);