/*

* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.

* http://paperjs.org/

*

* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey

* http://lehni.org/ & http://jonathanpuckey.com/

*

* Distributed under the MIT license. See LICENSE file for details.

*

* All rights reserved.

*/

/**

* @name Raster

*

* @class The Raster item represents an image in a Paper.js project.

*

* @extends Item

*/

var Raster = Item.extend(/** @lends Raster# */{

_class: 'Raster',

_transformContent: false,

// Raster doesn't make the distinction between the different bounds,

// so use the same name for all of them

_boundsGetter: 'getBounds',

_boundsSelected: true,

_serializeFields: {

source: null

},

// TODO: Implement type, width, height.

// TODO: Have PlacedSymbol & Raster inherit from a shared class?

/**

* Creates a new raster item from the passed argument, and places it in the

* active layer. {@code object} can either be a DOM Image, a Canvas, or a

* string describing the URL to load the image from, or the ID of a DOM

* element to get the image from (either a DOM Image or a Canvas).

*

* @param {HTMLImageElement|Canvas|String} [source] the source of the raster

* @param {HTMLImageElement|Canvas|String} [position] the center position at

* which the raster item is placed.

*

* @example {@paperscript height=300} // Creating a raster using a url

* var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';

* var raster = new Raster(url);

*

* // If you create a Raster using a url, you can use the onLoad

* // handler to do something once it is loaded:

* raster.onLoad = function() {

* console.log('The image has loaded.');

* };

*

* @example // Creating a raster using the id of a DOM Image:

*

* // Create a raster using the id of the image:

* var raster = new Raster('art');

*

* @example // Creating a raster using a DOM Image:

*

* // Find the element using its id:

* var imageElement = document.getElementById('art');

*

* // Create the raster:

* var raster = new Raster(imageElement);

*

* @example {@paperscript height=300}

* var raster = new Raster({

* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',

* position: view.center

* });

*

* raster.scale(0.5);

* raster.rotate(10);

*/

initialize: function Raster(object, position) {

// Support two forms of item initialization: Passing one object literal

// describing all the different properties to be set, or an image

// (object) and a point where it should be placed (point).

// If _initialize can set properties through object literal, we're done.

// Otherwise we need to check the type of object:

if (!this._initialize(object,

position !== undefined && Point.read(arguments, 1))) {

if (typeof object === 'string') {

// Both data-urls and normal urls are supported here!

this.setSource(object);

} else {

// #setImage() handles both canvas and image types.

this.setImage(object);

}

}

if (!this._size)

this._size = new Size();

},

_equals: function(item) {

return this.getSource() === item.getSource();

},

clone: function(insert) {

var param = { insert: false },

image = this._image;

if (image) {

param.image = image;

} else if (this._canvas) {

// If the Raster contains a Canvas object, we need to create

// a new one and draw this raster's canvas on it.

var canvas = param.canvas = CanvasProvider.getCanvas(this._size);

canvas.getContext('2d').drawImage(this._canvas, 0, 0);

}

return this._clone(new Raster(param), insert);

},

/**

* The size of the raster in pixels.

*

* @type Size

* @bean

*/

getSize: function() {

var size = this._size;

return new LinkedSize(size.width, size.height, this, 'setSize');

},

setSize: function(/* size */) {

var size = Size.read(arguments);

if (!this._size.equals(size)) {

// Get reference to image before changing canvas

var element = this.getElement();

// Setting canvas internally sets _size

this.setCanvas(CanvasProvider.getCanvas(size));

// Draw element back onto new canvas

if (element)

this.getContext(true).drawImage(element, 0, 0,

size.width, size.height);

}

},

/**

* The width of the raster in pixels.

*

* @type Number

* @bean

*/

getWidth: function() {

return this._size.width;

},

/**

* The height of the raster in pixels.

*

* @type Number

* @bean

*/

getHeight: function() {

return this._size.height;

},

isEmpty: function() {

return this._size.width == 0 && this._size.height == 0;

},

/**

* Pixels per inch of the raster at its current size.

*

* @type Size

* @bean

*/

getPpi: function() {

var matrix = this._matrix,

orig = new Point(0, 0).transform(matrix),

u = new Point(1, 0).transform(matrix).subtract(orig),

v = new Point(0, 1).transform(matrix).subtract(orig);

return new Size(

72 / u.getLength(),

72 / v.getLength()

);

},

/**

* The HTMLImageElement of the raster, if one is associated.

*

* @type HTMLImageElement|Canvas

* @bean

*/

getImage: function() {

return this._image;

},

setImage: function(image) {

if (this._canvas)

CanvasProvider.release(this._canvas);

// Due to similarities, we can handle both canvas and image types here.

if (image.getContext) {

// A canvas object

this._image = null;

this._canvas = image;

} else {

// A image object

this._image = image;

this._canvas = null;

}

// Both canvas and image have width / height attributes. Due to IE,

// naturalWidth / Height needs to be checked for a swell, because it

// apparently can have width / height set to 0 when the image is

// invisible in the document.

this._size = new Size(

image.naturalWidth || image.width,

image.naturalHeight || image.height);

this._context = null;

this._changed(/*#=*/ Change.GEOMETRY | /*#=*/ Change.PIXELS);

},

/**

* The Canvas object of the raster. If the raster was created from an image,

* accessing its canvas causes the raster to try and create one and draw the

* image into it. Depending on security policies, this might fail, in which

* case {@code null} is returned instead.

*

* @type Canvas

* @bean

*/

getCanvas: function() {

if (!this._canvas) {

var ctx = CanvasProvider.getContext(this._size);

// Since drawImage into canvas might fail based on security policies

// wrap the call in try-catch and only set _canvas if we succeeded.

try {

if (this._image)

ctx.drawImage(this._image, 0, 0);

this._canvas = ctx.canvas;

} catch (e) {

CanvasProvider.release(ctx);

}

}

return this._canvas;

},

// #setCanvas() is a simple alias to #setImage()

setCanvas: '#setImage',

/**

* The Canvas 2D drawing context of the raster.

*

* @type Context

* @bean

*/

getContext: function(/* modify */) {

if (!this._context)

this._context = this.getCanvas().getContext('2d');

// Support a hidden parameter that indicates if the context will be used

// to modify the Raster object. We can notify such changes ahead since

// they are only used afterwards for redrawing.

if (arguments[0]) {

// Also set _image to null since the Raster stops representing it.

// NOTE: This should theoretically be in our own _changed() handler

// for ChangeFlag.PIXELS, but since it's only happening in one place

// this is fine:

this._image = null;

this._changed(/*#=*/ Change.PIXELS);

}

return this._context;

},

setContext: function(context) {

this._context = context;

},

/**

* The source of the raster, which can be set using a DOM Image, a Canvas,

* a data url, a string describing the URL to load the image from, or the

* ID of a DOM element to get the image from (either a DOM Image or a

* Canvas). Reading this property will return the url of the source image or

* a data-url.

*

* @bean

* @type HTMLImageElement|Canvas|String

*

* @example {@paperscript}

* var raster = new Raster();

* raster.source = 'http://paperjs.org/about/resources/paper-js.gif';

* raster.position = view.center;

*

* @example {@paperscript}

* var raster = new Raster({

* source: 'http://paperjs.org/about/resources/paper-js.gif',

* position: view.center

* });

*/

getSource: function() {

return this._image && this._image.src || this.toDataURL();

},

setSource: function(src) {

/*#*/ if (options.environment == 'browser') {

var that = this,

// src can be an URL or a DOM ID to load the image from

image = document.getElementById(src) || new Image();

function loaded() {

var view = that._project.view;

if (view)

paper = view._scope;

that.fire('load');

if (view)

view.draw(true);

}

// IE has naturalWidth / Height defined, but width / height set to 0

// when the image is invisible in the document.

if (image.naturalWidth && image.naturalHeight) {

// Fire load event delayed, so behavior is the same as when it's

// actually loaded and we give the code time to install event

setTimeout(loaded, 0);

} else {

// Trigger the onLoad event on the image once it's loaded

DomEvent.add(image, {

load: function() {

that.setImage(image);

loaded();

}

});

// A new image created above? Set the source now.

if (!image.src)

image.src = src;

}

this.setImage(image);

/*#*/ } else if (options.environment == 'node') {

var image = new Image();

// If we're running on the server and it's a string,

// check if it is a data URL

if (/^data:/.test(src)) {

// Preserve the data in this._data since canvas-node eats it.

// TODO: Fix canvas-node instead

image.src = this._data = src;

} else {

// Load it from disk:

// TODO: load images async, calling setImage once loaded as above.

image.src = fs.readFileSync(src);

}

this.setImage(image);

/*#*/ } // options.environment == 'node'

},

// DOCS: document Raster#getElement

getElement: function() {

return this._canvas || this._image;

},

/**

* Extracts a part of the Raster's content as a sub image, and returns it as

* a Canvas object.

*

* @param {Rectangle} rect the boundaries of the sub image in pixel

* coordinates

*

* @return {Canvas} the sub image as a Canvas object

*/

getSubCanvas: function(rect) {

rect = Rectangle.read(arguments);

var ctx = CanvasProvider.getContext(rect.getSize());

ctx.drawImage(this.getCanvas(), rect.x, rect.y,

rect.width, rect.height, 0, 0, rect.width, rect.height);

return ctx.canvas;

},

/**

* Extracts a part of the raster item's content as a new raster item, placed

* in exactly the same place as the original content.

*

* @param {Rectangle} rect the boundaries of the sub raster in pixel

* coordinates

*

* @return {Raster} the sub raster as a newly created raster item

*/

getSubRaster: function(rect) {

rect = Rectangle.read(arguments);

var raster = new Raster({

canvas: this.getSubCanvas(rect),

insert: false

});

raster.translate(rect.getCenter().subtract(this.getSize().divide(2)));

raster._matrix.preConcatenate(this._matrix);

raster.insertAbove(this);

return raster;

},

/**

* Returns a Base 64 encoded {@code data:} URL representation of the raster.

*

* @return {String}

*/

toDataURL: function() {

// See if the linked image is base64 encoded already, if so reuse it,

// otherwise try using canvas.toDataURL()

/*#*/ if (options.environment == 'node') {

if (this._data)

return this._data;

/*#*/ } else {

var src = this._image && this._image.src;

if (/^data:/.test(src))

return src;

/*#*/ }

var canvas = this.getCanvas();

return canvas ? canvas.toDataURL() : null;

},

/**

* Draws an image on the raster.

*

* @param {HTMLImageELement|Canvas} image

* @param {Point} point the offset of the image as a point in pixel

* coordinates

*/

drawImage: function(image, point) {

point = Point.read(arguments, 1);

this.getContext(true).drawImage(image, point.x, point.y);

},

/**

* Calculates the average color of the image within the given path,

* rectangle or point. This can be used for creating raster image

* effects.

*

* @param {Path|Rectangle|Point} object

* @return {Color} the average color contained in the area covered by the

* specified path, rectangle or point.

*/

getAverageColor: function(object) {

var bounds, path;

if (!object) {

bounds = this.getBounds();

} else if (object instanceof PathItem) {

// TODO: What if the path is smaller than 1 px?

// TODO: How about rounding of bounds.size?

path = object;

bounds = object.getBounds();

} else if (object.width) {

bounds = new Rectangle(object);

} else if (object.x) {

// Create a rectangle of 1px size around the specified coordinates

bounds = new Rectangle(object.x - 0.5, object.y - 0.5, 1, 1);

}

// Use a sample size of max 32 x 32 pixels, into which the path is

// scaled as a clipping path, and then the actual image is drawn in and

// sampled.

var sampleSize = 32,

width = Math.min(bounds.width, sampleSize),

height = Math.min(bounds.height, sampleSize);

// Reuse the same sample context for speed. Memory consumption is low

// since it's only 32 x 32 pixels.

var ctx = Raster._sampleContext;

if (!ctx) {

ctx = Raster._sampleContext = CanvasProvider.getContext(

new Size(sampleSize));

} else {

// Clear the sample canvas:

ctx.clearRect(0, 0, sampleSize + 1, sampleSize + 1);

}

ctx.save();

// Scale the context so that the bounds ends up at the given sample size

var matrix = new Matrix()

.scale(width / bounds.width, height / bounds.height)

.translate(-bounds.x, -bounds.y);

matrix.applyToContext(ctx);

// If a path was passed, draw it as a clipping mask:

// See Project#draw() for an explanation of Base.merge()

if (path)

path.draw(ctx, Base.merge({ clip: true, transforms: [matrix] }));

// Now draw the image clipped into it.

this._matrix.applyToContext(ctx);

ctx.drawImage(this.getElement(),

-this._size.width / 2, -this._size.height / 2);

ctx.restore();

// Get pixel data from the context and calculate the average color value

// from it, taking alpha into account.

var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),

Math.ceil(height)).data,

channels = [0, 0, 0],

total = 0;

for (var i = 0, l = pixels.length; i < l; i += 4) {

var alpha = pixels[i + 3];

total += alpha;

alpha /= 255;

channels[0] += pixels[i] * alpha;

channels[1] += pixels[i + 1] * alpha;

channels[2] += pixels[i + 2] * alpha;

}

for (var i = 0; i < 3; i++)

channels[i] /= total;

return total ? Color.read(channels) : null;

},

/**

* {@grouptitle Pixels}

* Gets the color of a pixel in the raster.

*

* @name Raster#getPixel

* @function

* @param x the x offset of the pixel in pixel coordinates

* @param y the y offset of the pixel in pixel coordinates

* @return {Color} the color of the pixel

*/

/**

* Gets the color of a pixel in the raster.

*

* @name Raster#getPixel

* @function

* @param point the offset of the pixel as a point in pixel coordinates

* @return {Color} the color of the pixel

*/

getPixel: function(point) {

point = Point.read(arguments);

var data = this.getContext().getImageData(point.x, point.y, 1, 1).data;

// Alpha is separate now:

return new Color('rgb', [data[0] / 255, data[1] / 255, data[2] / 255],

data[3] / 255);

},

/**

* Sets the color of the specified pixel to the specified color.

*

* @name Raster#setPixel

* @function

* @param x the x offset of the pixel in pixel coordinates

* @param y the y offset of the pixel in pixel coordinates

* @param color the color that the pixel will be set to

*/

/**

* Sets the color of the specified pixel to the specified color.

*

* @name Raster#setPixel

* @function

* @param point the offset of the pixel as a point in pixel coordinates

* @param color the color that the pixel will be set to

*/

setPixel: function(/* point, color */) {

var point = Point.read(arguments),

color = Color.read(arguments),

components = color._convert('rgb'),

alpha = color._alpha,

ctx = this.getContext(true),

imageData = ctx.createImageData(1, 1),

data = imageData.data;

data[0] = components[0] * 255;

data[1] = components[1] * 255;

data[2] = components[2] * 255;

data[3] = alpha != null ? alpha * 255 : 255;

ctx.putImageData(imageData, point.x, point.y);

},

// DOCS: document Raster#createImageData

/**

* {@grouptitle Image Data}

* @param {Size} size

* @return {ImageData}

*/

createImageData: function(size) {

size = Size.read(arguments);

return this.getContext().createImageData(size.width, size.height);

},

// DOCS: document Raster#getImageData

/**

* @param {Rectangle} rect

* @return {ImageData}

*/

getImageData: function(rect) {

rect = Rectangle.read(arguments);

if (rect.isEmpty())

rect = new Rectangle(this._size);

return this.getContext().getImageData(rect.x, rect.y,

rect.width, rect.height);

},

// DOCS: document Raster#setImageData

/**

* @param {ImageData} data

* @param {Point} point

* @return {ImageData}

*/

setImageData: function(data, point) {

point = Point.read(arguments, 1);

this.getContext(true).putImageData(data, point.x, point.y);

},

_getBounds: function(getter, matrix) {

var rect = new Rectangle(this._size).setCenter(0, 0);

return matrix ? matrix._transformBounds(rect) : rect;

},

_hitTest: function(point) {

if (this._contains(point)) {

var that = this;

return new HitResult('pixel', that, {

offset: point.add(that._size.divide(2)).round(),

// Inject as Bootstrap accessor, so #toString renders well too

color: {

get: function() {

return that.getPixel(this.offset);

}

}

});

}

},

_draw: function(ctx) {

var element = this.getElement();

if (element) {

// Handle opacity for Rasters separately from the rest, since

// Rasters never draw a stroke. See Item#draw().

ctx.globalAlpha = this._opacity;

ctx.drawImage(element,

-this._size.width / 2, -this._size.height / 2);

}

},

_canComposite: function() {

return true;

}

});