https://github.com/skarab42/lw.canvas-grid

Canvas grid for LaserWeb
https://github.com/skarab42/lw.canvas-grid

Last synced: 15 days ago
JSON representation

Canvas grid for LaserWeb

• Host: GitHub
• URL: https://github.com/skarab42/lw.canvas-grid
• Owner: skarab42
• License: mit
• Created: 2016-12-16T17:57:02.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-27T08:43:41.000Z (over 7 years ago)
• Last Synced: 2024-10-02T09:46:52.317Z (about 1 month ago)
• Language: JavaScript
• Size: 57.6 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# lw.canvas-grid

Canvas grid for [LaserWeb/CNCWeb](https://github.com/LaserWeb/LaserWeb4).

# 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

  var canvasGrid = CanvasGrid.CanvasGrid();

```

## 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);

});

```