Vue之解析PSD文件(文字)

使用psd.js

npm install psd.js --save  //注意浏览器要使用psd.js
//导入
import PSD from 'psd.js'
async getPsdData (url) {const psd = await PSD.fromURL(url)const psd_list = psd.tree().children()let layer_object = {}psd_list.forEach(layer => {const parent = layer.parent.export()layer_object = layer.export()layer_object.type = 'text-group'//获取psd容器的宽高layer_object.document = {width: parent.document.width,height: parent.document.height,top: 0,left: 0}//获取文字容器的宽高layer_object.style = {width: layer_object.width,height: layer_object.height,top: 0,left: 0}if (layer._children.length > 0) {layer_object.children = []layer._children.forEach(child => {const typeTool = child.get('typeTool'); //获取psd文字属性const layer_children = child.export() //导出if (typeTool) {layer_children.tracking = typeTool.styles().Tracking  //后续用于计算 letterSpacinglayer_object.children.push(layer_children)}})}})console.log(layer_object)this.formatLayer(layer_object)) //进一步格式化数据},
formatLayer (layer_object) {const children = layer_object.children;const layer = {name: layer_object.name,style: layer_object.document,group_style: layer_object.style,type: layer_object.type,children: []}children.forEach(child => {let letterSpacing = ''if (child.tracking) {letterSpacing = child.tracking[0] * this.computeFontSize(child.text) / 1000 + 'px'}const child_layer = {value: child.text.value,style: {width: child.width,height: child.height,top: child.top,left: child.left,letterSpacing: letterSpacing,lineHeight: (child.text.font.leading[0] / child.text.font.sizes[0]).toFixed(2),// transform:computeFontTransform(transform),textAlign: child.text.font.alignment[0],color: `rgb(${child.text.font.colors[0]})`,fontSize: this.computeFontSize(child.text),fontStyle: child.text.font.styles[0],fontWeight: child.text.font.weights[0],textDecoration: child.text.font.textDecoration[0],fontFamily: child.text.font.names.join(","),}}layer.children.push(child_layer)})// console.log(layer)this.$store.commit('addDrawComponent', layer)this.$store.commit('setDrawComponent', layer)},//计算字体大小
computeFontSize (item) {const sizes = item.font.sizeslet size = 24;if (sizes[0]) {if (item.transform.yy !== 1) {size = Math.round((sizes[0] * item.transform.yy) * 100) * 0.01;} else { // transform.yy为1时，sizes[0]的值就是字体显示大小的值，不需要计算size = sizes[0];}}return size},

格式化之前数据

格式化之后的数据

渲染结果

Vue之解析PSD文件(文字)相关推荐

js解析PSD文件，Java处理psd文件智能图层
现在市面上很多的webapp都提供模板功能,所谓模板就是一系列元素的集合,模板的制作一般都需要设计师先在Photoshop等软件中制作好设计好,然后再一定的方式来还原设计稿,要么需要编码要么需要在某些 ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
PSD文件模板更改照片和文字
更换PSD文件中图片的方法首先打开用PS打开psd文件点击左侧工具栏方框将图片拖入PS 在PS右侧选中该图片按快捷键 Ctrl+T 可以出现调整照片大小的功能注:刚植入图片处于图层的顶层 ...
vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件 2 ...
JAVA解析pdf文件
自己记录一下,方便下次用,判断文件是否为pdf类型,并且解析文件内容 1.需要依赖的包 <dependency><groupId>org.apache.pdfbox</g ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Android音频开发（4）：如何存储和解析wav文件
2019独角兽企业重金招聘Python工程师标准>>> 无论是文字.图像还是声音,都必须以一定的格式来组织和存储起来,这样播放器才知道以怎样的方式去解析这一段数据,例如,对于原始的图 ...
ASP.NET Core微服务(五)——【vue脚手架解析接口】
ASP.NET Core微服务(五)--[vue脚手架解析接口]: 后台接口请参照:ASP.NET Core微服务(三)--[跨域配置]:[https://blog.csdn.net/feng8403 ...
npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
[系统安全] 四十一.APT系列(6)Python解析PE文件并获取时间戳判断来源区域
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...

Vue之解析PSD文件(文字)

Vue之解析PSD文件(文字)相关推荐

最新文章

热门文章