canvas_image_processing

    0.0.5 • Public • Published

    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 = require('canvas_image_processing');
     
    function action(event) {
      if (event.target.files[0]) {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
          let base64_image = e.target.result;
     
          CIP.cropImage64(base64_image, 0, 0, 200, 200).then(cropped_image => {
            console.log('cropped base64 image: ', cropped_image);
          });
     
          CIP.resizeImage64(base64_image, 600, 600).then(cropped_image => {
            console.log('resized base64 image: ', cropped_image);
          });
        };
        reader.readAsDataURL(file);
      }
    }

    Methods

    /* converting */
     
    // convert base64-image string to Image (HTMLImageElement instance) asynchronously
    // returns promise with HTMLImageElement
    CIP.image64ToImage(base64Image);
     
    // convert base64-image string to canvas
    // returns promise with HTMLCanvasElement
    CIP.image64ToCanvas(base64Image);
     
    // convert image string to canvas
    // returns HTMLCanvasElement element
    CIP.imageToCanvas(image);
     
    /* resizing */
     
    // resize base64-string
    // returns promise with base64 string
    CIP.resizeImage64(base64, newWidth, newHeight);
     
    // resize image (HTMLImageElement instance)
    // returns base64 string
    CIP.resizeImage(image, newWidth, newHeight);
     
    /* cropping */
     
    // cropping image from base64-image string
    // returns promise with base64 string
    CIP.cropImage64(base64, x, y, newWidth, newHeight);
     
    // cropping image (HTMLImageElement instance)
    // returns base64 string
    CIP.cropImage(image, x, y, newWidth, newHeight);
     
    /* calculations */
     
    // calculating parameter for vertical crop
    // returns array like [[x, y, newWidth, newHeight]...]
    CIP.calculateVerticalCrop((imageWidth = 0), (imageHeight = 0), (items = 0));
     
    // calculating parameter for horizontal crop
    // returns array like [[x, y, newWidth, newHeight]...]
    CIP.calculateHorizontalCrop((imageWidth = 0), (imageHeight = 0), (items = 0));

    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)

    Install

    npm i canvas_image_processing

    DownloadsWeekly Downloads

    18

    Version

    0.0.5

    License

    MPL-2.0

    Unpacked Size

    25.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • kopylovvlad