canvas image processing
Canvas Image Processing (cip) is easy image processing by canvas. It works in browser. Micro lib for image resizing and cropping without any dependencies.
Example of usage
Crop and resize image from file-input
/* <input type="file" onchange="action"> */const CIP = ; { if eventtargetfiles0 const file = eventtargetfiles0; const reader = ; reader { let base64_image = etargetresult; CIP; CIP; }; reader; }
Methods
/* converting */ // convert base64-image string to Image (HTMLImageElement instance) asynchronously// returns promise with HTMLImageElementCIP; // convert base64-image string to canvas// returns promise with HTMLCanvasElementCIP; // convert image string to canvas// returns HTMLCanvasElement elementCIP; /* resizing */ // resize base64-string// returns promise with base64 stringCIP; // resize image (HTMLImageElement instance)// returns base64 stringCIP; /* cropping */ // cropping image from base64-image string// returns promise with base64 stringCIP; // cropping image (HTMLImageElement instance)// returns base64 stringCIP; /* calculations */ // calculating parameter for vertical crop// returns array like [[x, y, newWidth, newHeight]...]CIP; // calculating parameter for horizontal crop// returns array like [[x, y, newWidth, newHeight]...]CIP;
Installation
With npm do
$ npm install canvas_image_processing
With yarn do
$ yarn add canvas_image_processing
Run test
yarn test
License
(MPL-2.0)