How to create a mockup on the server

363 views Asked by At

I am trying to create a mockup for a pillow on a server so that when user add image I can use this mockup to make his image take the shape of the pillow and send the new image to the client I have tried some packages like ( 'jimp' , 'image-clipper' , 'canvas')

I tried o use a pillow.png image and I thought there could be a way to fill it with another image and taking the pillow shape but I didn't get that result

  • it keep sending me the pillow image alone without the other image I have added
  • the pillow Image = 2.png , the mockup
  • the other image = 3.png , image I want to fill the mockup with

Is there is any package I can use for that or another way I can try to accomplish that

This is my code for canvas ,I am working on NodeJS

    const { createCanvas, loadImage ,Image} = require('canvas')
    const canvas = createCanvas(500, 500)
    const ctx = canvas.getContext('2d')
    app.post('/image', async (req,res) => {
       loadImage('./2.png').then((image) => {
        ctx.drawImage(image, 50, 0, 400, 300)
      
        var img  = new Image();
        img.src = './3.png'
        var pattern = ctx.createPattern(img, "repeat");
        ctx.fillStyle = pattern
        ctx.fill();
        res.json(canvas.toDataURL())
      })
});
0

There are 0 answers