前言

记录一下psd.js解析PSD文件

一、vue导入psd.js

npm install --save psd.js

详情参考github，psd.js: https://github.com/meltingice/psd.js

二、解析psd文件

使用el-upload上传psd文件

<template><div><el-upload:auto-upload="false":on-change="parsePSD"class="upload-demo"dragaction=""><i class="el-icon-upload" /><div class="el-upload__text">点击添加或拖放PSD文件</div></el-upload></div>
</template>

<script>
// 引入psd.js
import PSD from 'psd.js'
export default {methods: {parsePSD(file) {// psd文件var url = URL.createObjectURL(file.raw)// 解析psd文件PSD.fromURL(url).then(psd => {console.log(psd)// psd背景图片const l_background = psd.image.toBase64()// 获取图层数据const childrens = psd.tree().children()childrens.forEach(item => {if (item._children.length > 0) {// 子节点图层const _child = item._children_child.forEach(i => {const typeTool = i.get('typeTool')if (typeof typeTool !== 'undefined') {// 获取字间距if (typeof (typeTool.styles().Tracking) !== 'undefined') {console.log(typeTool.styles().Tracking[0])}}// 获取子图层图片const child_image = i.layer.image.toBase64()})}})// 导出图层数据var exportData = psd.tree().export()const _export_childrens = exportData.childrenfor (var i = 0; i < _export_childrens.length; i++) {// 顶级图层/文件夹const name = _export_childrens[i].namevar i_child = _export_childrens[i].childrenif (typeof (i_child) !== 'undefined') {for (var j = 0; j < i_child.length; j++) {// 子图层数据console.log(i_child[j])}}}})}}
}
</script>

三、psd方法

1.psd背景图转为base64格式

PSD.fromURL(url).then(psd => {console.log(psd.image.toBase64())
}

2.获取节点的所有直接子节点

PSD.fromURL(url).then(psd => {console.log(psd.tree().children())
}

_children中为所有子节点图层

3.文字图层获取字间距

PSD.fromURL(url).then(psd => {const parent = psd.tree().children()const typeTool = parent._chilren[0].get('typeTool')console.log(typeTool.styles().Tracking[0])
}

4.子图层背景图

PSD.fromURL(url).then(psd => {const parent = psd.tree().children()const children = parent._chilren[0]console.log(children.layer.image.toBase64())
}

5.导出数据

PSD.fromURL(url).then(psd => {console.log(psd.tree().export());
}

psd.js 解析PSD文件相关推荐

图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇（文字图片）
转载至微信公众号:方凳雅集背景随着发展,活动会场页面的题图运营需要线上模板化,而自研的导购素材制作平台接入了海棠-创意中心,通过平台能力,将素材模板化,并且通过配置化的方式生成多种场景化,个性化的 ...
通过Node.js解析stl文件
通过Node.js解析stl文件在此之前请确认已安装Node.js,已配置环境变量.如未安装与配置,请查看Node.js安装及环境配置(Windows) 一.下载Node项目文件 Node项目文件下 ...
js解析PSD文件，Java处理psd文件智能图层
现在市面上很多的webapp都提供模板功能,所谓模板就是一系列元素的集合,模板的制作一般都需要设计师先在Photoshop等软件中制作好设计好,然后再一定的方式来还原设计稿,要么需要编码要么需要在某些 ...
JS解析XML文件和XML字符串
http://www.cnblogs.com/chjw8016/archive/2011/07/12/2104269.html JS解析XML字符串 <script type='text/jav ...
html中加载shp文件,运用shapefile.js解析Shp文件
shapefile.open("http://localhost:8181/shp/zd.shp") .then(source => source.read() .then( ...
html 显示shp,运用shapefile.js解析Shp文件
shapefile.open("http://localhost:8181/shp/zd.shp") .then(source => source.read() .then( ...
php解析shapefile,运用shapefile.js解析Shp文件
shapefile.open("http://localhost:8181/shp/zd.shp") .then(source => source.read() .then( ...
使用js解析歌词文件(lrc格式歌词)
首发地址:https://www.hsmus.top/202101235.html 像音乐播放器一样,可以把歌词文件解析为方便使用的对象效果如下: 代码如下: 用法: /***** 用法 ***** ...
js 解析html文件,用Javascript解析html
说到用Javascript解析html,大家肯定会想到dom或者正则表达式,但这两个都不是我今天我要说的.dom很不错,不过效率不高,而且必须将要解析的html插入到当前页面或者建立一个iframe才 ...
js解析excel文件，读取单元格中的值
首先需要引入js包,https://github.com/SheetJS/sheetjs这个是地址我这里就具体说一下读取单元格值的方法. 方法参考js读取本地Excel内容这个博主的,但是想要获取 ...

psd.js 解析PSD文件

文章目录

前言

一、vue导入psd.js

二、解析psd文件

三、psd方法

1.psd背景图转为base64格式

2.获取节点的所有直接子节点

3.文字图层获取字间距

4.子图层背景图

5.导出数据

psd.js 解析PSD文件相关推荐

最新文章

热门文章

psd.js 解析PSD文件

文章目录

前言

一、vue导入psd.js

二、解析psd文件

三 、psd方法

1.psd背景图转为base64格式

2.获取节点的所有直接子节点

3.文字图层获取字间距

4.子图层背景图

5.导出数据

psd.js 解析PSD文件相关推荐

最新文章

热门文章

三、psd方法