lw.canvas-grid

Canvas size limitation

Due to limitation of the size of the element by some browser, obtaining information about pixels of a very large bitmap was impossible with a single canvas.
This library tries to overcome this limitation by loading an image in a grid of canvas.

Reference: http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element

Demo

https://lautr3k.github.io/lw.canvas-grid/dist/example/

Installation

Using NPM
``


npm install lw.canvas-grid

Using GIT`git clone https://github.com/lautr3k/lw.canvas-grid.git cd lw.canvas-grid npm install`

Or download the last build from https://raw.githubusercontent.com/lautr3k/lw.canvas-grid/master/dist/lw.canvas-grid.js`html`

`Settings`

javascript
let settings = {
    cellSize  : 1024,           // Maximum size for one canvas (cell)
    scaleRatio: { x: 1, y: 1 }, // Resize (can be integer for uniform scaling)
    filters   : {
        smoothing   : false,  // Smoothing the input image ?
        brightness  : 0,      // Image brightness [-255 to +255]
        contrast    : 0,      // Image contrast [-255 to +255]
        gamma       : 0,      // Image gamma correction [0.01 to 7.99]
        grayscale   : 'none', // Graysale algorithm [average, luma, luma-601, luma-709, luma-240, desaturation, decomposition-[min|max], [red|green|blue]-chanel]
        shadesOfGray: 256,    // Number of shades of gray [2-256]
        invertColor : false   // Invert color...
    }
}


Usages

javascript
import CanvasGrid from 'lw.canvas-grid'
let canvasGrid = new CanvasGrid(settings)
//  can be Image, File, URL object or URL string (http:// or data:image/)
canvasGrid.load(file).then(function(cg) {
    console.log('canvasGrid:', cg);
    // Get pixel data
    let pixelData = cg.getPixel(x, y);
    // pixelData {
    //     color : { r, g, b, a },
    //     gray  : int[0-255],
    //     grid  : { col, row },
    //     coords: { x, y }
    // }

console.log(cg.size) // { width, height, cols, rows } console.log(cg.file) // File object console.log(cg.image) // Image object console.log(cg.url) // URL object }) .catch(function(error) { console.error('error:', error); });``

Settings

javascript
let settings = {
cellSize : 1024, // Maximum size for one canvas (cell)
scaleRatio: { x: 1, y: 1 }, // Resize (can be integer for uniform scaling)
filters : {
smoothing : false, // Smoothing the input image ?
brightness : 0, // Image brightness [-255 to +255]
contrast : 0, // Image contrast [-255 to +255]
gamma : 0, // Image gamma correction [0.01 to 7.99]
grayscale : 'none', // Graysale algorithm [average, luma, luma-601, luma-709, luma-240, desaturation, decomposition-[min|max], [red|green|blue]-chanel]
shadesOfGray: 256, // Number of shades of gray [2-256]
invertColor : false // Invert color...
}
}

Usages

javascript
import CanvasGrid from 'lw.canvas-grid'

let canvasGrid = new CanvasGrid(settings)

// can be Image, File, URL object or URL string (http:// or data:image/)
canvasGrid.load(file).then(function(cg) {
console.log('canvasGrid:', cg);

// Get pixel data
let pixelData = cg.getPixel(x, y);

// pixelData {
// color : { r, g, b, a },
// gray : int[0-255],
// grid : { col, row },
// coords: { x, y }
// }

    console.log(cg.size)  // { width, height, cols, rows }
    console.log(cg.file)  // File object
    console.log(cg.image) // Image object
    console.log(cg.url)   // URL object
})
.catch(function(error) {
    console.error('error:', error);
});