image-sequencer/src/ui/LoadImage.js

// special module to load an image into the start of the sequence; used in the HTML UI
function LoadImage(ref, name, src, main_callback) {
  function makeImage(datauri) {
    var image = {
      src: datauri,
      format: datauri.split(':')[1].split(';')[0].split('/')[1]
    };
    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)) {
      datauri = src;
      callback(datauri, step);
    }
    else if (!ref.options.inBrowser && !!src.match(/^https?:\/\//i)) {
      require(src.match(/^(https?):\/\//i)[1]).get(src, function(res) {
        var data = '';
        var contentType = res.headers['content-type'];
        res.setEncoding('base64');
        res.on('data', function(chunk) { data += chunk; });
        res.on('end', function() {
          callback('data:' + contentType + ';base64,' + data, step);
        });
      });
    }
    else if (ref.options.inBrowser) {
      
      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);
      callback(datauri, step);
    }
  }

  function loadImage(name, src) {
    var step = {
      name: 'load-image',
      description: 'This initial step loads and displays the original image without any modifications.',
      ID: ref.options.sequencerCounter++,
      inBrowser: ref.options.inBrowser,
      ui: ref.options.ui,
      UI: ref.events,
      output: ''
    };


    CImage(src, step, function(datauri, step) {
      var output = makeImage(datauri);
      ref.steps.push(step);
      ref.steps[0].output = output;
      ref.steps[0].UI.onSetup(ref.steps[0]);
      ref.steps[0].UI.onDraw(ref.steps[0]);
      ref.steps[0].UI.onComplete(ref.steps[0]);

      main_callback();
      return true;
    });
  }

  return loadImage(name, src);
}

module.exports = LoadImage;