Support External Images via Canvas

dist/image-sequencer.js

@@ -34717,8 +34717,7 @@ ImageSequencer = function ImageSequencer(options) {
     for (var i in json_q.images)
       require('./LoadImage')(this,i,json_q.images[i])
 
-    json_q.callback();
+    var ret = {
-    return {
       name: "ImageSequencer Wrapper",
       sequencer: this,
       addSteps: this.addSteps,
@@ -34729,6 +34728,8 @@ ImageSequencer = function ImageSequencer(options) {
       setUI: this.setUI,
       images: loadedimages
     };
+    json_q.callback.call(ret);
+    return ret;
   }
 
   function replaceImage(selector,steps,options) {
@@ -34799,14 +34800,38 @@ module.exports = InsertStep;
 
 },{}],115:[function(require,module,exports){
 function LoadImage(ref, name, src) {
-  function CImage(src) {
+  function makeImage(datauri) {
-    var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src);
     var image = {
       src: datauri,
       format: datauri.split(':')[1].split(';')[0].split('/')[1]
     }
     return image;
   }
+  function CImage(src, callback) {
+    var datauri;
+    if (src.substring(0,11) == "data:image/") {
+      datauri = src;
+      callback(datauri);
+    }
+    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);
+      }
+      image.src = src;
+    }
+    else {
+      datauri = require('urify')(src);
+      callback(datauri);
+    }
+  }
 
   function loadImage(name, src) {
     var image = {
@@ -34834,13 +34859,17 @@ function LoadImage(ref, name, src) {
           }
           return false;
         },
-        output: CImage(src)
       }]
     };
-    ref.images[name] = image;
+    CImage(src, function(datauri) {
-    ref.images[name].steps[0].UI.onSetup();
+      var output = makeImage(datauri);
-    ref.images[name].steps[0].UI.onDraw();
+      image.steps[0].output = output;
-    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+      ref.images[name] = image;
+      ref.images[name].steps[0].UI.onSetup();
+      ref.images[name].steps[0].UI.onDraw();
+      ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+      return true;
+    });
   }
 
   return loadImage(name,src);

src/ImageSequencer.js

@@ -142,8 +142,7 @@ ImageSequencer = function ImageSequencer(options) {
     for (var i in json_q.images)
       require('./LoadImage')(this,i,json_q.images[i])
 
-    json_q.callback();
+    var ret = {
-    return {
       name: "ImageSequencer Wrapper",
       sequencer: this,
       addSteps: this.addSteps,
@@ -154,6 +153,8 @@ ImageSequencer = function ImageSequencer(options) {
       setUI: this.setUI,
       images: loadedimages
     };
+    json_q.callback.call(ret);
+    return ret;
   }
 
   function replaceImage(selector,steps,options) {

src/LoadImage.js

@@ -1,12 +1,36 @@
 function LoadImage(ref, name, src) {
-  function CImage(src) {
+  function makeImage(datauri) {
-    var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src);
     var image = {
       src: datauri,
       format: datauri.split(':')[1].split(';')[0].split('/')[1]
     }
     return image;
   }
+  function CImage(src, callback) {
+    var datauri;
+    if (src.substring(0,11) == "data:image/") {
+      datauri = src;
+      callback(datauri);
+    }
+    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);
+      }
+      image.src = src;
+    }
+    else {
+      datauri = require('urify')(src);
+      callback(datauri);
+    }
+  }
 
   function loadImage(name, src) {
     var image = {
@@ -34,13 +58,17 @@ function LoadImage(ref, name, src) {
           }
           return false;
         },
-        output: CImage(src)
       }]
     };
-    ref.images[name] = image;
+    CImage(src, function(datauri) {
-    ref.images[name].steps[0].UI.onSetup();
+      var output = makeImage(datauri);
-    ref.images[name].steps[0].UI.onDraw();
+      image.steps[0].output = output;
-    ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+      ref.images[name] = image;
+      ref.images[name].steps[0].UI.onSetup();
+      ref.images[name].steps[0].UI.onDraw();
+      ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
+      return true;
+    });
   }
 
   return loadImage(name,src);

src/modules/_nomodule/PixelManipulation.js

@@ -43,7 +43,7 @@ module.exports = function PixelManipulation(image, options) {
     // but node modules and their documentation are essentially arcane on this point
     var chunks = [];
     var totalLength = 0;
-    var r = savePixels(pixels, options.format);
+    var r = savePixels(pixels, options.format, {quality: 100});
 
     r.on('data', function(chunk){
       totalLength += chunk.length;

test.js

@@ -1,5 +0,0 @@
-require('./src/ImageSequencer');
-sequencer = ImageSequencer();
-sequencer.loadImages({images:{red:'examples/red.jpg'},callback:function(){
-  sequencer.addSteps(['do-nothing','invert']).run();
-}});

test/image-manip.js

@@ -8,11 +8,16 @@ var test = require('tape');
 require('../src/ImageSequencer.js');
 
 var sequencer = ImageSequencer({ ui: false });
-var image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
+var image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
 sequencer.loadImages(image);
 
 sequencer.addSteps(['do-nothing-pix','invert','invert']);
-sequencer.run();
+
+test("Preload", function(t) {
+  sequencer.run(function(){
+    t.end();
+  });
+});
 
 test("Inverted image isn't identical", function (t) {
   t.notEqual(sequencer.images.image1.steps[1].output.src, sequencer.images.image1.steps[2].output.src);