vue + nodejs + psd.js 轻松入门

最近在开发一个自定义H5项目,旨在提升团队效率,完全脱离程序员,让完全由不懂程序员的运营、设计等可独立配置H5,并实现大量交互的项目。

新的需求是要用户可以导入PSD,这样可以更加轻松的配置H5,而不用一张张图上传。

调研下来psd.js应该是您目前最好的选择

实现方法如下:

Vue

需要使用form表单上传

psdUploadFunc(event) {
    let form = new window.FormData();
    form.append('file', event.target.files[0])
    form.append('token', this.userInfo.api_token)
    axios.post(`${appConst.QA_DOMAIN}/psd`, form).then(res => {})
}
复制代码

Nodejs

加入psd.js依赖,并且提供接口来处理数据

var PSD = require('psd');
app.post('/psd', function (req, res) {
  var PSD = require('psd');
  PSD.open(req.files.file.path).then(function (psd) {
  })
});
复制代码

但是nodejs 获取不到input type='file'的值,需要引入中间件connect-multiparty

引入之后需要把生成的图片传给文件服务器 直接使用http.request会报错source.on is not a function,查其原因是因为需要使用流传输

这里我选择引入第三方库request-promise来解决

request.post({
    url: 'http://xxxxxxx/api/upload',
    headers: {
      'Authorization': 'Bearer ' + req.body.token
    },
    formData: {
      file: fs.createReadStream('./public/output' + i + '.png'),
    }
  })
复制代码

之后还需要遍历psd.layers处理

(async () => {
  let tree = await psd.tree().export().children
  for (let i = 0; i < psd.layers.length; i++) {
    await psd.layers[i].image.saveAsPng('./public/output' + i + '.png')
    await request.post({
        url: 'http://xxxxxxxx/api/upload',
        headers: {
          'Authorization': 'Bearer ' + req.body.token
        },
        formData: {
          file: fs.createReadStream('./public/output' + i + '.png'),
        }
      }).then(data => {
        tree[i].type = 'pic'
        tree[i].imgSrc = JSON.parse(data).data.filePath;
      }).catch(err => {
        res.send(err);
      });
    }
})();
复制代码

最后把获取的数据转义并返回给前端,中间还要倒序一下

res.send(
    tree.reverse()
);
复制代码

前端获取到数据后使用系统统一方法,遍历添加统一图片组件

for (let i = 0; i < res.data.length; i++) {
    this.$store.dispatch("addElement", res.data[i]);
}
复制代码

psd.js插件目前存在的问题:

  • psd源文件大小最好不要超过30M,过大会导致浏览器卡顿甚至卡死
  • 尽可能合并图层,并栅格化所有图层
  • 较复杂的图层样式,如滤镜、图层样式等无法读取
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值