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..ede41ed671 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -58,6 +58,8 @@
A new version of image sequencer is available. Click
here to update.
+
+
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index 6e6d91791b..eff4723638 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..c1a85736cd 100644
--- 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 = 'here';
+ }
+
+ if(message.trim() !== ''){
+ document.getElementById('notify-box').innerHTML = '' + popupTitle + '\
+ \
+ ' + message + ' ' + redirect + '
';
+ }
+ }
+
+ // 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);