SimpleImage.js

// Copyright 2015 Owen Astrachan, Drew Hilton, Susan Rodger, Robert Duvall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// Created by Nick Parlante
// Updated by Robert Duvall


// Represents one pixel in a SimpleImage, supports rgb get/set.
SimplePixel = function (simple_image, x, y) {
  __SimpleImageUtilities.funCheck('SimplePixel', 3, arguments.length);
  this.container = simple_image;
  this.x = x;
  this.y = y;
};

SimplePixel.prototype = {
  constructor: SimplePixel,
  getX: function () {
    __SimpleImageUtilities.funCheck('getX', 0, arguments.length);
    return this.x;
  },
  getY: function () {
    __SimpleImageUtilities.funCheck('getY', 0, arguments.length);
    return this.y;
  },
  getRed: function () {
    __SimpleImageUtilities.funCheck('getRed', 0, arguments.length);
    return this.container.getRed(this.x, this.y);
  },
  getGreen: function () {
    __SimpleImageUtilities.funCheck('getGreen', 0, arguments.length);
    return this.container.getGreen(this.x, this.y);
  },
  getBlue: function () {
    __SimpleImageUtilities.funCheck('getBlue', 0, arguments.length);
    return this.container.getBlue(this.x, this.y);
  },
  getAlpha: function () {
    __SimpleImageUtilities.funCheck('getAlpha', 0, arguments.length);
    return this.container.getAlpha(this.x, this.y);
  },
  setRed: function (val) {
    __SimpleImageUtilities.funCheck('setRed', 1, arguments.length);
    this.container.setRed(this.x, this.y, val);
  },
  setGreen: function (val) {
    __SimpleImageUtilities.funCheck('setGreen', 1, arguments.length);
    this.container.setGreen(this.x, this.y, val);
  },
  setBlue: function (val) {
    __SimpleImageUtilities.funCheck('setBlue', 1, arguments.length);
    this.container.setBlue(this.x, this.y, val);
  },
  setAlpha: function (val) {
    __SimpleImageUtilities.funCheck('setAlpha', 1, arguments.length);
    this.container.setAlpha(this.x, this.y, val);
  },
  setAllFrom: function (pixel) {
    __SimpleImageUtilities.funCheck('setAllFrom', 1, arguments.length);
    this.setRed(pixel.getRed());
    this.setGreen(pixel.getGreen());
    this.setBlue(pixel.getBlue());
    this.setAlpha(pixel.getAlpha());
  },
  toString: function () {
    return 'r:' + this.getRed() + ' g:' + this.getGreen() + ' b:' + this.getBlue();
  },
  // Render pixel as string
  getString: function () {
    return this.toString();
  }
};


// Note there is an Image built in, so don't use that name.
// A SimpleImage can be created with a url, size, or an existing htmlImage or canvas
SimpleImage = function () {
  if (arguments.length < 0 || arguments.length > 2) {
    __SimpleImageUtilities.funCheck('SimpleImage', 1, arguments.length);
    return null;
  }
  // function map for to support "overloaded constructor"
  var funMap = [
    function () {
      return __SimpleImageUtilities.EMPTY_IMAGE;
    },
    function (source) {
      if (source instanceof HTMLImageElement) {
        return source;
      } else if (typeof source == 'string') {
        return __SimpleImageUtilities.makeHTMLImageFromURL(source, this);
      } else if (source instanceof HTMLInputElement && source.type == 'file') {
        return __SimpleImageUtilities.makeHTMLImageFromInput(source.files[0], this);
      } else if (source instanceof SimpleImage) {
        return source.canvas;
      } else if (source instanceof HTMLCanvasElement) {
        return source;
      } else {
        __SimpleImageUtilities.throwError('Unrecognized value used to create a SimpleImage: ' + source);
      }
    },
    function (width, height) {
      if (width > 0 && height > 0) {
        return __SimpleImageUtilities.makeHTMLImageFromSize(width, height);
      } else {
        __SimpleImageUtilities.throwError('Unable to create a SimpleImage with a negative width or height [' + width + 'x' + height + ']');
      }
    }
  ];

  // call appropriate constructor
  var htmlImage = funMap[arguments.length].apply(this, arguments);
  // actual content is backed by an invisible canvas
  this.canvas = __SimpleImageUtilities.makeHTMLCanvas('SimpleImageCanvas');
  this.canvas.style.display = 'none';
  this.context = this.canvas.getContext('2d');
  // when image is loaded, it will fill this in
  this.imageData = null;
  // check to see if we can complete the constructor now instead of waiting
  if (htmlImage != null && (htmlImage instanceof HTMLCanvasElement || htmlImage.complete)) {
    this.__init(htmlImage);
  }
  this.ACCEPTED_FILES = 'image.*';
}


SimpleImage.prototype = {
  constructor: SimpleImage,
  complete: function () {
    return this.imageData != null;
  },
  getWidth: function () {
    __SimpleImageUtilities.funCheck('getWidth', 0, arguments.length);
    return this.width;
  },
  getHeight: function () {
    __SimpleImageUtilities.funCheck('getHeight', 0, arguments.length);
    return this.height;
  },
  getRed: function (x, y) {
    __SimpleImageUtilities.funCheck('getRed', 2, arguments.length);
    return this.imageData.data[this.__getIndex('getRed', x, y)];
  },
  getGreen: function (x, y) {
    __SimpleImageUtilities.funCheck('getGreen', 2, arguments.length);
    return this.imageData.data[this.__getIndex('getGreen', x, y) + 1];
  },
  getBlue: function (x, y) {
    __SimpleImageUtilities.funCheck('getBlue', 2, arguments.length);
    return this.imageData.data[this.__getIndex('getBlue', x, y) + 2];
  },
  getAlpha: function (x, y) {
    __SimpleImageUtilities.funCheck('getAlpha', 2, arguments.length);
    return this.imageData.data[this.__getIndex('getAlpha', x, y) + 3];
  },
  // Changes to the pixel write back to the image.
  getPixel: function (x, y) {
    __SimpleImageUtilities.funCheck('getPixel', 2, arguments.length);
    __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), 'getPixel', 'x', 'wide');
    __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), 'getPixel', 'y', 'tall');
    return new SimplePixel(this, x, y);
  },

  setRed: function (x, y, value) {
    __SimpleImageUtilities.funCheck('setRed', 3, arguments.length);
    this.imageData.data[this.__getIndex('getRed', x, y)] = __SimpleImageUtilities.clamp(value);
  },
  setGreen: function (x, y, value) {
    __SimpleImageUtilities.funCheck('setGreen', 3, arguments.length);
    this.imageData.data[this.__getIndex('getGreen', x, y) + 1] = __SimpleImageUtilities.clamp(value);
  },
  setBlue: function (x, y, value) {
    __SimpleImageUtilities.funCheck('setBlue', 3, arguments.length);
    this.imageData.data[this.__getIndex('getBlue', x, y) + 2] = __SimpleImageUtilities.clamp(value);
  },
  setAlpha: function (x, y, value) {
    __SimpleImageUtilities.funCheck('setAlpha', 3, arguments.length);
    this.imageData.data[this.__getIndex('getAlpha', x, y) + 3] = __SimpleImageUtilities.clamp(value);
  },
  setPixel: function (x, y, pixel) {
    __SimpleImageUtilities.funCheck('setPixel', 3, arguments.length);
    __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), 'setPixel', 'x', 'wide');
    __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), 'setPixel', 'y', 'tall');
    this.setRed(x, y, pixel.getRed());
    this.setBlue(x, y, pixel.getBlue());
    this.setGreen(x, y, pixel.getGreen());
    this.setAlpha(x, y, pixel.getAlpha());
  },
  // Scales contents of SimpleIage to the given size
  setSize: function (width, height) {
    __SimpleImageUtilities.funCheck('setSize', 2, arguments.length);
    width = Math.floor(width);
    height = Math.floor(height);
    if (width > 0 && height > 0) {
      // make sure we have the most current changes
      __SimpleImageUtilities.flush(this.context, this.imageData);
      this.imageData = __SimpleImageUtilities.changeSize(this.canvas, width, height);
      this.width = width;
      this.height = height;
      this.canvas.width = width;
      this.canvas.height = height;
    }
    else {
      __SimpleImageUtilities.throwError('You tried to set the size of a SimpleImage to a negative width or height [' + width + 'x' + height + ']');
    }
  },
  // Draws to the given canvas, setting its size to match SimpleImage's size
  drawTo: function (toCanvas) {
    if (this.imageData != null) {
      __SimpleImageUtilities.flush(this.context, this.imageData);
      toCanvas.width = this.getWidth();
      toCanvas.height = this.getHeight();
      toCanvas.getContext('2d').drawImage(this.canvas, 0, 0, toCanvas.width, toCanvas.height);
    }
    else {
      var myself = this;
      setTimeout(function () {
        myself.drawTo(toCanvas);
      }, 100);
    }
  },
  // Export an image as an linear array of pixels that can be iterated over
  toArray: function () {
    __SimpleImageUtilities.funCheck('toArray', 0, arguments.length);
    var array = new Array();
    // nip 2012-7
    // 1. simple-way (this is as good or faster in various browser tests)
    // var array = new Array(this.getWidth() * this.getHeight());
    // 2. change to cache-friendly y/x ordering
    // Non-firefox browsers may benefit
    for (var y = 0; y < this.getHeight(); y++) {
      for (var x = 0; x < this.getWidth(); x++) {
        //array[i++] = new SimplePixel(this, x, y);  // 2.
        array.push(new SimplePixel(this, x, y));  // 1.
      }
    }
    return array;
  },
  // Support iterator within for loops (eventually)
  values: function () {
    __SimpleImageUtilities.funCheck('values', 0, arguments.length);
    return this.toArray();
  },
  // Better name than values if we have to use it
  pixels: function () {
    return this.values();
  },

  // Private methods: should not be called publicly, but it should not hurt if it is
  // Completes the construction of this object once the htmlImage is loaded
  __init: function (img) {
    try {
      this.id = img.id;
      // this is a hack to make three different cases work together:
      // - small empty image, thumbnail images, and canvases
      this.width = ('naturalWidth' in img) ? Math.max(img.naturalWidth, img.width) : img.width;
      this.height = ('naturalHeight' in img) ? Math.max(img.naturalHeight, img.height) : img.height;
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      // are we copying an already loaded image or drawing it fresh
      if (img instanceof HTMLCanvasElement) {
        var canvasData = img.getContext('2d').getImageData(0, 0, this.width, this.height);
        this.context.putImageData(canvasData, 0, 0);
      }
      else {
        this.context.drawImage(img, 0, 0, this.width, this.height);
      }
      this.imageData = this.context.getImageData(0, 0, this.width, this.height);
    }
    catch (err) {
      console.log(err);
      __SimpleImageUtilities.throwError('The name you used to create a SimpleImage was not correct: ' + img.id);
    }
  },
  // computes index into 1-d array, and checks correctness of x,y values
  __getIndex: function (funName, x, y) {
    __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), funName, 'x', 'wide');
    __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), funName, 'y', 'tall');
    return (Math.floor(x) + Math.floor(y) * this.getWidth()) * 4;
  }
};


// Private helper functions, add __ to reduce chance they will conflict with anyone else's method names
var __SimpleImageUtilities = (function () {
  // private globals
  // image needed to seed "sized" image
  var EMPTY_IMAGE_DATA = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAQAAAAnZu5uAAAAAXNSR0IArs4c6QAAABVJREFUeJxiYPgPhyQwAQAAAP//AwCgshjoJhZxhgAAAABJRU5ErkJggg==';
  // number of canvases created to hold images
  var globalCanvasCount = 0;
  // load image by wrapping it in an HTML element
  function makeHTMLImage(url, name, simpleImage, loadFunc) {
    if (loadFunc == null) {
      loadFunc = function () {
        simpleImage.__init(this);
        console.log('loaded image: ' + simpleImage.id);
      }
    }
    var img = new Image();
    img.onload = loadFunc;
    img.src = url;
    img.id = name;
    img.style.display = 'none';
    return img;
  }

  // public utility functions
  return {
    // make a blank image so it is cached for future uses
    EMPTY_IMAGE: makeHTMLImage(EMPTY_IMAGE_DATA, 'EMPTY', null, function () { }),

    // create a canvas element
    makeHTMLCanvas: function (prefix) {
      var canvas = document.createElement('canvas');
      canvas.id = prefix + globalCanvasCount;
      canvas.style.display = 'none';
      canvas.innerHTML = 'Your browser does not support HTML5.'
      globalCanvasCount++;
      return canvas;
    },

    // get image from uploaded file input
    makeHTMLImageFromInput: function (file, simpleImage) {
      console.log('creating image: ' + file.name);
      var reader = new FileReader();
      reader.onload = function () {
        makeHTMLImage(this.result, file.name.substr(file.name.lastIndexOf('/') + 1), simpleImage);
      }
      reader.readAsDataURL(file);
      return null;
    },

    // get image from a relative URL
    makeHTMLImageFromURL: function (url, simpleImage) {
      var name = url.substr(0, url.indexOf(';'));
      console.log('creating image: ' + name);
      if (url.substr(0, 4) != 'http') {
        return makeHTMLImage(url, name, simpleImage);
      }
      else {
        // does not work --- loading image from URL taints the canvas so we cannot use it :(
        __SimpleImageUtilities.throwError('Unfortunately you cannot create a SimpleImage directly from a URL: ' + url);
      }
    },

    // create an empty image of the given size
    makeHTMLImageFromSize: function (width, height) {
      console.log('creating image: ' + width + 'x' + height);
      var img = __SimpleImageUtilities.EMPTY_IMAGE.cloneNode(true);
      img.width = width;
      img.height = height;
      return img;
    },

    // set size of the image to the given values, scaling the pixels
    changeSize: function (canvasOld, newWidth, newHeight) {
      var canvasNew = __SimpleImageUtilities.makeHTMLCanvas('setSize_');
      canvasNew.width = newWidth;
      canvasNew.height = newHeight;
      // draw old canvas to new canvas
      var contextNew = canvasNew.getContext('2d');
      contextNew.drawImage(canvasOld, 0, 0, newWidth, newHeight);
      return contextNew.getImageData(0, 0, newWidth, newHeight);
    },

    // clamp values to be in the range 0..255
    clamp: function (value) {
      return Math.max(0, Math.min(Math.floor(value), 255));
    },

    // push accumulated local changes out to the screen
    flush: function (context, imageData) {
      if (imageData != null) {
        context.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
      }
    },

    // call this to abort with a message
    throwError: function (message) {
      throw new Error(message);
    },

    // called from user-facing functions to check number of arguments
    funCheck: function (funcName, expectedLen, actualLen) {
      if (expectedLen != actualLen) {
        var s1 = (actualLen == 1) ? '' : 's';  // pluralize correctly
        var s2 = (expectedLen == 1) ? '' : 's';
        var message = 'You tried to call ' + funcName + ' with ' + actualLen + ' value' + s1 +
          ', but it expects ' + expectedLen + ' value' + s2 + '.';
        // someday: think about "values" vs. "arguments" here
        __SimpleImageUtilities.throwError(message);
      }
    },

    // called from user-facing functions to check if given value is valid
    rangeCheck: function (value, low, high, funName, coordName, size) {
      if (value < low || value >= high) {
        var message = 'You tried to call ' + funName + ' for a pixel with ' + coordName + '-coordinate of ' + value +
          ' in an image that is only ' + high + ' pixels ' + size +
          ' (valid ' + coordName + ' coordinates are ' + low + ' to ' + (high - 1) + ').';
        __SimpleImageUtilities.throwError(message);
      }
    }
  };
})();