Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sasensi opened this issue Nov 16, 2023 · 1 comment
Assignees

Comments

@sasensi
Copy link

sasensi commented Nov 16, 2023

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 Agamnentzar self-assigned this Nov 16, 2023
@Agamnentzar
Copy link
Owner

Published version 19.0.0 with fixes for the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants