replaceImage

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
 

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,"./ReplaceImage":120,"./Run":121,"jquery":44}],117:[function(require,module,exports){
-},{"./AddStep":114,"./FormatInput":115,"./InsertStep":117,"./LoadImage":118,"./Modules":119,"./Run":120,"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;

replace-demo.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <title>Replace Image Demo | Image Sequencer</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="content-type" content="text/html; charset=UTF8">
+
+    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <link href="dist/image-sequencer.css" rel="stylesheet">
+
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="dist/image-sequencer.js"></script>
+
+  </head>
+
+  <body>
+
+    <div class="header">
+
+      <h1>Image Sequencer</h1>
+      <h3>
+        <a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
+      </h3>
+
+    </div>
+
+    <p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
+
+    <div class="panels">
+
+      <div class="panel ismod-image-select" style="display:flex;justify-content:center">
+        <img src="examples/replace.jpg" id="pencils" style="cursor:pointer">
+      </div>
+
+    </div>
+
+    <div class="mod-new-panel" style="display:flex;justify-content:center">
+      <p class="lead" style="text-align:center">
+        Click on the image above to invert it.<br>
+        (This may take a few seconds)<br>
+        Syntax:</p>
+    </div>
+
+    <div class="log">
+      <h4>var sequencer = new ImageSequencer();</h4><br>
+      <h4>sequencer.replaceImage('#pencils','invert');</h4>
+    </div>
+
+    <script>
+
+      var sequencer = ImageSequencer();
+      document.querySelector('#pencils').onclick = function() {
+        sequencer.replaceImage('#pencils','invert');
+      }
+
+    </script>
+
+  </body>
+</html>

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,

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;

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;