Search code examples
javascriptcrop

Javascript crop image stored in buffer from coordinates


I found code that crops images in javascript using canvas but I need to crop an image that is never actually displayed anywhere since all I need is to get data from the image. There is a screenshot and then the buffered screenshot image needs to be cropped from specific coordinates.

The image is simply stored in a variable to begin with let img = new Image(). How could this code be modified to crop an image stored in the buffer only?

function resizeImage(url, width, height, x, y, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    // set canvas dimensions

    canvas.width = width;
    canvas.height = height;

    imageObj.onload = function () {
        context.drawImage(imageObj, x, y, width, height, 0, 0, width, height);
        callback(canvas.toDataURL());
    };

    imageObj.src = url;
}

Solution

  • Since no one answered I will post what I found. In the end I achieved what I needed using the library Sharp's extract feature.

    img.onload = resizeImg;
    img.src = 'image.png';
    
    function resizeImg() {
      this.path = this.path = 'image.png';
    
      sharp(this.path)
      .resize(this.width * 2, this.height * 2)
      .extract({ width: 100, height: 20, left: 250, top: 100 })
      .toBuffer({ resolveWithObject: true })
      .then(({ data, info }) => {
          //process data
      })
    }