Pixel Manipulation with Canvas API

With the ImageData object we can directly read and write a data array to manipulate pixel data.

MEDIUM: Canvas API와 Broadcast Channel API를 이용한 자필 서명 이미지 생성 모듈 구현기 - Part.1 (Korean)

Instructions

Install dependencies.

$ npm install
$ npm i

Start live-server with following script.

$ npm start

The script above will compile .ts to .js and run the live-server on localhost on port 4000.

You can change serving port within server.js configurations.

const params = {
  port: 4000, // <- here
  host: "0.0.0.0",
  open: true,
  root: "src",
};

Features to demonstrate

Parsing Pixels

Cropping Image

Thanks!

© Wonkook Lee