Use psd.js with vuejs

[kimsean]

how to use psd.js with vuejs on webpack ? i get a lot of error implementing it.

[fabulousduck]

Could you be a bit more specific in what errors you are getting ?

[xmy1024]

npm install psd.js

[MiRECoFu]

npm install psd.js and import PSD from 'psd.js/dist/psd.min'

[Jeremy-DX]

npm install psd.js and import PSD from 'psd.js/dist/psd.min'

I tried but got an error

header.js?7c99:42 Uncaught Error: Invalid file signature detected. Got: <!DO. Expected 8BPS.
    at Header.module.exports.Header.parse (header.js?7c99:42)
    at PSD.module.exports.PSD.parseHeader (psd.js?3720:59)
    at PSD.module.exports.PSD.parse (psd.js?3720:50)
    at XMLHttpRequest.xhr.onload (init.js?f41f:19)

[tomieric]

HTML

<script src="./psd.min.js"></script>
<script>window.PSD = require('psd')</script>

Vue

import PSD from 'psd'
export default {
  methods: {
    upload (file) {
      const url = window.URL.createObjectURL(file)
      const psd = await PSD.fromURL(url)
      // ...
     }
  }
}

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'psd': 'PSD'
    }
  }
}

[tgy3300]

HTML

<script src="./psd.min.js"></script>
<script>window.PSD = require('psd')</script>

Vue

import PSD from 'psd'
export default {
  methods: {
    upload (file) {
      const url = window.URL.createObjectURL(file)
      const psd = await PSD.fromURL(url)
      // ...
     }
  }
}

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'psd': 'PSD'
    }
  }
}

你的这种做法，我也试了，还是不行，提示如下：

Uncaught ReferenceError: PSD is not defined

[0xtoorich]

You can use psd.js instead of psd, the latter hasn't been updated in four years.

npm i -S psd.js

import PSD from 'psd.js'

[DRL9]

You can use psd.js instead of psd, the latter hasn't been updated in four years.

npm i -S psd.js

import PSD from 'psd.js'

This can work for me. Do you know who is the maintainer of psd.js? Its repository refer to here, but its npm pkg isn't built from this repository