CANVAS PROCESS

javascript canvas own library

API

• createImage(url) - return image html <img>
• createImageWithOutline(url, width, height, outlineWidth) - return image html already running drawOutline <img>
• drawImage(_image, width, height) - return image data canvas from image html array[width*height*4]
• defineNonTransparent(imageData) - return image data coordinate x and y canvas non transparent array[x, y]
• marchingSquare(_image, width, height) - return image html <img> and contour edge of image data canvas non transparent array[width*height*4]
• drawOutline(req, width, height outlineStyle) -return image html with outline <img>

---

SETUP

npm install canvas-process

---

createImage(url)

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

CanvasProcess.createImage(url)
    .then(value => {
        console.log(value); // image html
    })

---

createImageWithOutline(url, width, height, outlineWidth)

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

CanvasProcess.createWithOutline(url, 300, 300, 10)
    .then(value => {
        console.log(value.image); // imagedata canvas origin
        console.log(value.outline); // imagedata canvas with outline
        console.log(value.contour); // contour data marching square
    })

---

drawImage(image, width, height)

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

CanvasProcess.createImage(url)
    .then(image => {
        CanvasProcess.drawImage(image, 300, 300)
            .then(value => {
                console.log(value) // image data canvas
            })
    })

---

defineNonTransparent(imageData)

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

CanvasProcess.createImage(url)
    .then(image => {
        CanvasProcess.drawImage(image, 300, 300)
            .then(imageData => {
                CanvasProcess.defineNonTransparent(imageData)
                    .then( value => {
                        console.log(value) // coordinate x and y image data without transparent data
                    })
            })
    })

---

marchingSquare(image, width, height)

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

CanvasProcess.createImage(url)
    .then(image => {
        CanvasProcess.marchingSquare(image, 300, 300)
            .then(value => {
                console.log(value.image); // image html
                console.log(value.contour); // contour edge pixel of image data canvas
            })
    })

---

drawOutline(req, width, height, outlineStyle)

value of parameter req is the javascript object that contain image html <img> and contour edge pixel array[x, y]. This value is return from marchingSquare method above.

value of parameter outlineStyle is the javascript object that contain color of background and color of line stroke (hex style or html text color style in javascript string), also width of line (in pixel).

const CanvasProcess = require('canvas-process');

let url = 'http://www.example.com/image.png';

let outlineStyle = {
    background : "#FFFFFF",
    stroke : "#000",
    witdth : 10
}

CanvasProcess.createImage(url)
    .then(image => {
        CanvasProcess.marchingSquare(image, 300, 300)
            .then(res => {
                CanvasProcess.drawOutline(res, 300, 300, outlineStyle)
                    .then(value => {
                        console.log(value.image); // imagedata canvas origin
                        console.log(value.outline); // imagedata canvas with outline
                        console.log(value.contour); // contour data marching square
                    })
            })
    })