Agamnentzar / ag-psd

Javascript library for reading and writing PSD files
Other
489 stars 66 forks source link

Using `vectorMaskFeather` produces corrupted file when a bitmap layer is present in the document #158

Open sasensi opened 9 months ago

sasensi commented 9 months ago

Hello and thank you again for the amazing work with this library.

I recently discovered Photoshop mask "feather" feature and also found that it is available in the library, via the vectorMaskFeather property.
But when doing some experiments with it, I noticed that using it sometimes leads to producing corrupted files.
I was able to reduce the issue to this:

import CanvasUtil from 'canvas';
import fs from 'fs-extra';
import { writePsdBuffer } from 'ag-psd';
import open from 'open';
import 'ag-psd/initialize-canvas.js';

const SHOW_BUG = true;

(async () => {
  const image = await CanvasUtil.loadImage(fs.readFileSync('./image.png'));
  const canvas = CanvasUtil.createCanvas(image.width, image.height);
  canvas.getContext('2d').drawImage(image, 0, 0);

  const document = {
    width: 821,
    height: 523,
    children: [
      {
        name: 'Circle',
        mask: SHOW_BUG ? { fromVectorData: true, vectorMaskFeather: 5 } : undefined,
        vectorFill: { type: 'color', color: { r: 0, g: 0, b: 255 } },
        vectorMask: {
          paths: [
            {
              knots: [
                { points: [78, 162.1389086942608, 78, 124.02013999999997, 78, 85.90136716453082] },
                { points: [108.90136716453082, 55, 147.02013999999997, 55, 185.13890869426086, 55] },
                { points: [216.04027999999994, 85.90136716453082, 216.04027999999994, 124.02013999999997, 216.04027999999994, 162.1389086942608] },
                { points: [185.13890869426086, 193.04028, 147.02013999999997, 193.04028, 108.90136716453082, 193.04028] },
              ],
            },
          ],
        },
      },
      {
        name: 'Image',
        left: 296,
        top: 271,
        right: 476,
        bottom: 361,
        canvas,
      },
    ],
  };

  const buffer = writePsdBuffer(document);
  const filePath = 'output.psd';
  fs.writeFileSync(filePath, buffer);
  open(filePath);
})();

The image referenced in the code is this one: image

You can toggle the SHOW_BUG variable to compare with and without the bug happening.

I experimented this with node 16.13.0 and library version 18.0.1.

Otherwise, the feature seems to be working well, as long as there no layer with a canvas property in the document.

Hopping you can help with this, thanks in advance !

Agamnentzar commented 9 months ago

Published version 19.0.0 with fixes for the issue.