如何在 nodejs 中裁剪屏幕截图或图像 (.png)？

Question

考虑图像文件 .png
假设您有一些元素的 xy 线，例如 x:400、y:500
假设您有要裁剪的图像尺寸：宽度：50，高度：20

我有以下来自 nodejs pack easyimage 的片段，我也安装了 ImageMagick。 当我运行下面的代码时，它只是通过但无法裁剪图像。

 easyimage.crop({
 src: 'F:/screenshot.png', //contains fullscreen image
 dst: 'F:/screenshot.png', //expect for a new image with cropped name
 x: 400,
 y: 500,
 cropwidth: 50,
 cropheight:20,
 gravity: 'North-West'
 },
 function(err, stdout, stderr) {
 if (err) throw err;
 });

Answer 1

我为此使用 sharp，效果很好

试试这个

const sharp = require('sharp')

sharp('./kangta.jpg')
    .extract({ left: 0, top: 0, width: 100, height: 100 })
    .toFile('./kangta.new.jpg', function (err) {
        if (err) console.log(err);
    })

尖锐：https://www.npmjs.com/package/sharp

Answer 2

在这里，我使用 Puppeteer 屏幕截图扩展了上面给出的示例，该屏幕截图使用 Sharp 将 split/cropped 转换为多个图像：

const puppeteer = require('puppeteer');

const sharp = require('sharp');

// original image
let originalImage = 'originalImage.jpg';

// file name for cropped image
let outputImage = 'croppedImage.jpg';

let outputConcat = '';

async function run(){
    const browser = await puppeteer.launch({headless:true})
    const page = await browser.newPage();
    await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1,
    });
    await page.goto('https://en.wikipedia.org/wiki/Main_Page');
    await page.screenshot({path: 'originalImage.jpg', fullPage:true});
    await browser.close();
        
    var sizeOf = require('image-size');
    var dimensions = sizeOf('originalImage.jpg');

    console.log(dimensions.width, dimensions.height);

    const printText = (newHeight, newTop, imageIndex) => {      
        console.log('newHeight: ' + newHeight + ', newTop: ' + newTop + ', imageIndex: ' + imageIndex);
    };

    const cropImage = (newHeight, newTop, imageIndex) => {
          sharp('originalImage.jpg')
          .extract({left: 0, width: dimensions.width, height: newHeight, top: newTop})
          .toFile(outputConcat.concat(imageIndex, outputImage))
        };

    var remainingTop = dimensions.height;
    var cumulitiveTop = 0;

    var amountOfImages = Math.ceil(dimensions.height / 1080);

    for (let i = 0; i < amountOfImages; i++) 
    {
        if(remainingTop >= 1080)
        {           
            cropImage(1080, cumulitiveTop, i);
            //printText(1080, cumulitiveTop, i); 
        }
        else
        {
            cropImage(remainingTop, dimensions.height - remainingTop, i);
            //printText(remainingTop, dimensions.height - remainingTop, i); 
            
            break;
        }
        
        remainingTop = remainingTop - 1080;
        cumulitiveTop += 1080;
    }   
};

run();

如何在 nodejs 中裁剪屏幕截图或图像 (.png)？

How to crop screenshot or image (.png) in nodejs?

javascript

imagemagick

image-processing

node.js

easyimage