graphics/webimage.js

'use strict';

var Thing = require('./thing.js');

var UNDEFINED = -1;
var NOT_LOADED = 1;
var DONE = 2;

var NUM_CHANNELS = 4;
var RED = 0;
var GREEN = 1;
var BLUE = 2;
var ALPHA = 3;

/**
 * @constructor
 * @augments Thing
 * @param {string} filename - Filepath to the image
 */
function WebImage(filename) {
    if (typeof filename !== 'string') {
        throw new TypeError('You must pass a string to <span class="code">' +
            'new WebImage(filename)</span> that has the image\'s location.');
    }
    Thing.call(this);
    var self = this;

    this.image = new Image();
    this.image.src = filename;
    this.filename = filename;
    this.width = NOT_LOADED;
    this.height = NOT_LOADED;
    this.image.onload = function() {
        self.checkDimensions();
        if (self.loadfn) {
            self.loadfn();
        }

    };
    this.set = 0;
    this.type = 'WebImage';

    this.displayFromData = false;
    this.isCrossOrigin = false;
    this.data = NOT_LOADED;
}

WebImage.prototype = new Thing();
WebImage.prototype.constructor = WebImage;

/**
 * Set a function to be called when the WebImage is loaded.
 *
 * @param {function} callback - A function
 */
WebImage.prototype.loaded = function(callback) {
    this.loadfn = callback;
};

/**
 * Set the image of the WebImage.
 *
 * @param {string} filename - Filepath to the image
 */
WebImage.prototype.setImage = function(filename) {
    var self = this;

    this.image = new Image();
    this.image.src = filename;
    this.filename = filename;
    this.width = NOT_LOADED;
    this.height = NOT_LOADED;
    this.image.onload = function() {
        self.checkDimensions();
        if (self.loadfn) {
            self.loadfn();
        }

    };
    this.set = 0;

    this.displayFromData = false;
    this.isCrossOrigin = false;
    this.data = NOT_LOADED;
};

/**
 * Reinforce the dimensions of the WebImage based on the image it displays.
 */
WebImage.prototype.checkDimensions = function() {
    if (this.width == NOT_LOADED) {
        this.width = this.image.width;
        this.height = this.image.height;
    }
};

/**
 * Draws the WebImage in the canvas.
 *
 * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
 */
WebImage.prototype.draw = function(__graphics__) {
    this.checkDimensions();
    var context = __graphics__.getContext('2d');
    // http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates
    context.save();
    context.beginPath();

    context.translate(this.x + this.width / 2, this.y + this.height / 2);
    context.rotate(this.rotation);

    // If we should be displaying the underlying pixel data, display that
    // Otherwise display the image
    if (this.displayFromData && this.data !== NOT_LOADED) {
        // putImageData does not respect context transformations so use
        // this.x and this.y for the upper left corner
        context.putImageData(this.data, this.x, this.y);
    } else {
        context.drawImage(this.image, -this.width / 2, -this.height / 2,
            this.width, this.height);
    }

    // If we haven't updated the underlying pixel data yet, try to get
    // the pixel data from the canvas context.
    try {
        if (this.data === NOT_LOADED && !this.isCrossOrigin) {
            // get the ImageData for this image
            this.data = context.getImageData(this.x, this.y,
                this.width, this.height);
        }
    } catch (err) {
        // Image was cross origin.
        // Fail silently so we can still display images from cross origin,
        // just not access cross origin image data
        this.data = NOT_LOADED;
        this.isCrossOrigin = true;
    }

    context.closePath();
    context.restore();
};

/**
 * Assign the ImageData of the canvas at the position of the image,
 * essentially assigning the ImageData.
 * Read more at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
 */
WebImage.prototype.getData = function(__graphics__) {
    var context = __graphics__.getContext();
    //context.drawImage(this.image, this.x, this.y, this.width, this.height);
    this.data = context.getImageData(this.x, this.y, this.width, this.height);
};

/**
 * Checks if the passed point is contained in the WebImage.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {boolean} Whether the passed point is contained in the WebImage.
 */
WebImage.prototype.containsPoint = function(x, y) {
    return x >= this.x && x <= this.x + this.width &&
           y >= this.y && y <= this.y + this.height;
};

/**
 * Gets the width of the WebImage.
 *
 * @returns {number} Width of the WebImage.
 */
WebImage.prototype.getWidth = function() {
    return this.width;
};

/**
 * Gets the height of the WebImage.
 *
 * @returns {number} Height of the WebImage.
 */
WebImage.prototype.getHeight = function() {
    return this.height;
};

/**
 * Sets the size of the WebImage.
 *
 * @param {number} width - The desired width of the resulting WebImage.
 * @param {number} height - The desired height of the resulting WebImage.
 */
WebImage.prototype.setSize = function(width, height) {
    this.width = width;
    this.height = height;
};

/* Get and set pixel functions */

/**
 * Gets a pixel at the given x and y coordinates.
 * Read more here:
 * https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {array} An array of 4 numbers representing the (r,g,b,a) values
 *                     of the pixel at that coordinate.
 */
WebImage.prototype.getPixel = function(x, y) {
    if (this.data === NOT_LOADED ||
        x > this.width ||
        x < 0 ||
        y > this.height ||
        y < 0
    ) {
        var noPixel = [UNDEFINED, UNDEFINED, UNDEFINED, UNDEFINED];
        return noPixel;
    } else {
        var index = NUM_CHANNELS * (y * this.width + x);
        var pixel = [
                this.data.data[index + RED],
                this.data.data[index + GREEN],
                this.data.data[index + BLUE],
                this.data.data[index + ALPHA]
                    ];
        return pixel;
    }
};

/**
 * Get the red value at a given location in the image.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {integer} An integer between 0 and 255.
 */
WebImage.prototype.getRed = function(x, y) {
    return this.getPixel(x, y)[RED];
};

/**
 * Get the green value at a given location in the image.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {integer} An integer between 0 and 255.
 */
WebImage.prototype.getGreen = function(x, y) {
    return this.getPixel(x, y)[GREEN];
};

/**
 * Get the blue value at a given location in the image.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {integer} An integer between 0 and 255.
 */
WebImage.prototype.getBlue = function(x, y) {
    return this.getPixel(x, y)[BLUE];
};

/**
 * Get the alpha value at a given location in the image.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @returns {integer} An integer between 0 and 255.
 */
WebImage.prototype.getAlpha = function(x, y) {
    return this.getPixel(x, y)[ALPHA];
};

/**
 * Set the `component` value at a given location in the image to `val`.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @param {integer} component - Integer representing the color value to
 * be set. R, G, B = 0, 1, 2, respectively.
 * @param {integer} val - The desired value of the `component` at the pixel.
 * Must be between 0 and 255.
 */
WebImage.prototype.setPixel = function(x, y, component, val) {
    if (this.data !== NOT_LOADED &&
        !(x < 0 || y < 0 || x > this.width || y > this.height)) {

        // Update the pixel value
        var index = NUM_CHANNELS * (y * this.width + x);
        this.data.data[index + component] = val;

        // Now that we have modified the image data, we need to display
        // the image based on the underlying image data rather than the
        // image url
        this.displayFromData = true;
    }
};

/**
 * Set the red value at a given location in the image to `val`.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @param {integer} val - The desired value of the red component at the pixel.
 * Must be between 0 and 255.
 */
WebImage.prototype.setRed = function(x, y, val) {
    this.setPixel(x, y, RED, val);
};

/**
 * Set the green value at a given location in the image to `val`.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @param {integer} val - The desired value of the green component at the pixel.
 * Must be between 0 and 255.
 */
WebImage.prototype.setGreen = function(x, y, val) {
    this.setPixel(x, y, GREEN, val);
};

/**
 * Set the blue value at a given location in the image to `val`.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @param {integer} val - The desired value of the blue component at the pixel.
 * Must be between 0 and 255.
 */
WebImage.prototype.setBlue = function(x, y, val) {
    this.setPixel(x, y, BLUE, val);
};

/**
 * Set the alpha value at a given location in the image to `val`.
 *
 * @param {number} x - The x coordinate of the point being tested.
 * @param {number} y - The y coordinate of the point being tested.
 * @param {integer} val - The desired value of the alpha component at the
 * pixel.
 * Must be between 0 and 255.
 */
WebImage.prototype.setAlpha = function(x, y, val) {
    this.setPixel(x, y, ALPHA, val);
};

module.exports = WebImage;