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);