微信小程序用CSS编辑海报（canvas）

效果图如下所示

.wxml

<view class="canvas-box">
  <painter palette="{{template}}" bind:imgOK="onImgOK" />
</view>
<image bindtap="imagxin" src="{{imagePath}}"></image>

.css

page{
  overflow: hidden;
}
.canvas-box{
  width: 1px;
  height: 1px;
  position: absolute;
  left: -1px;
  top: -1px;
  float: left;
  overflow: hidden;
}
image{
  width: 100%;
  height: 100vh;
}

.js

Page({
  data: {
  },
  onImgOK(e) {
    this.imagePath = e.detail.path;
    this.setData({ 
      imagePath: this.imagePath
    });
  },
  onShow:function(e){
    let that = this
    that.setData({
      template: {
        "width": "450px",
        "height": "820px",
        "background": "#fff",
        "views": [
          {
            "type": "image",
            "url": '/images/mastergraph.png',
            "css": {
              "width": "450px",
              "top": "0px",
              "left": "0px",
            }
          },
          {
            "type": "image",
            "url": '/images/userprofile.png',
            "css": {
              "width": "116rpx",
              "height": "120rpx",
              "top": "664px",
              "left": "38px",
              "rotate": "0",
              "borderRadius": "120.94610063910693px",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "css": {
              "color": "#787878",
              "top": "730px",
              "left": "30px",
              "fontSize": "16px",
            },
            "text": '林晨:'
          },
          {
            "type": "text",
            "css": {
              "color": "#000",
              "top": "753px",
              "left": "30px",
              "fontSize": "18px",
            },
            "text": '邀请你进入饭呗优选'
          },
          {
            "type": "text",
            "css": {
              "color": "#EF3664",
              "top": "788px",
              "left": "35px",
              "padding": '5px 8px',
              "background": '#FCD6DF',
              "fontSize": "16px",
            },
            "text": '长按保存图片'
          },
        ]
      },
    });
  },
  imagxin:function(e){
    wx.previewImage({
      current: this.data.imagePath, // 当前显示图片的http链接
      urls: [this.data.imagePath] // 需要预览的图片http链接列表
    })
  }
})

.json

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

引入的文件.js

链接: https://pan.baidu.com/s/18ZWzfPWcP3u_CxQ22UorNw 提取码: tzd8
海报如果在真机上不显示可以参考：https://blog.csdn.net/qq_43764578/article/details/101704775



对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。