Image composition is way slower in sharp than libvips

[antoniogamiz]

What are you trying to achieve?

I want to create a tile image with markers. That is, starting with a empty transparent PNG file of 256x256 pixels, I want to draw a certain amount of times another image (more little, maybe 18x25 pixels) on certain locations of that first PNG.

Have you searched for similar questions?

Yes, I even made a question in Stack Overflow.

Are you able to provide a minimal, standalone code sample that demonstrates this question?

import sharp from "sharp";
import fs from "fs";
const fsPromises = fs.promises;

const pinSvg = fs.readFileSync("./icon_web_pin_record_basic.svg");
const pinWidth = 18;
const pinHeight = 25;

const generateTile = async (locations) => {
  const images = generateImageFromLocationArray(locations);
  const buffer = await generatePng(images);
  await writePng(buffer);
  return buffer;
};

const generateImageFromLocationArray = (locations) => {
  const images = [];
  for (let i = 0; i < locations.length; i++) {
    const [x, y] = locations[i];
    images.push({
      input: pinSvg,
      blend: "overlay",
      left: x - Math.floor(pinWidth / 2),
      top: y - pinHeight,
    });
  }
  return images;
};

const generatePng = async (images) => {
  return await sharp({
    create: {
      width: 256,
      height: 256,
      channels: 4,
      background: { r: 0, g: 0, b: 0, alpha: 0 },
    },
  })
    .composite(images)
    .png()
    .toBuffer();
};

You would run that code as follows:

const getRandom = (min, max) => Math.random() * (max - min) + min;

const generateCoordinates = (n) => {
  const coordinates = [];
  for (let i = 0; i < n; i++) {
    const x = getRandom(0, 256);
    const y = getRandom(0, 256);
    coordinates.push([x, y]);
  }
  return coordinates;
};

const coordinates = generateCoordinates(n);
generateTile(coordinates);

The svg code for the image can be found in this gist.

Are you able to provide a sample image that helps explain the question?

The problem is the time it takes to generate the image. Also, I get a buffer error if I use more than 300 locations (which means overlapping more than 300 hundreds images).

[lovell]

Hi, did you see #2286 ?

[lovell]

Let's continue to track this at #2286