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