notify users for image load failue due to CORS error

publiclab · Feb 18, 2021 · ff86747 · ff86747
1 parent d4b7339
commit ff86747
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 15 deletions.
diff --git a/examples/demo.css b/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,18 @@ 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;
+}
+
+#update-prompt-modal.show,#notify-box {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;

diff --git a/examples/index.html b/examples/index.html
@@ -58,6 +58,8 @@
 
   <div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>
 
+  <div id="notify-box" class="hide"></div>
+
   <div class="container-fluid">
 
     <header class="text-center">

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
@@ -57,7 +57,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
                 <div class="col-md-8 cal collapse in step-column">\
                   <div class="load load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
                   <div class="step-image">\
-                    <a class="cal collapse in"><img class="img-thumbnail step-thumbnail" crossorigin="anonymous" /></a>\
+                    <a class="cal collapse in"><img class="img-thumbnail step-thumbnail" /></a>\
                   </div>\
                 </div>\
               </div>\

diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js
@@ -7,6 +7,39 @@ function LoadImage(ref, name, src, main_callback) {
     };
     return image;
   }
+
+  // notify users through specific message
+  function PopUpMessage(popupTitle,message,isURL){
+
+    let redirect = '';
+    if(isURL){
+      redirect = '<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" target="_blank">here</a>';
+    }
+
+    if(message.trim() !== ''){
+      document.getElementById('notify-box').innerHTML = '<strong>' + popupTitle + '</strong>\
+          <button type="button" class="ml-2 mb-1 close" id="close-popup">\
+          <span>&times;</span>\
+          </button>\
+        <div>' + message + ' ' + redirect + ' </div>';
+    }
+  }
+
+  // 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 +58,37 @@ function LoadImage(ref, name, src, main_callback) {
       });
     }
     else if (ref.options.inBrowser) {
-      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;
+
+      if(src.indexOf('images/') !== 0  && src.indexOf('./images/') !== 0 && checkForError(src)){
+        if(document.getElementById('notify-box').innerHTML === ''){
+          PopUpMessage('Failed To Load Image ','Can not Load Image Due to CORS Error Learn more about this ',true);
+        }
+
+        document.getElementById('notify-box').classList.remove('hide');
+        document.getElementById('notify-box').classList.add('show');
+
+        document.getElementById('close-popup').addEventListener('click',function(){
+          document.getElementById('notify-box').classList.remove('show');
+          document.getElementById('notify-box').classList.add('hide');
+          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);