比 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.mzph.cn/news/829697.shtml

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

相关文章

2024 年最好的免费数据恢复软件,您可以尝试的几个数据恢复软件

由于系统崩溃而丢失数据可能会给用户带来麻烦。我们将重要的宝贵数据和个人数据保存在我们的 PC、笔记本电脑和其他数字设备上。您可能会因分区丢失、意外删除文件和文件夹、格式化硬盘驱动器而丢失数据。数据丢失是不幸的,如果您不小心从系统中删除了文件或数据&am…

深入理解 Srping IOC

什么是 Spring IOC? IOC 全称:Inversion of Control,翻译为中文就是控制反转,IOC 是一种设计思想,IOC 容器是 Spring 框架的核心,它通过控制和管理对象之间的依赖关系来实现依赖注入(Dependenc…

正点原子[第二期]ARM(I.MX6U)裸机篇学习笔记-1.2

前言: 本文是来自哔哩哔哩网站上视频“正点原子[第二期]Linux之ARM(MX6U)裸机篇”的学习笔记,在这里会记录下正点原子Linux ARM MX6ULL 开发板根据配套的哔哩哔哩学习视频所作的实验和笔记内容。本文大量的引用了正点原子哔哔哩网…

结构体内存对齐(未完成版)

前言 我们已经掌握了结构体的基本使用了。 现在我们深入讨论一个问题:计算机构体的大小。 这也是一个特别热门的考点:结构体内存对齐 练习导入 对齐规则

vue项目npm run build 打包之后如何在本地访问

vue项目npm run build 打包之后如何在本地访问 如果直接访问时,则会报错如下的信息: 报错码: Access to script at file:///D:/assets/index-DDVBfHVo.js from origin null has been blocked by CORS policy: Cross origin requests are on…

【转载】如何在MacBookPro上把Ubuntu安装到移动硬盘里过程记录

以下主要目的是记录安装过程中的问题,安装步骤等信息怕忘记 环境信息: Mac :macOS High Sierra 10.13.6 内存8G(Swap时用到) Ubuntu: ubuntu-22.04.4-desktop-amd64.ios 金士顿U盘:Kingston-64G 烧录软件:balenaEtcher…

牛客NC371 验证回文字符串(二)【简单 双指针 C++/Java/Go/PHP】

题目 题目链接: https://www.nowcoder.com/practice/130e1a9eb88942239b66e53ec6e53f51 思路 直接看答案,不难参考答案C class Solution {public:/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值即可…

Atlassian Jira 信息泄露漏洞(CVE-2019-3403) 排查思路

Atlassian Jira: 企业广泛使用的项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。 简述: 近日发现多个内网IP触发的Atlassian Jira 信息泄露漏洞的告警。 告警的检测规…

openvoice v2 声音克隆使用案例

参考: https://github.com/myshell-ai/OpenVoice/blob/main/docs/USAGE.md https://www.wehelpwin.com/article/4940 安装 1)下载OpenVoice项目安装 2)MeloTTS安装 参考:https://blog.csdn.net/weixin_42357472/article/details/136320097 pip install git+https://gith…

2398.预算内最多的机器人数目

我第一个手搓的hard的单调队列题目......灵神yyds 思路解析: 我做的时候感觉这个题目有点歧义,我以为他的连续运行是时间上连续,所以我开始写的代码是选择最多的子序列(可以不连续),使得不超过budget,这个求最多子序列的代码会在最后给出,不保证完全正确(因为没有太多测试点),…

element-ui et -i 编译默认主题报错:ReferenceError: primordials is not defined

报错信息如下 fs.js:40 } primordials;^ ReferenceError: primordials is not defined导致这个问题的原因:node和gulp版本冲突!! 我使用的是node 14版本 解决方法: 看了好几个帖子,都推荐使用node 11.15.0版本&am…

华为ensp中BGP(边界网关协议)基础原理及配置命令

作者主页:点击! ENSP专栏:点击! 创作时间:2024年4月27日10点04分 BGP(边界网关协议)是一种路由协议,用于在互联网中的不同自治系统(AS)之间交换路由信息。它…

浅谈操作系统中的重要概念——线程

文章目录 一、进程概念产生的原因二、进程的弊端三、线程3.1、线程复用结构体PCB3.2、多线程弊端3.2.1、拖慢程序的效率3.2.2、产生线程安全问题3.2.3、导致整个进程终止 3.3、怎么判断一个线程是否执行完毕??3.4、怎么终止一个线程?&#xf…

【学习笔记二十八】EWM和QM集成的后台配置和前台展示

一、EWM和QM集成概述 SAP EWM(扩展仓库管理)和QM(质量管理)的集成是SAP系统中一个重要的特性,它允许企业在仓库管理过程中实现质量控制和检验流程的自动化。以下是关于EWM和QM集成的一些关键点概述: 集成优势:通过集成,企业可以确保仓库中的物料在收货、存储、…

csdn的复制代码功能如何实现

页面布局分析&#xff1a; 按钮在文本框里面&#xff0c;所以文本框是父元素&#xff0c;按钮是子元素。要使得按钮在文本框的右上角&#xff0c;需要使用绝对定位。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8">…

实现ALV页眉页脚

1、文档介绍 在ALV中&#xff0c;可以通过增加页眉和页脚&#xff0c;丰富ALV的展示。除了基本的页眉和页脚&#xff0c;还可以通过插入HTML代码的方式展示更加丰富的页眉和页脚&#xff0c;本篇文章将介绍ALV和OOALV中页眉页脚的使用。 2、ALV页眉页脚 效果如下 2.1、显示内…

长图高效切割新体验:支持按随机宽度灵活裁切,释放无限创意与效率

图像的传播已经成为我们日常生活的一部分。而长图&#xff0c;作为一种特殊的图像形式&#xff0c;其独特的展示方式能够吸引更多的目光。但是&#xff0c;如何将长图高效切割&#xff0c;以展现其独特的魅力呢&#xff1f;现在&#xff0c;我们为您带来了一款支持按随机宽度切…

怎么找回录音文件?这4个方法实用又简单!

“我有一份比较重要的录音文件保存在电脑上了&#xff0c;不知道是因为误删还是什么原因&#xff0c;这个文件丢失了&#xff0c;我现在有什么比较好的方法可以找回这个文件吗&#xff1f;” 录音文件是我们日常生活中经常使用的文件类型&#xff0c;无论是会议记录、学习笔记还…

论机器学习(ML)在网络安全中的重要性

机器学习是什么&#xff1f; 机器学习(ML)是人工智能的一个分支&#xff0c;它使用算法来使计算机系统能够自动地从数据和经验中进行学习&#xff0c;并改进其性能&#xff0c;而无需进行明确的编程。机器学习涉及对大量数据的分析&#xff0c;通过识别数据中的模式来做出预测…

MySQL/MariaDB 如何查看当前的用户

MySQL 的所有数据库用户信息是存储在 user 数据表中的。 可以在登录成功数据后运行 SQL&#xff1a; MariaDB [(none)]> select user,host from user;就可以查看到数据中的所有用户信息。 MariaDB [(none)]> select user,host from user; ERROR 1046 (3D000): No databa…