评论

生成分享海报(Painter组件)

生成分享海报(Painter组件)

  • 目的:

如题,生成分享海报(图片)

  • 使用组件:

Painter 一款轻量级的小程序海报生成组件

  • 效果:


  • 傻瓜教程(仅需3步):

1.在项目根目录下,下载组件

git clone https://github.com/Kujiale-Mobile/Painter.git

2.编写代码

wxml代码:

<view>
  <image src='{{imgSrc}}' style="width: 100%;height: {{validHeight}}px;" show-menu-by-longpress="true"></image>
</view>
<painter palette="{{imgData}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/>

json代码:

{
  "usingComponents": {
    "painter""/components/painter/painter"
  }
}

js代码:

data: {
    imgSrc:'',
    imgData:{},// 数据获取 --> https://lingxiaoyi.github.io/painter-custom-poster/
},
onImgOK(e) {
  this.setData({
    imgSrc: e.detail.path
  })
  wx.hideLoading()
},
onImgErr(e) {
  wx.hideLoading()
  wx.showToast({
    title'something is going wrong',
    icon'none'
  })
},
onReady: function () {
  wx.showLoading({
   title'加载中',
    mask: true
 })
},

3.可视化设置海报,并获取imgData,点我获取

  • 拓展阅读:

生成分享海报(canvas2d)


完。


最后一次编辑于  2021-12-03  
点赞 0
收藏
评论
登录 后发表内容