From d4b73399d6c7b219e0a2c13e3a351ab069ad84a6 Mon Sep 17 00:00:00 2001 From: vivek singh Date: Tue, 16 Feb 2021 20:00:32 +0530 Subject: [PATCH 1/5] Load image via URL --- examples/lib/defaultHtmlStepUi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index d50caab37f..6e6d91791b 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -57,7 +57,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
\ \
\ - \ + \
\
\ \ From 9d82d16fbeed07fc8b42f821338238166929659b Mon Sep 17 00:00:00 2001 From: vivek singh Date: Thu, 18 Feb 2021 15:19:58 +0530 Subject: [PATCH 2/5] notify users for image load failue due to CORS error --- examples/demo.css | 15 +++++++-- examples/index.html | 9 +++++ examples/lib/defaultHtmlStepUi.js | 2 +- src/ui/LoadImage.js | 56 ++++++++++++++++++++++++------- 4 files changed, 67 insertions(+), 15 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index 463a8b8fd9..b5d2a25ffd 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,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 index 3d5e903582..ef9aa121cb 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/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 6e6d91791b..d50caab37f 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -57,7 +57,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
\ \
\ - \ + \
\
\
\ diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js index 4d5987b217..4ec4e62e8c 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,34 @@ 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.getElementById('notify-box'); + if(src.indexOf('images/') !== 0 && src.indexOf('./images/') !== 0 && checkForError(src)){ + notifyBox.classList.remove('hide'); + notifyBox.classList.add('show'); + + document.getElementById('close-popup').addEventListener('click',function(){ + notifyBox.classList.remove('show'); + notifyBox.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); From 70df3cb5fe5958b1ed8b75191e3f7b3438a5e14c Mon Sep 17 00:00:00 2001 From: vivek singh Date: Thu, 18 Feb 2021 18:39:08 +0530 Subject: [PATCH 3/5] added a check for notifybox --- src/ui/LoadImage.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js index 4ec4e62e8c..4bced7adef 100644 --- a/src/ui/LoadImage.js +++ b/src/ui/LoadImage.js @@ -44,8 +44,11 @@ function LoadImage(ref, name, src, main_callback) { let notifyBox = document.getElementById('notify-box'); if(src.indexOf('images/') !== 0 && src.indexOf('./images/') !== 0 && checkForError(src)){ - notifyBox.classList.remove('hide'); - notifyBox.classList.add('show'); + + if(notifyBox){ + notifyBox.classList.remove('hide'); + notifyBox.classList.add('show'); + } document.getElementById('close-popup').addEventListener('click',function(){ notifyBox.classList.remove('show'); From 4ab5be29b75f0ccb5b4417d5362a93f5f744d55b Mon Sep 17 00:00:00 2001 From: vivek singh Date: Thu, 18 Feb 2021 18:51:12 +0530 Subject: [PATCH 4/5] added some more checks --- src/ui/LoadImage.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js index 4bced7adef..571231be0b 100644 --- a/src/ui/LoadImage.js +++ b/src/ui/LoadImage.js @@ -43,6 +43,7 @@ function LoadImage(ref, name, src, main_callback) { else if (ref.options.inBrowser) { let notifyBox = document.getElementById('notify-box'); + let closePopUP = document.getElementById('close-popup'); if(src.indexOf('images/') !== 0 && src.indexOf('./images/') !== 0 && checkForError(src)){ if(notifyBox){ @@ -50,13 +51,17 @@ function LoadImage(ref, name, src, main_callback) { notifyBox.classList.add('show'); } - document.getElementById('close-popup').addEventListener('click',function(){ - notifyBox.classList.remove('show'); - notifyBox.classList.add('hide'); - if(document.querySelector('button.remove')) - document.querySelector('button.remove').click(); // Remove the step due to redundant processing. - location.reload(); - }); + if(closePopUP){ + closePopUP.addEventListener('click',function(){ + if(notifyBox){ + notifyBox.classList.remove('show'); + notifyBox.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(); From 7d507156b590d477f821c6584d5a5ab0831926e8 Mon Sep 17 00:00:00 2001 From: vivek singh Date: Fri, 19 Feb 2021 22:54:54 +0530 Subject: [PATCH 5/5] added bootstrap version v4 classes --- examples/demo.css | 16 +++++++++++++--- examples/index.html | 6 +++--- src/ui/LoadImage.js | 10 +++++----- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index b5d2a25ffd..2119935cab 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -333,7 +333,7 @@ a.name-header{ display: block; } -#update-prompt-modal,#notify-box { +#update-prompt-modal,.notify-box { visibility: hidden; min-width: 250px; margin-left: -125px; @@ -348,7 +348,7 @@ a.name-header{ top: 30px; } -#notify-box { +.notify-box { width:34vw; padding:18px; border-radius:8px; @@ -358,7 +358,17 @@ a.name-header{ background:#c3c3c3; } -#update-prompt-modal.show,#notify-box { +/* 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 ef9aa121cb..7b84f3fea8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -58,12 +58,12 @@
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 + here
diff --git a/src/ui/LoadImage.js b/src/ui/LoadImage.js index 571231be0b..ab5f558e86 100644 --- a/src/ui/LoadImage.js +++ b/src/ui/LoadImage.js @@ -42,20 +42,20 @@ function LoadImage(ref, name, src, main_callback) { } else if (ref.options.inBrowser) { - let notifyBox = document.getElementById('notify-box'); + 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('hide'); - notifyBox.classList.add('show'); + notifyBox.classList.remove('d-none'); + notifyBox.classList.add('d-block'); } if(closePopUP){ closePopUP.addEventListener('click',function(){ if(notifyBox){ - notifyBox.classList.remove('show'); - notifyBox.classList.add('hide'); + 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.