diff --git a/examples/demo.css b/examples/demo.css index 463a8b8fd9..2119935cab 100644 --- 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,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; diff --git a/examples/index.html b/examples/index.html index 3d5e903582..7b84f3fea8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -58,6 +58,15 @@
A new version of image sequencer is available. Click here to update.
+
+ Failed To Load Image + +
+ Can not Load Image Due to CORS Error Learn more about this + here +
+
+
diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js index 4d5987b217..ab5f558e86 100644 --- a/src/ui/LoadImage.js +++ b/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'); - 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; + + let notifyBox = document.querySelector('div.notify-box'); + let closePopUP = document.getElementById('close-popup'); + if(src.indexOf('images/') !== 0 && src.indexOf('./images/') !== 0 && checkForError(src)){ + + if(notifyBox){ + notifyBox.classList.remove('d-none'); + notifyBox.classList.add('d-block'); + } + + if(closePopUP){ + 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);