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