From 4451e04b68ecc33faf5419945fcc7643f352181b Mon Sep 17 00:00:00 2001 From: Chinmay Pandhare Date: Sat, 8 Jul 2017 02:33:19 +0530 Subject: [PATCH] replaceImage --- README.md | 16 +++++++- dist/image-sequencer.js | 63 +++++++++++++++++++++++++------ examples/replace.jpg | Bin 0 -> 9128 bytes replace-demo.html | 63 +++++++++++++++++++++++++++++++ src/ImageSequencer.js | 6 ++- src/ReplaceImage.js | 35 +++++++++++++++++ src/modules/PixelManipulation.js | 2 +- 7 files changed, 170 insertions(+), 15 deletions(-) create mode 100644 examples/replace.jpg create mode 100644 replace-demo.html create mode 100644 src/ReplaceImage.js diff --git a/README.md b/README.md index 97d3a963..faab3003 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,21 @@ It is also for prototyping some other related ideas: * [Basic example](https://jywarren.github.io/image-sequencer/) * [NDVI example](https://jywarren.github.io/image-sequencer/examples/ndvi/) - related to [Infragram.org](http://infragram.org) -## Usage +## Quick Usage + +Image Sequencer can be used to run modules on an HTML Image Element using the +`replaceImage` method. The method accepts two parameters - `selector` and `steps`. +`selector` is a CSS selector. If it matches multiple images, all images will be +modified. `steps` may be the name of a module or array of names of modules. + +Note: Local images will work only if they are in the same directory or a subdirectory. + +```js + sequencer.replaceImage(selector,steps); +``` + + +## Classic Usage ### Initializing the Sequencer diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js index b3f2b5a1..52242f81 100644 --- a/dist/image-sequencer.js +++ b/dist/image-sequencer.js @@ -34751,9 +34751,8 @@ function formatInput(args,format,images) { module.exports = formatInput; },{}],116:[function(require,module,exports){ -(function (global){ if (typeof window !== 'undefined') {window.$ = window.jQuery = require('jquery'); isBrowser = true} -else {window = global; var isBrowser = false} +else {var isBrowser = false} ImageSequencer = function ImageSequencer(options) { @@ -34885,6 +34884,10 @@ ImageSequencer = function ImageSequencer(options) { return this; } + function replaceImage(selector,steps) { + require('./ReplaceImage')(this,selector,steps); + } + return { options: options, loadImages: loadImages, @@ -34905,8 +34908,7 @@ ImageSequencer = function ImageSequencer(options) { } module.exports = ImageSequencer; -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./AddStep":114,"./FormatInput":115,"./InsertStep":117,"./LoadImage":118,"./Modules":119,"./Run":120,"jquery":44}],117:[function(require,module,exports){ +},{"./AddStep":114,"./FormatInput":115,"./InsertStep":117,"./LoadImage":118,"./Modules":119,"./ReplaceImage":120,"./Run":121,"jquery":44}],117:[function(require,module,exports){ function InsertStep(ref, image, index, name, o) { function insertStep(image, index, name, o) { @@ -34998,7 +35000,44 @@ module.exports = { 'invert': require('./modules/Invert') } -},{"./modules/DoNothing":121,"./modules/DoNothingPix":122,"./modules/GreenChannel":123,"./modules/Invert":124,"./modules/NdviRed":125}],120:[function(require,module,exports){ +},{"./modules/DoNothing":122,"./modules/DoNothingPix":123,"./modules/GreenChannel":124,"./modules/Invert":125,"./modules/NdviRed":126}],120:[function(require,module,exports){ +function ReplaceImage(ref,selector,steps) { + if(!ref.options.inBrowser) return; // This isn't for Node.js + this_ = ref; + var input = document.querySelectorAll(selector); + var images = []; + for (i = 0; i < input.length; i++) + if (input[i] instanceof HTMLImageElement) images.push(input[i]); + for (i in images) { + the_image = images[i]; + var url = images[i].src; + var ext = url.split('.').pop(); + + var xmlHTTP = new XMLHttpRequest(); + xmlHTTP.open('GET', url, true); + xmlHTTP.responseType = 'arraybuffer'; + xmlHTTP.onload = function(e) { + var arr = new Uint8Array(this.response); + var raw = String.fromCharCode.apply(null,arr); + var base64 = btoa(raw); + var dataURL="data:image/"+ext+";base64," + base64; + make(dataURL); + }; + + if(url.substr(0,11).toLowerCase()!="data:image/") xmlHTTP.send(); + else make(url); + + function make(url) { + this_.loadImage(url).addSteps('default',steps).run(function(out){ + the_image.src = out; + }); + } + } +} + +module.exports = ReplaceImage; + +},{}],121:[function(require,module,exports){ function Run(ref, json_q, callback) { function drawStep(drawarray,pos) { if(pos==drawarray.length) { @@ -35047,7 +35086,7 @@ function Run(ref, json_q, callback) { } module.exports = Run; -},{}],121:[function(require,module,exports){ +},{}],122:[function(require,module,exports){ /* * Demo Module. Does nothing. */ @@ -35069,7 +35108,7 @@ module.exports = function DoNothing(options) { } } -},{}],122:[function(require,module,exports){ +},{}],123:[function(require,module,exports){ /* * Display only the green channel */ @@ -35107,7 +35146,7 @@ module.exports = function GreenChannel(options) { } } -},{"./PixelManipulation.js":126}],123:[function(require,module,exports){ +},{"./PixelManipulation.js":127}],124:[function(require,module,exports){ /* * Display only the green channel */ @@ -35145,7 +35184,7 @@ module.exports = function GreenChannel(options) { } } -},{"./PixelManipulation.js":126}],124:[function(require,module,exports){ +},{"./PixelManipulation.js":127}],125:[function(require,module,exports){ /* * Display only the green channel */ @@ -35183,7 +35222,7 @@ module.exports = function GreenChannel(options) { } } -},{"./PixelManipulation.js":126}],125:[function(require,module,exports){ +},{"./PixelManipulation.js":127}],126:[function(require,module,exports){ /* * NDVI with red filter (blue channel is infrared) */ @@ -35220,7 +35259,7 @@ module.exports = function NdviRed(options) { } } -},{"./PixelManipulation.js":126}],126:[function(require,module,exports){ +},{"./PixelManipulation.js":127}],127:[function(require,module,exports){ /* * General purpose per-pixel manipulation * accepting a changePixel() method to remix a pixel's channels @@ -35268,7 +35307,7 @@ module.exports = function PixelManipulation(image, options) { // there may be a more efficient means to encode an image object, // but node modules and their documentation are essentially arcane on this point w = base64.encode(); - var r = savePixels(pixels, options.format); + var r = savePixels(pixels, options.format, {quality: 100}); r.pipe(w).on('finish',function(){ data = w.read().toString(); datauri = 'data:image/' + options.format + ';base64,' + data; diff --git a/examples/replace.jpg b/examples/replace.jpg new file mode 100644 index 0000000000000000000000000000000000000000..be4edba8fa5a5d49711d6c9e56b2110517ffda0e GIT binary patch literal 9128 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

)| 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 + + + + Replace Image Demo | Image Sequencer + + + + + + + + + + + + + + + + +

+ +

Image Sequencer

+

+ +

+ +
+ + + +
+ +
+ +
+ +
+ +
+

+ Click on the image above to invert it.
+ (This may take a few seconds)
+ Syntax:

+
+ +
+

var sequencer = new ImageSequencer();


+

sequencer.replaceImage('#pencils','invert');

+
+ + + + + diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js index 54c3c1cb..702053d4 100644 --- a/src/ImageSequencer.js +++ b/src/ImageSequencer.js @@ -1,5 +1,5 @@ if (typeof window !== 'undefined') {window.$ = window.jQuery = require('jquery'); isBrowser = true} -else {window = global; var isBrowser = false} +else {var isBrowser = false} ImageSequencer = function ImageSequencer(options) { @@ -131,6 +131,10 @@ ImageSequencer = function ImageSequencer(options) { return this; } + function replaceImage(selector,steps) { + require('./ReplaceImage')(this,selector,steps); + } + return { options: options, loadImages: loadImages, diff --git a/src/ReplaceImage.js b/src/ReplaceImage.js new file mode 100644 index 00000000..0f9387db --- /dev/null +++ b/src/ReplaceImage.js @@ -0,0 +1,35 @@ +function ReplaceImage(ref,selector,steps) { + if(!ref.options.inBrowser) return; // This isn't for Node.js + this_ = ref; + var input = document.querySelectorAll(selector); + var images = []; + for (i = 0; i < input.length; i++) + if (input[i] instanceof HTMLImageElement) images.push(input[i]); + for (i in images) { + the_image = images[i]; + var url = images[i].src; + var ext = url.split('.').pop(); + + var xmlHTTP = new XMLHttpRequest(); + xmlHTTP.open('GET', url, true); + xmlHTTP.responseType = 'arraybuffer'; + xmlHTTP.onload = function(e) { + var arr = new Uint8Array(this.response); + var raw = String.fromCharCode.apply(null,arr); + var base64 = btoa(raw); + var dataURL="data:image/"+ext+";base64," + base64; + make(dataURL); + }; + + if(url.substr(0,11).toLowerCase()!="data:image/") xmlHTTP.send(); + else make(url); + + function make(url) { + this_.loadImage(url).addSteps('default',steps).run(function(out){ + the_image.src = out; + }); + } + } +} + +module.exports = ReplaceImage; diff --git a/src/modules/PixelManipulation.js b/src/modules/PixelManipulation.js index 335cddca..29d7be90 100644 --- a/src/modules/PixelManipulation.js +++ b/src/modules/PixelManipulation.js @@ -45,7 +45,7 @@ module.exports = function PixelManipulation(image, options) { // there may be a more efficient means to encode an image object, // but node modules and their documentation are essentially arcane on this point w = base64.encode(); - var r = savePixels(pixels, options.format); + var r = savePixels(pixels, options.format, {quality: 100}); r.pipe(w).on('finish',function(){ data = w.read().toString(); datauri = 'data:image/' + options.format + ';base64,' + data;