比 PSD.js 更强的下一代 PSD 解析器,支持 WebAssembly

比 PSD.js 更强的下一代 PSD 解析器,支持 WebAssembly

1.什么是 @webtoon/ps

@webtoon/ps 是 Typescript 中轻量级 Adobe Photoshop .psd/.psb 文件解析器,对 Web 浏览器和 NodeJS 环境提供支持,且做到零依赖。

Fast zero-dependency PSD parser for the web and Node.js

@webtoon/ps 使用标准 ES2015+ 功能,因为零依赖性使其比其他 PSD 解析器(ag-psd:200 KiB,PSD.js:443 KiB)更小,压缩后只有大约 100 KiB,同时使用 WebAssembly 来加速图像数据的解码。

目前 Chrome>=57、Firefox>=52、Safari>=11、Edge>=79、Node>=12 版本都已经支持。@webtoon/ps 在 Github 通过 MIT 协议开源,有超过 1.1k 的 star,是一个值得关注的前端开源项目。

2.如何使用 @webtoon/ps

浏览器环境使用

@webtoon/psd 作为纯 ECMAScript 模块提供,但是必须与 Webpack 或 Rollup 等捆绑器捆绑。 @webtoon/psd 将 PSD 文件读取为 ArrayBuffer,开发者可以使用 FileReader 或 File 加载 PSD 文件:

import Psd from "@webtoon/psd";
const inputEl: HTMLInputElement = document.querySelector("input[type='file']");
inputEl.addEventListener("change", async () => {const file = inputEl.files[0];const result = await file.arrayBuffer();const psdFile = Psd.parse(result);// 获取包含 PSD 或 PSB 文件的 ArrayBuffer// 并返回一个新的 Psd 对象const canvasElement = document.createElement("canvas");const context = canvasElement.getContext("2d");const compositeBuffer = await psdFile.composite();const imageData = new ImageData(compositeBuffer,psdFile.width,psdFile.height);canvasElement.width = psdFile.width;canvasElement.height = psdFile.height;context.putImageData(imageData, 0, 0);document.body.append(canvasElement);
});

为了提高性能,非常建议在 Web Worker 而不是主线程中解析 PSD 文件。

NodeJS 环境使用

@webtoon/psd 不支持 Node.js 缓冲区,开发者必须显式提供底层 ArrayBuffer。

import * as fs from "fs";
import Psd from "@webtoon/psd";const psdData = fs.readFileSync("./my-file.psd");
// 在 Buffer 中传递 ArrayBuffer 实例
const psdFile = Psd.parse(psdData.buffer);

由于 @webtoon/psd 是作为 ES 模块提供的,因此开发者必须使用动态 import() 或捆绑器在 CommonJS 代码中运行:

const Psd = await import("@webtoon/psd");

3.图层遍历

Psd 对象是包含图层和组(即图层组)对象的树,其提供了一个 Children 属性,是顶级图层和组的数组。

每个 Group 对象都提供一个 Children 属性,是直接属于当前图层组的图层和组的数组。Psd、Group 和 Layer 对象提供了一个类型字段,可用于区分每种类型:

import Psd, {Node} from "@webtoon/psd";
// 递归遍历图层和组
function traverseNode(node: Node) {if (node.type === "Layer") {// 图层} else if (node.type === "Group") {// 组} else if (node.type === "Psd") {// PSD 类型} else {throw new Error("Invalid node type");}node.children?.forEach((child) => traverseNode(child));
}
traverseNode(psdFile);

Psd 对象还提供了 layers 属性,是图像中所有 Layer(包括嵌套的)的数组。

for (const layer of psdFile.layers) {doSomething(layer);
}

4.解码图像数据

开发者可以使用 Psd.prototype.composite() 和 Layer.prototype.composite() 解码整个图像或单个图层的像素信息。

请注意,要使 Psd.prototype.composite() 正常工作,PSD/PSB 文件需要以 “最大化兼容性” 模式保存。 否则,将不返回任何数据。

// 解码整个图像
pixelData = await psd.composite();// 提取图层的像素数据,并应用所有图层和图层组效果
// (currently, only the opacity is supported)
layerPixelData = await layer.composite();
// 提取图层的像素数据,仅应用图层自身的效果
layerPixelData = await layer.composite(true, false);
// 提取图层的像素数据,无任何效果
layerPixelData = await layer.composite(false);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/314188.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openWebUI+ollamawindows+不用docker+webLite本地安装

openWebUI & ollama & windows & 不用docker & webLite 本地安装 总结一下安装教程 10核CPU16G内存 两个web框架都可以,先说简单的 ollama-webui-lite(https://github.com/ollama-webui/ollama-webui-lite) 轻量级,只使用nodejs 先装…

【介绍下如何使用CocoaPods】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

模板(二)

文章目录 模板(二)1 非类型模板参数2. 模板的特化2.1. 概念2.2 函数模板特化2.3 类模板特化2.3.1 全特化2.3.2 偏特化2.3.3 类模板特化应用示例 3 模板的分离编译3.1 什么是分离编译3.2 模板的分离编译3.3 解决方法 4. 模板总结 模板(二&…

20.Nacos集群搭建

模拟Nacos三个节点,同一个ip,启动三个不同的端口: 节点 nacos1, 端口:8845 节点 nacos2, 端口:8846 节点 nacos3, 端口:8847 1.搭建数据库,初始化数据库表结构 这里我们以单点的数据库为例 首先新建一…

vue与Spring boot数据交互例子【简单版】

文章目录 什么是Vue?快速体验Vueaxios是什么?向Springboot后端发送数据接收Springboot后端数据小结 什么是Vue? 官网解释:Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上…

黑马微服务课程1

目录 一、GateWay 二、服务调用OpenFeign 三、Sentinel 1. 流量控制(限流规则) 2. 隔离和降级 2.1 FeignClient整合Sentinel 2.2 线程隔离(舱壁模式) 2.3 熔断降级 3. 授权规则 3.1 授权规则 3.2 自定义异常结果 4. 规…

功能测试前景揭秘:会被淘汰吗?

在当今快速发展的信息时代,软件已经成为我们工作、学习乃至生活中不可或缺的一部分。随着技术的不断进步和应用的广泛普及,软件测试作为保障软件质量和功能实现的关键步骤,其职业发展路径也受到了广泛的关注。特别是针对功能测试这一细分领域…

T1级,生产环境事故—Shell脚本一键备份K8s的YAML文件

大家好,我叫秋意零。 最近对公司进行日常运维工作时,出现了一个 T1 级别事故。导致公司的“酒云网”APP的无法使用。我和我领导一起搞了一个多小时,业务也停了一个多小时。 起因是:我的部门直系领导,叫我**删除一个 …

计算机视觉 CV 八股分享 [自用](更新中......)

目录 一、深度学习中解决过拟合方法 二、深度学习中解决欠拟合方法 三、梯度消失和梯度爆炸 解决梯度消失的方法 解决梯度爆炸的方法 四、神经网络权重初始化方法 五、梯度下降法 六、BatchNorm 七、归一化方法 八、卷积 九、池化 十、激活函数 十一、预训练 十二…

MemFire解决方案-物联网数据平台解决方案

方案背景 随着各种通讯、传感技术发展,数据通讯成本的急剧下降,数以万亿计的智能设备(智能手环、智能电表、智能手机、各种传感器设备等)接入网络,并源源不断的产生海量的实时数据。这些海量数据的价值挖掘&#xff0…

【算法基础实验】图论-基于DFS的连通性检测

基于DFS的连通性检测 理论基础 在图论中,连通分量是无向图的一个重要概念,特别是在处理图的结构和解析图的组成时。连通分组件表示图中的一个子图,在这个子图中任意两个顶点都是连通的,即存在一条路径可以从一个顶点到达另一个顶…

【Webgl_glslThreejs】搬运分享shader_飘落心形

来源网站 https://www.shadertoy.com/view/4sccWr效果预览 代码演示 将shadertory上的代码转成了threejs可以直接用的代码,引入文件的material,并在创建mesh或已有物体上使用material即可,使用时请注意uv对齐。 import { DoubleSide, Shad…

深度学习从入门到精通—Transformer

1.绪论介绍 1.1 传统的RNN网络 传统的RNN(递归神经网络)主要存在以下几个问题: 梯度消失和梯度爆炸:这是RNN最主要的问题。由于序列的长距离依赖,当错误通过层传播时,梯度可以变得非常小(消失…

(MSFT.O)微软2024财年Q3营收619亿美元

在科技的浩渺宇宙中,一颗璀璨星辰再度闪耀其光芒——(MSFT.O)微软公司于2024财政年度第三季展现出惊人的财务表现,实现总营业收入达到令人咋舌的6190亿美元。这一辉煌成就不仅突显了微软作为全球技术领导者之一的地位,更引发了业界内外对这家…

第十五届蓝桥杯题解-数字接龙

题意:经过所有格子,并且不能进行交叉,走的下一个格子必须是当前格子值1%k,输出路径最小的那一条(有8个方向,一会粘图) 思路:按照8个方向设置偏移量进行dfs,第一个到达终…

C/C++ 入门(7)string类(STL)

个人主页:仍有未知等待探索-CSDN博客 专题分栏:C 请多多指教! 目录 一、标准库中的string 1、了解 2、string类常用接口说明 1、常见的构造函数 2、容量操作 ​编辑 3、访问及遍历操作 4、修改操作 5、非成员函数 二、string类实现 …

LeetCode57. 插入区间

LeetCode57.插入区间 题目思路: 代码 /* 前置知识&#xff1a; vector<vector<int>> a,b; 二维vector数组是可以将二维中的一维vector数组给push_back的&#xff0c; 不是只有单个元素才可以&#xff0c;整个一维的vector数组也可以 b[0] {1,2,3},b[1] {4,5,6}…

【AIGC调研系列】大型语言模型如何减少幻觉生成

在解读大型语言模型&#xff08;LLMs&#xff09;中的长格式事实性问题时&#xff0c;我们首先需要认识到这些模型在生成内容时可能会产生与既定事实不一致的情况&#xff0c;这种情况通常被称为“幻觉”[2][3]。这种现象不仅可能导致信息的误传&#xff0c;还可能对社会造成误…

封装 H.264 视频为 FLV 格式然后推流

封装 H.264 视频为 FLV 格式并通过 RTMP 推流 flyfish 协议 RTMP (Real-Time Messaging Protocol) RTSP (Real Time Streaming Protocol) SRT (Secure Reliable Transport) WebRTC RTMP&#xff08;Real Time Messaging Protocol&#xff09;是一种用于实时音视频流传输的协…

indexDB 大图缓存

背景 最近在项目中遇到了一个问题&#xff1a;由于大屏背景图加载速度过慢&#xff0c;导致页面黑屏时间过长&#xff0c;影响了用户的体验。从下图可以看出加载耗时将近一分钟 IndexDB 主要的想法就是利用indexDB去做缓存&#xff0c;优化加载速度&#xff1b;在这之前&am…