From d90c61f85d9578c48f421363791e50db39c57c62 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Wed, 26 Jul 2017 23:16:32 +0530 Subject: [PATCH 1/7] Support External Images via Canvas --- dist/image-sequencer.js | 47 +++++++++++++++++---- examples/red.png | Bin 0 -> 277 bytes src/ImageSequencer.js | 5 ++- src/LoadImage.js | 42 +++++++++++++++--- src/modules/_nomodule/PixelManipulation.js | 2 +- test.js | 5 --- test/image-manip.js | 9 +++- 7 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 examples/red.png delete mode 100644 test.js 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 0000000000000000000000000000000000000000..239e2c5a419f9df792d06c2f291e0e9a2abd1b5b GIT binary patch literal 277 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;OS+@4BLl<6e(pbstU$g(vPY0F z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a>Y#{W#Z_kbMs5>H=O_J?e;LZVE+p1p7e3h{WlIEHXsPfk$a1@a6S7>}=N z?E|t@OI#yLQW8s2t&)pUffR$0fuXssftjw6Wr(4Lm64&9fswX>k(GhLG5)iMQ8eV{ ar(~v8;?}S|sI(rafx*+&&t;ucLK6T`YDN|S literal 0 HcmV?d00001 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); From 7f17f825aba7f40052eaadf66d7ce30939dc570e Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:00:30 +0530 Subject: [PATCH 2/7] LoadImages will return nothing, only call a callback --- dist/image-sequencer.js | 25 ++++++++++++----- src/ImageSequencer.js | 20 ++++++++++---- src/LoadImage.js | 3 ++- test/chain.js | 59 ++++++++++++++++++++++++----------------- test/image-manip.js | 19 +++++++------ test/image-sequencer.js | 2 +- 6 files changed, 83 insertions(+), 45 deletions(-) diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index 41b4f0f7..6e3e23b4 100644 --- a/dist/image-sequencer.js +++ b/dist/image-sequencer.js @@ -34708,14 +34708,13 @@ ImageSequencer = function ImageSequencer(options) { function loadImages() { var args = []; + var sequencer = this; for (var arg in arguments) args.push(copy(arguments[arg])); var json_q = formatInput.call(this,args,"l"); inputlog.push({method:"loadImages", json_q:copy(json_q)}); var loadedimages = this.copy(json_q.loadedimages); - - for (var i in json_q.images) - require('./LoadImage')(this,i,json_q.images[i]) +// require('./LoadImage')(this,i,json_q.images[i]); var ret = { name: "ImageSequencer Wrapper", @@ -34728,7 +34727,20 @@ ImageSequencer = function ImageSequencer(options) { setUI: this.setUI, images: loadedimages }; - json_q.callback.call(ret); + + function load(i) { + if(i==loadedimages.length) { + json_q.callback.call(ret); + return; + } + var img = loadedimages[i]; + require('./LoadImage')(sequencer,img,json_q.images[img],function(){ + load(++i); + }); + } + + load(0); + return ret; } @@ -34799,7 +34811,7 @@ function InsertStep(ref, image, index, name, o) { module.exports = InsertStep; },{}],115:[function(require,module,exports){ -function LoadImage(ref, name, src) { +function LoadImage(ref, name, src, main_callback) { function makeImage(datauri) { var image = { src: datauri, @@ -34868,6 +34880,7 @@ function LoadImage(ref, name, src) { 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); + main_callback(); return true; }); } @@ -35481,7 +35494,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/src/ImageSequencer.js b/src/ImageSequencer.js index f4d4e40e..2c25499f 100644 --- a/src/ImageSequencer.js +++ b/src/ImageSequencer.js @@ -133,14 +133,13 @@ ImageSequencer = function ImageSequencer(options) { function loadImages() { var args = []; + var sequencer = this; for (var arg in arguments) args.push(copy(arguments[arg])); var json_q = formatInput.call(this,args,"l"); inputlog.push({method:"loadImages", json_q:copy(json_q)}); var loadedimages = this.copy(json_q.loadedimages); - - for (var i in json_q.images) - require('./LoadImage')(this,i,json_q.images[i]) +// require('./LoadImage')(this,i,json_q.images[i]); var ret = { name: "ImageSequencer Wrapper", @@ -153,8 +152,19 @@ ImageSequencer = function ImageSequencer(options) { setUI: this.setUI, images: loadedimages }; - json_q.callback.call(ret); - return ret; + + function load(i) { + if(i==loadedimages.length) { + json_q.callback.call(ret); + return; + } + var img = loadedimages[i]; + require('./LoadImage')(sequencer,img,json_q.images[img],function(){ + load(++i); + }); + } + + load(0); } function replaceImage(selector,steps,options) { diff --git a/src/LoadImage.js b/src/LoadImage.js index ac1c67a4..a1e24f3e 100644 --- a/src/LoadImage.js +++ b/src/LoadImage.js @@ -1,4 +1,4 @@ -function LoadImage(ref, name, src) { +function LoadImage(ref, name, src, main_callback) { function makeImage(datauri) { var image = { src: datauri, @@ -67,6 +67,7 @@ function LoadImage(ref, name, src) { 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); + main_callback(); return true; }); } diff --git a/test/chain.js b/test/chain.js index 6a77fca3..49916582 100644 --- a/test/chain.js +++ b/test/chain.js @@ -17,22 +17,27 @@ test('loadImages/loadImage has a name generator.', function (t){ t.end(); }); -test('loadImages/loadImage returns a wrapper.', function (t){ - var returnval = sequencer.loadImage(red); - t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); - t.equal(returnval.images[0],"image2","Image scope is defined"); - t.end(); +test('loadImages/loadImage returns a wrapper in the callback.', function (t){ + sequencer.loadImage(red, function() { + var returnval = this; + t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); + t.equal(returnval.images[0],"image2","Image scope is defined"); + t.end(); + }); }); test('addSteps is two-way chainable.', function (t){ - var returnval = sequencer.loadImage(red).addSteps('invert'); - t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); - t.equal(returnval.images[0],"image3","Image scope is defined"); - t.equal(sequencer.images.image3.steps.length,2,"Loaded image is affected"); - t.equal(sequencer.images.image3.steps[1].options.name,"invert","Correct Step Added"); - t.equal(sequencer.images.image2.steps.length,1,"Other images are not affected"); - t.equal(sequencer.images.image1.steps.length,1,"Other images are not affected"); - t.end(); + sequencer.loadImage(red, function(){ + var returnval = this; + this.addSteps('invert'); + t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); + t.equal(returnval.images[0],"image3","Image scope is defined"); + t.equal(sequencer.images.image3.steps.length,2,"Loaded image is affected"); + t.equal(sequencer.images.image3.steps[1].options.name,"invert","Correct Step Added"); + t.equal(sequencer.images.image2.steps.length,1,"Other images are not affected"); + t.equal(sequencer.images.image1.steps.length,1,"Other images are not affected"); + t.end(); + }); }); test('addSteps is two-way chainable without loadImages.', function (t){ @@ -44,11 +49,14 @@ test('addSteps is two-way chainable without loadImages.', function (t){ }); test('removeSteps is two-way chainable.', function (t){ - var returnval = sequencer.loadImage(red).addSteps('invert').removeSteps(1); - t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); - t.equal(returnval.images[0],"image4","Image scope is defined"); - t.equal(sequencer.images.image4.steps.length,1); - t.end(); + sequencer.loadImage(red,function(){ + var returnval = this; + this.addSteps('invert').removeSteps(1); + t.equal(returnval.name,"ImageSequencer Wrapper", "Wrapper is returned"); + t.equal(returnval.images[0],"image4","Image scope is defined"); + t.equal(sequencer.images.image4.steps.length,1); + t.end(); + }); }); test('removeSteps is two-way chainable without loadImages.', function (t){ @@ -59,12 +67,15 @@ test('removeSteps is two-way chainable without loadImages.', function (t){ }); test('insertSteps is two-way chainable.', function (t){ - var returnval = sequencer.loadImage(red).insertSteps(1,'invert'); - t.equal(returnval.name,"ImageSequencer Wrapper","Wrapper is returned"); - t.equal(returnval.images[0],"image5","Image scope is defined"); - t.equal(sequencer.images.image5.steps.length,2); - t.equal(sequencer.images.image5.steps[1].options.name,"invert","Correct Step Inserrted"); - t.end(); + sequencer.loadImage(red,function() { + var returnval = this; + this.insertSteps(1,'invert'); + t.equal(returnval.name,"ImageSequencer Wrapper","Wrapper is returned"); + t.equal(returnval.images[0],"image5","Image scope is defined"); + t.equal(sequencer.images.image5.steps.length,2); + t.equal(sequencer.images.image5.steps[1].options.name,"invert","Correct Step Inserrted"); + t.end(); + }); }); test('insertSteps is two-way chainable without loadImages.', function (t){ diff --git a/test/image-manip.js b/test/image-manip.js index 20da143c..14d4a292 100644 --- a/test/image-manip.js +++ b/test/image-manip.js @@ -10,11 +10,10 @@ require('../src/ImageSequencer.js'); //require image files as DataURLs so they can be tested alike on browser and Node. var sequencer = ImageSequencer({ ui: false }); -var image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z"; var test_png = require('../examples/test.png.js'); var test_gif = require('../examples/test.gif.js'); -sequencer.loadImages(image); +sequencer.loadImages(test_png); sequencer.addSteps(['do-nothing-pix','invert','invert']); test("Preload", function(t) { @@ -34,15 +33,19 @@ test("Twice inverted image is identical to original image", function (t) { }); test("PixelManipulation works for PNG images", function (t) { - sequencer.loadImages(test_png).addSteps('invert').run(function(out){ - t.equal(1,1) - t.end(); + sequencer.loadImages(test_png,function(){ + this.addSteps('invert').run(function(out){ + t.equal(1,1) + t.end(); + }); }); }); test("PixelManipulation works for GIF images", function (t) { - sequencer.loadImages(test_gif).addSteps('invert').run(function(out){ - t.equal(1,1) - t.end(); + sequencer.loadImages(test_gif,function(){ + this.addSteps('invert').run(function(out){ + t.equal(1,1) + t.end(); + }); }); }); diff --git a/test/image-sequencer.js b/test/image-sequencer.js index 3c52423b..892db5c3 100644 --- a/test/image-sequencer.js +++ b/test/image-sequencer.js @@ -42,7 +42,7 @@ test('loadImages loads a DataURL image and creates a step.', function (t){ test('loadImages loads a PATH image and creates a step. (NodeJS)', function (t){ if(sequencer.options.inBrowser){ - t.equal("not applicable","not applicable","Not applicable for Browser"); + t.equal(1,1,"Not applicable for Browser"); t.end(); } else { From b1c9949757bf5de7bafa421935dd91a244605996 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:07:39 +0530 Subject: [PATCH 3/7] Updated README --- README.md | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 40de5474..9d17a608 100644 --- a/README.md +++ b/README.md @@ -84,8 +84,18 @@ CORS Restrictions). To sum up, these are accepted: * CORS-Proof images in another domain. * DataURLs -return value: **`sequencer`** (To allow method chaining) +return value: **none** (A callback should be used to ensure the image gets loaded) +The callback is called within the scope of a the sequencer. For example: +(addSteps is defined later) +```js +sequencer.loadImage('SRC',function(){ + this.addSteps('module-name'); +}); +``` + +The `this` refers to all the images added in the parent `loadImages` function only. +In this case, only `'SRC'`. ### Adding steps to the image @@ -169,6 +179,7 @@ return value: **`sequencer`** (To allow method chaining) ## Method Chaining Methods can be chained on the Image Sequencer: +* loadImage()/loadImages() can only terminate a chain. * run() can not be in the middle of the chain. * If the chain starts with loadImage() or loadImages(), the following methods are applied only to the newly loaded images. @@ -177,9 +188,11 @@ be of the form "image". For ex: "image1", "image2", "image3", etc. Valid Chains: ```js -sequencer.loadImage('red').addSteps('invert').run(function(out){ - //do something with otuput. -}); +sequencer.loadImage('red',function(){ + this.addSteps('invert').run(function(out){ + //do something with ouptut. + }); +}) sequencer.addSteps(['ndvi-red','invert']).run(); et cetra. ``` @@ -222,7 +235,7 @@ with each image. This is a string literal. }); ``` -return value: **`sequencer`** (To allow method chaining) +return value: **none** ### Adding Steps on Multiple Images From b59383ce5346bc72f56ceb43861b2b5c759d0b90 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:32:04 +0530 Subject: [PATCH 4/7] Added URL support for Node.js client --- src/LoadImage.js | 13 ++++++++++++- test/image-sequencer.js | 13 ++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/LoadImage.js b/src/LoadImage.js index a1e24f3e..8a71a5b6 100644 --- a/src/LoadImage.js +++ b/src/LoadImage.js @@ -8,10 +8,21 @@ function LoadImage(ref, name, src, main_callback) { } function CImage(src, callback) { var datauri; - if (src.substring(0,11) == "data:image/") { + if (!!src.match(/^data:/i)) { datauri = src; callback(datauri); } + 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); + }); + }); + } else if (ref.options.inBrowser) { var ext = src.split('.').pop(); var image = document.createElement('img'); diff --git a/test/image-sequencer.js b/test/image-sequencer.js index 892db5c3..4e816905 100644 --- a/test/image-sequencer.js +++ b/test/image-sequencer.js @@ -40,18 +40,13 @@ test('loadImages loads a DataURL image and creates a step.', function (t){ t.end(); }); -test('loadImages loads a PATH image and creates a step. (NodeJS)', function (t){ - if(sequencer.options.inBrowser){ - t.equal(1,1,"Not applicable for Browser"); - t.end(); - } - else { - sequencer.loadImages(red); +if(!sequencer.options.inBrowser) + test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t){ + sequencer.loadImages('examples/red.jpg'); t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created"); t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists"); t.end(); - } -}); + }); test('loadImage works too.', function (t){ sequencer.loadImage('test2',red); From 467fe1d2e57e37d559b30ba0b63841964cb7ae4e Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:32:29 +0530 Subject: [PATCH 5/7] Added Unit Test for URL Support --- test/image-sequencer.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/test/image-sequencer.js b/test/image-sequencer.js index 4e816905..651e5af3 100644 --- a/test/image-sequencer.js +++ b/test/image-sequencer.js @@ -40,6 +40,15 @@ test('loadImages loads a DataURL image and creates a step.', function (t){ t.end(); }); +if(!sequencer.options.inBrowser) + test('loadImage loads an image from URL and creates a step. (NodeJS)', function (t){ + sequencer.loadImage('URL','https://ccpandhare.github.io/image-sequencer/examples/red.jpg', function(){ + t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created"); + t.equal(typeof(sequencer.images.URL.steps[0].output.src), "string", "Initial output exists"); + t.end(); + }); + }); + if(!sequencer.options.inBrowser) test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t){ sequencer.loadImages('examples/red.jpg'); From 6e136e6c2f1d11ef7af408a338d9d928f62744e9 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:33:23 +0530 Subject: [PATCH 6/7] Updated README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d17a608..2465ac97 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ a name and an image. The method also accepts an optional callback. ```js sequencer.loadImage(image_src,optional_callback); ``` -On `Node.js` the `image_src` may be a DataURI or a local path. +On `Node.js` the `image_src` may be a DataURI or a local path or a URL. On browsers, it may be a DatURI, a local image or a URL (Unless this violates CORS Restrictions). To sum up, these are accepted: From 53a8963b72baa1b9bd56747832752f20e68c1ec4 Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Fri, 28 Jul 2017 12:37:57 +0530 Subject: [PATCH 7/7] Build Commit --- dist/image-sequencer.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index 6e3e23b4..e826da11 100644 --- a/dist/image-sequencer.js +++ b/dist/image-sequencer.js @@ -34740,8 +34740,6 @@ ImageSequencer = function ImageSequencer(options) { } load(0); - - return ret; } function replaceImage(selector,steps,options) { @@ -34821,10 +34819,21 @@ function LoadImage(ref, name, src, main_callback) { } function CImage(src, callback) { var datauri; - if (src.substring(0,11) == "data:image/") { + if (!!src.match(/^data:/i)) { datauri = src; callback(datauri); } + 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); + }); + }); + } else if (ref.options.inBrowser) { var ext = src.split('.').pop(); var image = document.createElement('img');