将 PSD 导入画布

Question

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

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

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

谢谢 拉胡尔

Answer 1

PSD 与 PNG、JPEG 或 GIF 文件不太一样，但如果浏览器制造商愿意的话，可以轻松地在不同程度上支持 PSD，这并不牵强。

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

对比：

A 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