diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index 30675115..41b4f0f7 100644 --- a/dist/image-sequencer.js +++ b/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(); - return { + var ret = { 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) { - var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src); + function makeImage(datauri) { 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; - 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); + CImage(src, function(datauri) { + var output = makeImage(datauri); + image.steps[0].output = output; + 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); diff --git a/examples/red.png b/examples/red.png new file mode 100644 index 00000000..239e2c5a Binary files /dev/null and b/examples/red.png differ diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index de1e6e10..f4d4e40e 100644 --- a/src/ImageSequencer.js +++ b/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(); - return { + var ret = { 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) { diff --git a/src/LoadImage.js b/src/LoadImage.js index d7453b0d..ac1c67a4 100644 --- a/src/LoadImage.js +++ b/src/LoadImage.js @@ -1,12 +1,36 @@ function LoadImage(ref, name, src) { - function CImage(src) { - var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src); + function makeImage(datauri) { 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; - 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); + CImage(src, function(datauri) { + var output = makeImage(datauri); + image.steps[0].output = output; + 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); diff --git a/src/modules/_nomodule/PixelManipulation.js b/src/modules/_nomodule/PixelManipulation.js index efb25863..f403b346 100644 --- a/src/modules/_nomodule/PixelManipulation.js +++ b/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; diff --git a/test.js b/test.js deleted file mode 100644 index 8fcbae71..00000000 --- a/test.js +++ /dev/null @@ -1,5 +0,0 @@ -require('./src/ImageSequencer'); -sequencer = ImageSequencer(); -sequencer.loadImages({images:{red:'examples/red.jpg'},callback:function(){ - sequencer.addSteps(['do-nothing','invert']).run(); -}}); diff --git a/test/image-manip.js b/test/image-manip.js index f54d3527..dd1bc8cf 100644 --- a/test/image-manip.js +++ b/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);