2

I tried using image-slice to slice into multiple part using node js.

I tried installing npm i image-to-slices, sudo port install cairo, npm i canvas and brew install pkg-config cairo pango libpng jpeg giflib but still show error require node-canvas on the server side node.js

Here is the i have tried to slice image:

 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

Console output error:

 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
  • 6,029
  • 5
  • 35
  • 56
PvDev
  • 791
  • 21
  • 67
  • Try explaining what you want to achieve also. That helps a lot to give a valuable answer. – maxpaj Aug 16 '18 at 10:26
  • @maxpaj just added code to slice image to multiple image while running node js file it shows error.. – PvDev Aug 16 '18 at 10:28
  • Can you see `node-canvas` or `canvas` package in your `node-modules` folder? The error indicates indeed that node-canvas is not available. – maxpaj Aug 16 '18 at 10:33
  • canvas module is there but not node-canvas was not there @maxpaj – PvDev Aug 16 '18 at 10:36
  • @maxpaj https://www.npmjs.com/package/image-to-slices image to slice npm – PvDev Aug 16 '18 at 10:38
  • If `canvas` is installed correctly, you should be able to do `const canvas = require("canvas"); if (canvas && canvas.Image) { console.log("Canvas is installed!"); } else { console.log("Canvas is not installed yet."); }` – maxpaj Aug 16 '18 at 10:41
  • @maxpaj it shows Canvas is installed! – PvDev Aug 16 '18 at 10:43
  • @maxpaj any updates – PvDev Aug 16 '18 at 10:56

1 Answers1

5

Digging around in the code I found that you can specify which canvas you want to use, through the use of clipperOptions in the configuration.

Try this:

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
  • 6,029
  • 5
  • 35
  • 56