小程序海报生成器 python 微信小程序生成海报demo

转载

mob64ca1402d47a 2023-11-14 09:48:37

文章标签 小程序海报生成器 python javascript css3 es6 css 文章分类 Python 后端开发

微信小程序生成海报

小程序生成海报
实用的开源组件painter
简单的demo

引入组件
在页面引入组件

json文件
wxml文件
js文件

效果展示

painter可视化编辑代码工具

小程序生成海报

因为公司小程序开发需要涉及到分享海报，小程序现在并没有生成海报的API，只能靠前端用canvas去设计，而对之前没有接触过canvas的人，可能会花费一定的时间去摸索canvas，而且在绘制分享图的时候难免会踩到canvas的各种坑。

设计海报主要是由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。

实用的开源组件painter

painter这是painter的git地址，可以拿到组件和官方的demo

简单的demo

不多说，在git上拿到组件后，动手自己写一个demo

引入组件

将painer文件夹放入目录

小程序海报生成器 python 微信小程序生成海报demo_css3

在页面引入组件

json文件

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

wxml文件

<painter customStyle="position:fixed;top:-9999rpx" palette="{{imgDraw}}" bind:imgOK="onImgOK" />
<image mode="widthFix" style="margin:0 auto" src="{{sharePath}}" bindtap="previewImg"></image>

组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在。

数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因。

bind:imgOK="onImgOK"
bind:imgErr="onImgErr"

onImgOK(e) {
  其中 e.detail.path 为生成的图片路径
},

js文件

data: {
    userInfoTemplate:{
      name:'ces',
      img:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg'
    },
    sharePath:''
  },
  drawPic() {
    if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
      this.setData({
        visible: true
      })
      this.triggerEvent('initData') 
      return
    }
    wx.showLoading({
      title: '生成中'
    })
    this.setData({
      imgDraw:{
        "width": "750px",
        "height": "1115px",
        "background": "#FFF",
        "views": [
          {
            "type": "image",
            "url": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/08/ChMkJlauzXWIDrXBAAdCg2xP7oYAAH9FQOpVAIAB0Kb342.jpg",
            "css": {
              "width": "690px",
              "height": "690px",
              "top": "30px",
              "left": "30px",
              "rotate": "0",
              "borderRadius": "10px",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "image",
            "url": "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg",
            "css": {
              "width": "96px",
              "height": "96px",
              "top": "681px",
              "left": "333px",
              "rotate": "0",
              "borderRadius": "96px",
              "borderWidth": "6px",
              "borderColor": "#FFF",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": "别跟我谈感情，谈感情伤钱。",
            "css": {
              "color": "#3c3c3c",
              "background": "rgba(0,0,0,0)",
              "width": "300px",
              "height": "40.04px",
              "top": "790px",
              "left": "225px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "28px",
              "fontWeight": "normal",
              "maxLines": "1",
              "lineHeight": "40.40400000000001px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          },
          {
            "type": "text",
            "text": "背夹充电宝苹果11超薄大容量电池6S小巧7便携冲电池6",
            "css": {
              "color": "#333333",
              "background": "rgba(0,0,0,0)",
              "width": "300px",
              "height": "81.172px",
              "top": "955px",
              "left": "48px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "28px",
              "fontWeight": "normal",
              "maxLines": "2",
              "lineHeight": "40.40400000000001px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "left"
            }
          },
          {
            "type": "image",
            "url": "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg",
            "css": {
              "width": "150px",
              "height": "150px",
              "top": "844px",
              "left": "537px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": "￥6454",
            "css": {
              "color": "#f82c2c",
              "background": "rgba(0,0,0,0)",
              "width": "150px",
              "height": "42.89999999999999px",
              "top": "880px",
              "left": "46px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "40px",
              "fontWeight": "normal",
              "maxLines": "1",
              "lineHeight": "43.290000000000006px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "left"
            }
          },
          {
            "type": "text",
            "text": "长按或扫码购买",
            "css": {
              "color": "#333333",
              "background": "rgba(0,0,0,0)",
              "width": "200px",
              "height": "34.32px",
              "top": "1007.9999999999999px",
              "left": "515px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "24px",
              "fontWeight": "normal",
              "maxLines": "1",
              "lineHeight": "34.632000000000005px",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          }
          
        ]
      }
                
    })
  },
  previewImg() {
    wx.previewImage({
      current: this.data.sharePath,
      urls: [this.data.sharePath]
    })
  },
  onImgOK(e){
    wx.hideLoading()
    this.setData({
      sharePath: e.detail.path,
    })
  },

wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

小程序海报生成器 python 微信小程序生成海报demo_css3_02