将 PSD 导入画布

Question

我正在使用 fabricjs 构建一个应用程序来创建自定义产品。

我想知道我们是否可以将 PSD 文件直接导入画布？

就像所有图层都会自动转换为画布对象并设置适当的属性。

谢谢 拉胡尔

Answer 1

PSD 与 PNG、JPEG 或 GIF 文件并不完全相同，但如果浏览器制造商愿意，可以轻松地在不同程度上支持它并不牵强。

PSD 不同于其他格式。其他图形格式专为通过网络传输而设计。 PNG 代表便携式网络图形。 GIF 代表图形交换格式。 JPEG 代表联合摄影专家组。

对比：

PSD 文件存储支持大多数映像选项的映像 在 Photoshop 中可用。这些包括带有蒙版、透明度的图层， 文本、Alpha 通道和专色、剪切路径和双色调 设置。

PSD 不仅包含构成图片的合成图层，还包含用于创建合成图像的所有图层。

将 PSD 文件与 PSD 的 JPEG 导出文件进行比较。 JPEG 的文件大小最终可能为 50 到 100kb。 PSD的文件大小可能是1mb>2GB。使用 PSD，您可以继续添加层层信息。

我认为目前人们在浏览器中不使用 PSD 有几个原因：

1. 与其他格式相比太重了（1MB+ vs 50kb）
2. psd 格式难以解析。该规范未公开
3. psd 格式的解析时间比其他格式长得多
4. 您必须要求使用 Photoshop 才能创建 PSD 内容
5. 未开放格式，因此无法扩展、无法修复错误、无法升级
6. 如果存在时间上的竞争和更好的格式，那么添加对 PSD 的支持将是一个倒退

至于如何在浏览器中加载 PSD，我认为这是可能的，但需要一些工作才能到达那里。您将需要能够以字节数组的形式读取文件，然后能够创建位图数据。

PSDParser 类是一组 ActionScript3 类，可以将 PSD 文件解析为 PSD 层数组。这些 PSD 图层具有位图数据、大小、位置等。使用该信息将这些位图图像绘制到画布上。

顺便说一句，ActionScript3 是 JavaScript 的兄弟。大约 90% 的代码可以互换。

Answer 2

是的，它可以将 PSD 转换为画布（fabricjs 的 json）

将PSD转Canvas转PDF/SVG/PNG/JPEG/JSON的工具构建过程

1. psd.rb/psd.js这些PSD解析器库用于解析导入的PSD，并将其转换为画布对象。
2. 迭代 PSD 对象的层。
3. 将对象添加到画布中
4. 对添加的对象进行排序。

更多细节可以在 https://www.codementor.io/kpomservices/how-and-why-i-built-tool-to-convert-psd-to-canvas-to-pdf-svg-png-jpeg-json-ykakhws33