requirebin sketch

index.js

var jug = require('image-juggler');

var input = document.createElement('input');
input.type = 'file';
var output = document.createElement('canvas');
var outputCtx = output.getContext('2d');
var status = document.createElement('p');

document.body.appendChild(status);
document.body.appendChild(input);
document.body.appendChild(output);

input.addEventListener('change', function(e) {
  var file = e.target.files[0];

  if (!file) {
    throw new Error('No file or invalid file was selected');
  }

  jug.fileToImage(file, function(err, img) {
    document.body.appendChild(img);
    jug.imageToCanvas(img, output, function(err, cvs) {
      var imageData = outputCtx.getImageData(0, 0, output.width, output.height);

      var COLOR_COUNT = 255;
      var startEndColors = [
        65, 0, 245, 255,
        235, 30, 50, 255
      ]
      
      var palette = generateGradientPalette(COLOR_COUNT, startEndColors);
      console.log(palette);
      
      var data = imageData.data;
      for (var i = 0; i < data.length; i+= 4) {
        var r = data[i+0] / 255;
        var g = data[i+1] / 255;
        var b = data[i+2] / 255;
        var a = data[i+3] / 255;

        var idx = Math.floor(((r + g + b) / 3) * COLOR_COUNT-1);
        if (i === 0) console.log('rgba', r,g,b,a, 'idx', idx, 'palette', palette[idx+0], palette[idx+1], palette[idx+2])
        
        data[i+0] = palette[idx+0];
        data[i+1] = palette[idx+1];
        data[i+2] = palette[idx+2];
      }
      
      outputCtx.putImageData(imageData, 0, 0);
    });
  })
}, false)

function generateGradientPalette(count, startEnd) {
  var startR = startEnd[0];
  var startG = startEnd[1];
  var startB = startEnd[2];
  var startA = startEnd[3];
  var endR = startEnd[4];
  var endG = startEnd[5];
  var endB = startEnd[6];
  var endA = startEnd[7];
  var palette = [];
  palette.push(startR, startG, startB, startA);
  var interpCount = count - 2;
  for (var i = 0; i < interpCount; i++) {
    var d = i / interpCount;
    var r = Math.floor(startR * d + endR * (1-d));
    var g = Math.floor(startG * d + endG * (1-d));
    var b = Math.floor(startB * d + endB * (1-d));
    var a = Math.floor(startA * d + endA * (1-d));
    palette.push(r, g, b, a);
  }
  palette.push(endR, endG, endB, endA);
  return palette;
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"image-juggler":[function(require,module,exports){function imageToCanvas(image,opt_cvs,cb){if(!cb){cb=opt_cvs;opt_cvs=null}var cvs=opt_cvs||document.createElement("canvas");var ctx=cvs.getContext("2d");cvs.width=image.width;cvs.height=image.height;ctx.drawImage(image,0,0);cb(null,cvs)}function imageToArrayBuffer(image,cb){var reader=new FileReader;reader.onload=function(){cb(reader.error,reader.result)};imageToCanvas(image,function(err,cvs){cvs.toBlob(reader.readAsArrayBuffer.bind(reader))})}function fileToArrayBuffer(file,cb){var reader=new FileReader;reader.onload=function(){cb(reader.error,reader.result)};reader.readAsArrayBuffer(file)}function imageDataToImage(imageData,opt_image,cb){if(!cb){cb=opt_image;opt_image=null}var img=opt_image||document.createElement("img");var cvs=document.createElement("canvas");var ctx=cvs.getContext("2d");cvs.width=imageData.width;cvs.height=imageData.height;ctx.putImageData(imageData,0,0);canvasToImage(cvs,img,cb)}function fileToImage(file,opt_image,cb){if(!cb){cb=opt_image;opt_image=null}var img=opt_image||document.createElement("img");var url=URL.createObjectURL(file);img.onload=function(){URL.revokeObjectURL(url);cb(null,img)};img.src=url}function canvasToImage(canvas,opt_image,cb){if(!cb){cb=opt_image;opt_image=null}var url;var img=opt_image||document.createElement("img");img.onload=function(){URL.revokeObjectURL(url);cb(null,img)};canvas.toBlob(function(blob){url=URL.createObjectURL(blob);img.src=url})}function blobToImage(blob,opt_image,cb){if(!cb){cb=opt_image;opt_image=null}var img=opt_image||document.createElement("img");var url=URL.createObjectURL(blob);img.onload=function(){URL.revokeObjectURL(url);cb(null,img)};img.src=url}function pixelsToCanvas(pixels,opt_canvas,cb){if(!cb){cb=opt_canvas;opt_canvas=null}var cvs=opt_canvas||document.createElement("canvas");var width=pixels.width||cvs.width;var height=pixels.height||cvs.height;cvs.width=width;cvs.height=height;var ctx=cvs.getContext("2d");var imgdata=ctx.createImageData(width,height);for(var i=0;i<pixels.length;i++){imgdata.data[i]=pixels[i]}ctx.putImageData(imgdata,0,0);cb(null,cvs)}exports.imageToCanvas=imageToCanvas;exports.imageToArrayBuffer=imageToArrayBuffer;exports.imageDataToImage=imageDataToImage;exports.fileToArrayBuffer=fileToArrayBuffer;exports.fileToImage=fileToImage;exports.canvasToImage=canvasToImage;exports.blobToImage=blobToImage},{}]},{},[]);var jug=require("image-juggler");var input=document.createElement("input");input.type="file";var output=document.createElement("canvas");var outputCtx=output.getContext("2d");var status=document.createElement("p");document.body.appendChild(status);document.body.appendChild(input);document.body.appendChild(output);input.addEventListener("change",function(e){var file=e.target.files[0];if(!file){throw new Error("No file or invalid file was selected")}jug.fileToImage(file,function(err,img){document.body.appendChild(img);jug.imageToCanvas(img,output,function(err,cvs){var imageData=outputCtx.getImageData(0,0,output.width,output.height);var COLOR_COUNT=255;var startEndColors=[65,0,245,255,235,30,50,255];var palette=generateGradientPalette(COLOR_COUNT,startEndColors);console.log(palette);var data=imageData.data;for(var i=0;i<data.length;i+=4){var r=data[i+0]/255;var g=data[i+1]/255;var b=data[i+2]/255;var a=data[i+3]/255;var idx=Math.floor((r+g+b)/3*COLOR_COUNT-1);if(i===0)console.log("rgba",r,g,b,a,"idx",idx,"palette",palette[idx+0],palette[idx+1],palette[idx+2]);data[i+0]=palette[idx+0];data[i+1]=palette[idx+1];data[i+2]=palette[idx+2]}outputCtx.putImageData(imageData,0,0)})})},false);function generateGradientPalette(count,startEnd){var startR=startEnd[0];var startG=startEnd[1];var startB=startEnd[2];var startA=startEnd[3];var endR=startEnd[4];var endG=startEnd[5];var endB=startEnd[6];var endA=startEnd[7];var palette=[];palette.push(startR,startG,startB,startA);var interpCount=count-2;for(var i=0;i<interpCount;i++){var d=i/interpCount;var r=Math.floor(startR*d+endR*(1-d));var g=Math.floor(startG*d+endG*(1-d));var b=Math.floor(startB*d+endB*(1-d));var a=Math.floor(startA*d+endA*(1-d));palette.push(r,g,b,a)}palette.push(endR,endG,endB,endA);return palette}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "image-juggler": "1.0.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin