【js文件系列一】psd文件上传图层解析

3 years ago

source link: https://www.haorooms.com/post/psd_upload_file
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

本系列给大家介绍js文件系列，包含psd文件上传图层解析，pdf/word/ppt等办公文档在线预览，纯前端导出精美pdf文档（结案报告/体检报告等）。今天和大家分享的是psd上传图层解析。psd图层解析，我们这里用到了第三方的psdjs文件库。下面详细介绍一下psdjs的前端使用。

主要可以用于psd文件上传图层解析，然后编辑图层，导出图片的功能。

nodejs的使用

nodejs使用比较简单。官方文档也有，直接拿来用就可以了。如下：

npm install psd

var PSD = require('psd');
var psd = PSD.fromFile("path/to/file.psd");
psd.parse();

console.log(psd.tree().export());
console.log(psd.tree().childrenAtPath('A/B/C')[0].export());

// You can also use promises syntax for opening and parsing
PSD.open("path/to/file.psd").then(function (psd) {
  return psd.image.saveAsPng('./output.png');
}).then(function () {
  console.log("Finished!");
});

客户端纯js使用

客户端使用比较常见，推荐直接用cdn的方式。因为npm的方式主要用于nodejs服务端，客户端使用会报错。

第一步下载psd.js 放到自己的cdn文件下面，我把我很久之前用的psdjs放到我的服务器下面了，地址如下： https://www.haorooms.com/uploads/js/psd.min.js

大家也可以去github上面下载，可能有更新。

因为psd.js内部实现了一套requie引入的方式，直接cdn引入的话，需要把其添加到头部。

第二步，挂在全局psd

我实现了一个psdheader的组件，共享给大家，代码如下：

import React, { useState } from 'react'
const loadScript = (url, callback) => {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.async = true;
  script.onload = callback;
  script.src = url;
  if (url.indexOf('//www.haorooms.com/') > -1) {
    script.setAttribute('crossorigin', 1);
  }
  document.head.appendChild(script);
}
const PsdHeader = () => {
  // const [isLoad]
  const [isLoading, setLoading] = useState(false)
  return (
    <div>
      {
        !isLoading?
        <script>
        {
          loadScript("https://www.haorooms.com/uploads/js/psd.min.js", () => { // 这里大家不用用我的服务器地址，因为我的地址没有cdn加速
            setLoading(true)
            let evalscript =document.createElement('script')
            evalscript.type = 'text/javascript'
            evalscript.async = true
            evalscript.innerHTML= `window.PSD = require('psd')`
            document.head.appendChild(evalscript)
          })
        }
      </script>:null
      }

    </div>
  )
}

export default PsdHeader

把psd挂在到window，之后，这样就可以在任何位置，直接使用PSD了。

第三步，实现文件上传，图层解析（注意，文件上传直接本地上传就可以，可以不用写上传的url地址）

     <Dragger className='uploadBox' {...imageProps()} >
        //详细介绍
     </Dragger>


 const imageProps = (flag, item) => {
        return {
            name: 'file',
            showUploadList: false,
            // accept:'image/vnd.adobe.photoshop', //mac不识别，只能上传提示
            beforeUpload: (file) => {
                const { size, name } = file
                if (/\.psd$/.test(name)) {
                } else {
                    message.error('请上传psd文件')
                    return false
                }
            },
            onChange:(info)=> {
                const { status, originFileObj } = info.file
                if (status === 'done') {
                    const reader = new FileReader()
                    reader.onload = handleReaderLoad
                    reader.readAsDataURL(originFileObj)
                } else if (status === 'error') {
                }
            }
        }
    }

const  handleReaderLoad = (evt) => {
        let Base64Url = evt.target.result
        PSD.fromURL(Base64Url).then(function (psd) {
                   let psdData = psd.tree()
                psdData.export().children.forEach((item, index) => {
                }, reason => {
                })
            } catch (err) {
            }
        })
    }

这里可以参考我之前文章，JS 文件base64、File、Blob、ArrayBuffer 介绍及互转，每个图层解析出来的base64文件，通过base64 转 file，上传到服务器，然后返回服务器图片的地址。然后组装成各个图层的形式。

本期有时间我会录制b站视频，敬请期待！

Recommend

segmentfault.com 3 years ago
Cache

arcgis图层数据查询

有时候我们需要根据发布的arcgis服务查询服务上的一些数据，比如点击地图上的某个位置，比如根据某个关键字进行要素查询等等，而arcgis关于这方面的api常用的有三个：find、query和identify。一、find查询查找操作在地图服务资源上执行。此操作...

www.shejidaren.com 3 years ago
Cache

漂亮的泡泡文字效果（PSD）| PS图层样式

漂亮的泡泡文字效果（PSD）| PS图层样式网页设计 » 视觉设计 » 漂亮的泡泡文字效果（PSD）| PS图层样式...

www.cnblogs.com 3 years ago
Cache

GDI绘制Winform工作流组件、具有独立图层的增删处理、防PPT效果

GDI绘制Winform工作流组件、具有独立图层的增删处理、防PPT效果最近接了个...

js.design 1 year ago
Cache

不安装PS也能编辑psd文件的方法在这里！

不安装PS也能编辑psd文件的方法在这里！更新时间：2023-04-28 11:18:42 不安装PS也能编辑psd文件的方法在这里！PSD 文件其实是 Adobe Photoshop（以下简称 PS）软件的固定文件保存格式，具体说来，它是一种基于位图的图形...

js.design 1 year ago
Cache

如何实现PSD文件在线编辑？

如何实现PSD文件在线编辑？更新时间：2023-08-18 12:08:20 如何实现PSD文件在线编辑？2步即可，在网页中直接打开使用，而且导入 PSD 文件的步骤十分简单，对于 PSD 文件中的原有内容也可以准确还原。同时，它专业...

caoniang.net 1 year ago
Cache

psd文件怎么修改文字内容

有些朋友刚开始下了很多漂亮的模板想修改称自己的信息，却不知道怎么动手开始，今天就来教大家如何修改psd文件模板的文字，首先找到psd的文件，通过工具栏菜单就可以修改了。 psd文件怎么修改文字内容： 1、首先找到p...

caoniang.net 1 year ago
Cache

psd文件如何保存为高清图片

相信有很多小伙伴完成ps图片的时候非常模糊但不知道如何变成高清吧，今天就来跟大家说一下如何变成高清图片，大家可以在保存图片的时候换个格式就高清了。 psd文件如何保存为高清图片： 1、首先需要用到ps软件，大家打开

caoniang.net 1 year ago
Cache

psd文件怎么转换成cdr格式

很多朋友都不会将psd文件转化成cdr文件，因此对于这个文件基本上都是束手无策也不知道该怎么去进行操作，其实可以直接导入，然后右击重新保存改格式就好了。 psd文件怎么转换成cdr格式： 1、首先打开cdr软件进入主界面。 ...

caoniang.net 1 year ago
Cache

psd文件怎么发给别人

很多用户在制作完psd文件之后，想把这个文件发给别人，但是不知道怎么来进行操作，才能发出去，这时候可以通过电脑登录微信再把文件拖进去就可以发送给好友了。 psd文件怎么发给别人： 1、首先把文件给做好，再点击“...

js.design 1 year ago
Cache

哪些软件可以打开PSD文件?

哪些软件可以打开PSD文件? 更新时间：2023-09-12 11:47:53 哪些软件可以打开 PSD 文件？有 3 种方式：第一种可以直接用 Photoshop 打开，第二种借助别的在线...

nodejs的使用

客户端纯js使用

Recommend

About Joyk