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

前言

本系列给大家介绍 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 (

      {
        !isLoading?
        :null
      }

    
  )
}

export default PsdHeader

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

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

     
        // 详细介绍
     


 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 站视频，敬请期待！