Latest version of sharp breaks slider puzzle piece

[stevenmunro]

Great little plugin, loving it.

This package uses "sharp": "^0.25.4",

If I upgrade sharp to the latest version, the slider png returned from the create function is completely transparent. I haven't been able to pinpoint where in the composition process how this is happening. My knowledge of sharp is limited at this stage.

If anyone knows what the (I would imagine.. "small") fix would be, please share.

[badboy-tian]

+1

[badboy-tian]

downgrade to "sharp": "0.27.0",

[bung87]

same as "sharp": "^0.29.3", and "sharp": "^0.30.4",

[bung87]

found composite and extract must seperate to two steps

  const ins = sharp(image)
  .resize({ width: sizes.WIDTH, height: sizes.HEIGHT })
  return ins
      .composite([
        {
          input: overlay,
          blend: 'over',
          top: location.top,
          left: location.left,
        },
      ])
      .png()
      .toBuffer()
      .then(async (background) => {
        const composed = await ins
          .composite([
            {
              input: mask,
              blend: 'dest-in',
              top: location.top,
              left: location.left,
            },
            {
              input: outline,
              blend: 'over',
              top: location.top,
              left: location.left,
            },
          ]).toBuffer()
        return  sharp(composed).extract({
            left: location.left,
            top: 0,
            width: sizes.PUZZLE,
            height: sizes.HEIGHT,
          })
          .png()
          .toBuffer()
          .then((slider) => {
            return {
              data: {
                background,
                slider,
              },
              solution: location.left,
            };
          });
      });

[badboy-tian]

@bung87 the slider png returned from the create function is completely transparent use 0.33.3