javascript - ReferenceError: window is not defined when using mergeImages in express.js

Question

I'm using mergeImages on my express.js server but I'm getting error of "ReferenceError: window is not defined". I don't know what it's saying. Even I haven't used window word in my code. Please check my code of server.js. at the end of the code I have mergeimage function.

const express = require('express');
const app = express();
const fs = require('fs'); 
const mergeImages = require('merge-images');
const bodyParser = require('body-parser');
const multer = require('multer');
const { response } = require('express');
const cors = require('cors');

app.use(cors());

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.json());      
app.use(bodyParser.urlencoded({    
  extended: true
}));

app.get('/', (req,res) => {
    res.send('this is express!');
})

app.listen(8000, (err) =>{
    if(err) console.log(err);
    console.log('Server Started please listen to port: 8000');
})

app.get('/get-image', function(req,res,next){ 
    const pixel_base_value = 1.31;
    const top_margin = 5;
    const left_margin = 3;
    var photo_frame = [];
    for(var j = 1; j <= req.query.row; j++){
      var total_width_check = 0;
      var total_height_check = 0;
      for(var k= 1; k <= req.query.col; k++){
          var height_cal =  req.query.photo_height*pixel_base_value;

          var width_cal = req.query.photo_width*pixel_base_value;

          if(j !== 1){
              var top1 = top_margin + height_cal + 3;
          }else{
              top1 = top_margin;
          }
          if(k !== 1){
              var left1 =  (width_cal * (k-1) + (left_margin * k));
          }else{
              left1 = left_margin;
          }
          total_width_check = total_width_check + req.query.photo_width*pixel_base_value + left_margin;

          total_height_check = total_height_check + req.query.photo_height*pixel_base_value + top_margin;

          if(total_width_check >= req.query.board_width*pixel_base_value-3 && total_height_check >= req.query.board_height*pixel_base_value-3){   

          }else{
              photo_frame.push({src:'http://localhost:8000/image/'+ req.query.img_name +'', x: left1, y: top1, width: width_cal, height: height_cal});
          }
      }
      total_width_check = 0;
  }
  //check photo_frame is a valid Array
  mergeImages(photo_frame).then((b64) =>{ //add options here for canvas
    console.log(b64)
  },(error) =>{
    console.log(error);
  } );
  return res.end('done');
})

Please help!

Thanks!

question from:https://stackoverflow.com/questions/66058289/referenceerror-window-is-not-defined-when-using-mergeimages-in-express-js

Answer 1

I think for node usage, you should add node-canvas and pass it via option object. Currently, you are not using the canvas.

const mergeImages = require('merge-images');
const { Canvas, Image } = require('canvas'); // import this

mergeImages(['./body.png', './eyes.png', './mouth.png'], {. //pass Valid images in array
  Canvas: Canvas, // here you need to add canvas
  Image: Image
})
  .then(b64 => ...);

For sample project in Node.js, you can check here