Canvas 将PSD导入画布

Canvas 将PSD导入画布,canvas,fabricjs,psd,Canvas,Fabricjs,Psd,我正在使用fabricjs构建一个应用程序来创建定制产品 我想知道我们是否可以将PSD文件直接导入画布 与此类似,所有图层都会自动转换为画布对象,并使用适当的属性进行设置 谢谢 RahulPSD与PNG、JPEG或GIF文件并不完全相同,但如果浏览器制造商愿意,可以说它可以在不同程度上轻松支持,这并不牵强 PSD与其他格式不同。其他图形格式是专门为通过网络传输而设计的。代表便携式网络图形。表示图形交换格式。代表联合摄影专家组 相比之下: 文件存储支持大多数成像选项的图像 在Photoshop中提

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

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

与此类似,所有图层都会自动转换为画布对象,并使用适当的属性进行设置

谢谢
Rahul

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

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

相比之下:

文件存储支持大多数成像选项的图像 在Photoshop中提供。其中包括带遮罩的图层、透明度、, 文本、alpha通道和专色、剪裁路径和双色调 设置

PSD不仅包含组成图片的合成层,还包含用于创建该合成图像的所有层

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

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

  • 与其他格式相比太重(1MB+vs 50kb)
  • psd格式很难解析。该规范尚未公开
  • psd格式比其他格式需要更长的解析时间
  • 您必须要求photoshop创建PSD内容
  • 未打开格式,因此无法扩展、无法修复错误、无法升级
  • 如果存在对时间和更好格式的竞争,那么增加对PSD的支持将是一种倒退
  • 至于如何在浏览器中加载PSD,我认为这是可能的,但需要一些工作才能实现。您需要能够以字节数组的形式读入文件,然后才能创建位图数据

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


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

    是可以将PSD转换为画布(json用于fabricjs)

    构建将PSD转换为画布并转换为PDF/SVG/PNG/JPEG/JSON的工具的过程

  • psd.rb/psd.js这些psd解析器库用于解析导入的psd,并将其转换为画布对象
  • 迭代PSD对象的层
  • 将对象添加到画布中
  • 对添加的对象进行排序
  • 有关更多详细信息,请参阅

    欢迎使用Stack Overflow:-)您可以在您的问题中添加您当前拥有的任何代码。实际上,我正在启动应用程序,只是想知道这样的事情是否可能Hi@Rahul,不幸的是,Stack Overflow不是这样工作的。有关一些指导原则,请参见。通常情况下,堆栈溢出是针对与您已经编写的代码直接相关的非常特定的问题提出问题。对于一般的架构,请考虑在BTW上发布,您应该将您的PDS导出为SVG,然后通过FuffjJiSrAuHul欢迎到堆栈溢出将SVG导入到画布中。你的问题很好。我认为这是可能的,但这需要一些工作。我不知道有哪个JS库可以做到这一点,但是有一个ActionScript3库。如果浏览器在其API中支持字节数组和位图数据,那么这应该是可能的。我在下面的答案中添加了更多信息。