lukechilds / merge-images

Easily compose images together without messing around with canvas
MIT License
1.69k stars 162 forks source link

Image positioning not working? #107

Closed alucard87pl closed 3 years ago

alucard87pl commented 3 years ago

I'm having trouble with positioning my images in a resulting stitched image:

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

imgList =
[
  './assets/dice/d4b.png',
  './assets/dice/d5b.png',
  './assets/dice/d3r.png' 
]
//all these images are 67x67

mergeImages(
    imgList,
    { Canvas: Canvas, 
      Image: Image, 
      width: 201,
      height: 201
    },
    { src: imgList[0], x: 0, y: 0 },
    { src: imgList[1], x: 67, y: 67 },
    { src: imgList[2], x: 134, y: 134 }
)
    .then((img) => console.log(img));

I would understand that when I paste the resulting base64, I would get a 201x201 square, with the three images aligned diagonally, top to bottom, left to right, but all I'm getting is a white 201x201 square with only d3r.png (so the last applied image) in the top left.

alucard87pl commented 3 years ago

I figured it out literally a moment after I posted:


mergeImages(
[
        { src: imgList[0], x: 0, y: 0 },
        { src: imgList[1], x: 67, y: 67 },   //Array of Objects with paths and positioning
        { src: imgList[2], x: 134, y: 134 }
    ],
        {
            Canvas: Canvas, //options
            Image: Image,
            width: 201,
            height: 201
        },
    )