B2G/gaia/apps/gallery/js/ImageEditor.js
/*
 * ImageEditor.js: simple image editing and previews in a <canvas> element.
 *
 * Display an edited version of the specified image in a <canvas> element
 * inside the specified container element. The image (or cropped region of
 * the image) will be displayed as large as possible within the container's
 * area.  Edits is an object that specifies the edits to apply to the image.
 * The edits object may include these properties:
 *
 *  gamma: a float specifying gamma correction
 *  matrix: a 4x4 matrix that represents a transformation of each rgba pixel.
 *    this can be used to convert to bw or sepia, for example.
 *  borderWidth: the size of the border as a fraction of the image width
 *  borderColor: a [r, g, b, a] array specifying border color
 *
 * In addition to previewing the image, this class also defines a
 * getFullSizeBlob() function that creates a full-size version of the
 * edited image.
 *
 * This class also handles cropping.  See:
 *
 *   showCropOverlay()
 *   hideCropOverlay()
 *   cropImage()
 *   undoCrop()
 *
 * This code expects WebGL GLSL shader programs in scripts with ids
 * edit-vertex-shader and edit-fragment-shader. It dynamically creates
 * canvas elements with ids edit-preview-canvas and edit-crop-canvas.
 * The stylesheet includes static styles to position those dyanamic elements.
 */
ImageEditor.js: simple image editing and previews in a  element.
Display an edited version of the specified image in a  element
inside the specified container element. The image (or cropped region of
the image) will be displayed as large as possible within the container's
area.  Edits is an object that specifies the edits to apply to the image.
The edits object may include these properties.

a float specifying gamma correction
matrix: a 4x4 matrix that represents a transformation of each rgba pixel.
this can be used to convert to bw or sepia, for example.
borderWidth: the size of the border as a fraction of the image width
borderColor: a [r, g, b, a] array specifying border color

In addition to previewing the image, this class also defines a
getFullSizeBlob() function that creates a full-size version of the
edited image.

This class also handles cropping.  See.



This code expects WebGL GLSL shader programs in scripts with ids
edit-vertex-shader and edit-fragment-shader. It dynamically creates
canvas elements with ids edit-preview-canvas and edit-crop-canvas.
The stylesheet includes static styles to position those dyanamic elements.
ImageEditor . js : simple image editing and previews in a element . Display an edited version of the specified image in a element inside the specified container element . The image ( or cropped region of the image ) will be displayed as large as possible within the container ' s area . Edits is an object that specifies the edits to apply to the image . The edits object may include these properties . a float specifying gamma correction matrix : a 4x4 matrix that represents a transformation of each rgba pixel . this can be used to convert to bw or sepia for example . borderWidth : the size of the border as a fraction of the image width borderColor : a [ r g b a ] array specifying border color In addition to previewing the image this class also defines a getFullSizeBlob () function that creates a full - size version of the edited image . This class also handles cropping . See . This code expects WebGL GLSL shader programs in scripts with ids edit - vertex - shader and edit - fragment - shader . It dynamically creates canvas elements with ids edit - preview - canvas and edit - crop - canvas . The stylesheet includes static styles to position those dyanamic elements .
function ImageEditor(imageURL, container, edits, ready) {
  this.imageURL = imageURL;
  this.container = container;
  this.edits = edits || {};
  this.source = {};     
  this.dest = {};       
  this.cropRegion = {}; 
  this.original = new Image();
  this.original.src = imageURL;
  this.preview = new Image();
  this.preview.src = null;
  this.previewCanvas = document.createElement('canvas');
  this.previewCanvas.id = 'edit-preview-canvas'; 
  this.container.appendChild(this.previewCanvas);
  this.previewCanvas.width = this.previewCanvas.clientWidth;
  this.previewCanvas.height = this.previewCanvas.clientHeight;
  this.processor = new ImageProcessor(this.previewCanvas);
  this.scale = 1.0;
  var self = this;
  this.original.onload = function() {
    self.resetCropRegion();
    self.resetPreview();
    self.edit(function() {
      if (ready)
        ready();
    });
  };
}
function ImageEditor ( imageURL , container , edits , ready ) { this . imageURL = imageURL ; this . container = container ; this . edits = edits || { } ; this . source = { } ; this . dest = { } ; this . cropRegion = { } ; this . original = new Image ( ) ; this . original . src = imageURL ; this . preview = new Image ( ) ; this . preview . src = null ; this . previewCanvas = document . createElement ( 'canvas' ) ; this . previewCanvas . id = 'edit-preview-canvas' ; this . container . appendChild ( this . previewCanvas ) ; this . previewCanvas . width = this . previewCanvas . clientWidth ; this . previewCanvas . height = this . previewCanvas . clientHeight ; this . processor = new ImageProcessor ( this . previewCanvas ) ; this . scale = 1.0 ; var self = this ; this . original . onload = function ( ) { self . resetCropRegion ( ) ; self . resetPreview ( ) ; self . edit ( function ( ) { if ( ready ) ready ( ) ; } ) ; } ; }
ImageEditor.js: simple image editing and previews in a <canvas> element.
ImageEditor . js : simple image editing and previews in a <canvas > element .
// The source rectangle (crop region) of the image // The destination (preview) rectangle of canvas // Region displayed in crop overlay during drags // Start loading the image into a full-size offscreen image // The canvas that displays the preview // for stylesheet // preset the scale to something useful in case resize() gets called // before generateNewPreview() // When the image loads display it // Initialize the crop region to the full size of the original image // Display an edited preview of it // If the constructor had a ready callback argument, call it now