Preface

Make a note of psd.js analysis PSD file

One 、vue Import psd.js

npm install --save psd.js

Details refer to github,psd.js: https://github.com/meltingice/psd.js

Two 、 analysis psd file

Use el-upload Upload psd file

<template>
  <div>
    <el-upload
      :auto-upload="false"
      :on-change="parsePSD"
      class="upload-demo"
      drag
      action=""
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text"> Click Add or drag and drop PSD file </div>
    </el-upload>
  </div>
</template>

<script>
//  introduce psd.js 
import PSD from 'psd.js'
export default {
    
  methods: {
    
    parsePSD(file) {
    
      // psd file 
      var url = URL.createObjectURL(file.raw)
      //  analysis psd file 
      PSD.fromURL(url).then(psd => {
    
        console.log(psd)
        // psd Background image 
        const l_background = psd.image.toBase64()

        //  Get layer data 
        const childrens = psd.tree().children()
        childrens.forEach(item => {
    
          if (item._children.length > 0) {
    
            //  Child node layer 
            const _child = item._children
            _child.forEach(i => {
    
              const typeTool = i.get('typeTool')
              if (typeof typeTool !== 'undefined') {
    
                //  Get word spacing 
                if (typeof (typeTool.styles().Tracking) !== 'undefined') {
    
                	console.log(typeTool.styles().Tracking[0])
                }
              }
              //  Get sub layer pictures 
              const child_image = i.layer.image.toBase64()
            })
          }
        })

        //  Export layer data 
        var exportData = psd.tree().export()
        const _export_childrens = exportData.children
        for (var i = 0; i < _export_childrens.length; i++) {
    
          //  Top level layer / Folder 
          const name = _export_childrens[i].name
          var i_child = _export_childrens[i].children

          if (typeof (i_child) !== 'undefined') {
    
            for (var j = 0; j < i_child.length; j++) {
    
              //  Sublayer data 
              console.log(i_child[j])
            }
          }
        }
      })
    }
	}
}
</script>

3、 ... and 、psd Method

1.psd Background image to base64 Format

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

2. Get all the direct child nodes of the node

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

_children For all child node layers

3. The text layer gets the word spacing

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

4. Sub layer background

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

5. Derived data

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