如何在节点 js 中使用图像切片？

Posted 2023-03-14

【中文标题】如何在节点 js 中使用图像切片？

【英文标题】：How to use image-slice in node js?

【发布时间】：2019-01-23 06:45:34

【问题描述】：

我尝试使用 image-slice 使用节点 js 将其分成多个部分。

我尝试在服务器端 node.js 上安装 npm i image-to-slices、sudo port install cairo、npm i canvas 和 brew install pkg-config cairo pango libpng jpeg giflib，但仍然显示错误 require node-canvas

这是我尝试切片的图像：

 var imageToSlices = require('image-to-slices');

 exports.sliceImage=(request, response)=>


var lineXArray = [100, 200];
var lineYArray = [100, 200];
var source = './public/images/Bitmap001.png'; // width: 300, height: 300

 imageToSlices(source, lineXArray, lineYArray, 
 saveToDir: './public/images/bit001.png'
 , function() 
 console.log('the source image has been sliced into 9 sections!');
  );


  //sliceImage

控制台输出错误：

 Error: Require node-canvas on the server-side Node.js
at ImageClipper.__createImage (/Users/parameshv/pyrky_nodejs/node_modules/image-clipper/lib/clipper.js:456:13)
at ImageClipper.loadImageFromUrl (/Users/parameshv/pyrky_nodejs/node_modules/image-clipper/lib/clipper.js:83:20)
at ImageClipper.image (/Users/parameshv/pyrky_nodejs/node_modules/image-clipper/lib/clipper.js:120:10)
at imageClipper (/Users/parameshv/pyrky_nodejs/node_modules/image-clipper/lib/index.js:36:15)
at ImageToSlices.slice (/Users/parameshv/pyrky_nodejs/node_modules/image-to-slices/lib/image-to-slices.js:212:3)
at ImageToSlicesFactory (/Users/parameshv/pyrky_nodejs/node_modules/image-to-slices/lib/index.js:22:17)
at exports.sliceImage (/Users/parameshv/pyrky_nodejs/app/controllers/ApiController.js:843:1)
at Layer.handle [as handle_request] (/Users/parameshv/pyrky_nodejs/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/parameshv/pyrky_nodejs/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/parameshv/pyrky_nodejs/node_modules/express/lib/router/route.js:112:3)

【问题讨论】：

试着解释你想要达到的目标。这有助于提供有价值的答案。

@maxpaj 刚刚在运行节点 js 文件时添加了将图像切片到多个图像的代码，它显示错误..

您能在您的node-modules 文件夹中看到node-canvas 或canvas 包吗？该错误确实表明 node-canvas 不可用。

canvas 模块存在但 node-canvas 不存在@maxpaj

@maxpaj npmjs.com/package/image-to-slices 图像对 npm 进行切片

【参考方案1】：

在代码中挖掘我发现你可以指定你想使用哪个canvas，通过在配置中使用clipperOptions。

试试这个：

var imageToSlices = require('image-to-slices');
var lineXArray = [100, 200];
var lineYArray = [100, 200];
var source = './public/images/Bitmap001.png'; // width: 300, height: 300

imageToSlices(source, lineXArray, lineYArray, 
    saveToDir: '.',
    clipperOptions: 
        canvas: require('canvas')
        
, function() 
    console.log('the source image has been sliced into 9 sections!');
);

【讨论】：

感谢分享。我们如何将一张图片分成六块大小相等的部分？

@IbadShaikh 我不知道，但你可以写一个关于它的新问题！

我使用 var lineXArray = [350, 650] var lineYArray = [375]

嗨@maxpaj。有什么方法可以要求 canvas 使用导入语法，因为在我的项目中我使用的是 "type": "module" es6 import 语法。

不知道，应该可行。你试过import * as canvas from "canvas"吗？