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())
})
});