How to use the canvas/imagedata/GetImageData.js function in canvas

To help you get started, we’ve selected a few canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github photonstorm / lazer-dev / src / filter / filter02-flipVertical.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        FlipVertical(imageData);

        ctx.clearRect(0, 0, 320, 200);

        PutImageData(ctx, imageData);

    }
github photonstorm / lazer-dev / src / filter / filter01-flipHorizontal.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        FlipHorizontal(imageData);

        ctx.clearRect(0, 0, 320, 200);

        PutImageData(ctx, imageData);

    }
github photonstorm / lazer-dev / src / canvas / canvas11-processPixels.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        // Process(imageData, this.greyScale);
        Process(imageData, this.greyScale, 0, 0, 160, 200);
        // Process(imageData, this.greyScale, 60, 0, 160, 200);
        // Process(imageData, this.greyScale, 160, 0, 160, 200);
        // Process(imageData, this.greyScale, 200, 100, 160, 200);

        ctx.putImageData(imageData, 0, 0);

    }
github photonstorm / lazer-dev / src / filter / filter09-embossSubtle.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx, 0, 0, 256, 256);

        EmbossSubtle(imageData);

        PutImageData(ctx, imageData, 256, 0);

    }
github photonstorm / lazer-dev / src / filter / filter05-meanRemoval.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx, 0, 0, 256, 256);

        MeanRemoval(imageData);

        PutImageData(ctx, imageData, 256, 0);

    }
github photonstorm / lazer / src / canvas / pixels / PixelData.js View on Github external
update () {

        this.imageData = GetImageData(this.context, 0, 0);
        this.data = this.imageData.data;

        if (this.imageData.data.buffer)
        {
            this.buffer = this.imageData.data.buffer;
            this.pixels = new Uint32Array(this.buffer);
        }
        else
        {
            if (window.ArrayBuffer)
            {
                this.buffer = new ArrayBuffer(this.imageData.data.length);
                this.pixels = new Uint32Array(this.buffer);
            }
            else
            {
github photonstorm / lazer-dev / src / filter / filter04-convolve.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx, 0, 0, 256, 256);

        let weights = [ 
            1, 1, 1,
            1, -7, 1,
            1, 1, 1
        ];

        Convolve(imageData, weights);

        PutImageData(ctx, imageData, 256, 0);

    }
github photonstorm / lazer / src / canvas / pixels / Process.js View on Github external
export default function Process (context, callback, x = 0, y = 0, width = null, height = null) {

    if (!width)
    {
        width = context.canvas.width;
    }

    if (!height)
    {
        height = context.canvas.height;
    }

    let imageData = GetImageData(context, x, y, width, height);

    ProcessImageData(imageData, callback);

    PutImageData(context, imageData, x, y);

}