Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/451.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在NodeJS中使用图像切片?_Javascript_Node.js_Slice_Cairo_Node Canvas - Fatal编程技术网

Javascript 如何在NodeJS中使用图像切片?

Javascript 如何在NodeJS中使用图像切片?,javascript,node.js,slice,cairo,node-canvas,Javascript,Node.js,Slice,Cairo,Node Canvas,我尝试使用节点js使用图像切片将图像分割成多个部分 我尝试将npm I映像安装到切片、sudo端口安装cairo、npm I canvas和brew安装pkg config cairo pango libpng jpeg giflib,但仍然在服务器端node.js上显示错误要求节点画布 以下是我尝试切片的图像: var imageToSlices = require('image-to-slices'); exports.sliceImage=(request, response)=&g

我尝试使用节点js使用图像切片将图像分割成多个部分

我尝试将npm I映像安装到切片、sudo端口安装cairo、npm I canvas和brew安装pkg config cairo pango libpng jpeg giflib,但仍然在服务器端node.js上显示错误要求节点画布

以下是我尝试切片的图像:

 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)

在我发现的代码中,通过在配置中使用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!');
});

在我发现的代码中,通过在配置中使用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!');
});

试着解释一下你想要达到的目标。这对给出有价值的答案很有帮助。@maxpaj刚刚添加了代码,在运行node js文件时将图像切片到多个图像中,它显示了错误。您能在node modules文件夹中看到node canvas或canvas包吗?该错误确实表明节点画布不可用。画布模块存在,但节点画布不存在@maxpaj@maxpaj图像到切片npmTry也解释了您想要实现的目标。这对给出有价值的答案很有帮助。@maxpaj刚刚添加了代码,在运行node js文件时将图像切片到多个图像中,它显示了错误。您能在node modules文件夹中看到node canvas或canvas包吗?该错误确实表明节点画布不可用。画布模块存在,但节点画布不存在@maxpaj@maxpaj要切片的图像npmthanks用于共享此图像。我们怎么能把一个图像分成六个大小相等的部分呢?@IbadShaikh我不知道,但你可以写一个关于它的新问题!我使用:var-lineXArray=[350650]var-lineYArray=[375]完成了这项工作,谢谢分享。我们怎么能把一个图像分成六个大小相等的部分呢?@IbadShaikh我不知道,但你可以写一个关于它的新问题!我使用:var-lineXArray=[350650]var-lineYArray=[375]