微信小程序canvars生成图片及保存图片

微信小程序中canvars要使用线上图片需要到小程序后台配置download域名

试列

 

 

html部分

<view class="container">
  <button class="btn" bindtap="showPopup">显示海报</button>
  <van-popup
    round="{{ false }}"
    show="{{ showPop }}"
    position="center"
    bind:after-leave="onClosePopup"
    duration="50"
    bind:after-enter="onCreateCanvas"
    custom-style="background:none;"
  >
 
      <view class="canvas-container">
        <canvas
          type="2d"
          id="poster-canvas"
          class="poster-canvas"
          style="width: 100%; height: 100%;"
          disable-scroll="{{ true }}"
        >
        </canvas>
      </view>
      <view style="margin-top:10rpx;position:relative;height:100rpx;">
        <button class="btn" bindtap="savePoster" style="position:absolute;width:48%;left:0;top:0;font-size:28rpx;">保存到手机相册</button>
        <button class="btn" bindtap="removePop" style="position:absolute;width:48%;left:52%;top:0;font-size:28rpx;">取消</button>
      </view>
   
  </van-popup>
</view >

css部分

.canvas-container {
  width: 660rpx;
  height: 840rpx;
}

js部分

// 引入 `wx-canvas-2d` 插件
import { WxCanvas2d,Text,Image,Line,SaveToAlbum } from 'wx-canvas-2d'

// 实例化对象
const canvas = new WxCanvas2d()
WxCanvas2d.use(SaveToAlbum)

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showPop: false, //是否显示海报弹窗
    wxCanvas: null,  //全局canvas对象，在里面执行create、draw、save等操作
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    
  },

  showPopup(){
    this.setData({ showPop: true });
  },
  removePop: function(){
    this.setData({ showPop: false });
  },
  //监听关闭弹窗
  onClosePopup: function(){
    //关闭弹窗时清空画布（否则第二次打开弹窗的时候，会看到上次绘制好的画布，被重新绘制一次，影响体验）
    this.data.wxCanvas.draw({
      series:[]
    });
  },

  onCreateCanvas(){
      let _this = this;
      this.setData(
        { wxCanvas: new WxCanvas2d() },
        //注意setData是异步的，在setData完成的回调里执行canvas初始化（否则operateCreate里获取wxCanvas可能为null）
        ()=>_this.operateCreate()
      );
  },

  operateCreate(){
    let _this = this;
    // 创建
    _this.data.wxCanvas.create({
      query: '.poster-canvas', // 必传，canvas元素的查询条件
      rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度，默认375，可改为750)
      bgColor: '#fff', // 背景色，默认透明
      component: this, // 自定义组件内需要传 this
      radius: 16 // 海报图圆角，如果不需要可不填
    }).then(res => {
        // console.log(res)
        _this.data.wxCanvas.draw({
          series: [
                    //文字编写 ，有多行文字的直接重复使用即可
                  {
                      type: Text, //类型
                      text: '文字',
                      fontSize: 32, //文字大小
                      x:40,  //坐标
                      y:40,
                      color:"#999999", //文字颜色
                  },
                  {
                    type: Text,
                    text: '名字',
                    fontSize: 40,
                    x:40,
                    y:100,
                    color:"#505050",
                  },
                  {
                    type: Text,
                    text: '总经理',
                    fontSize: 28,
                    x:40,
                    y:155,
                    color:"#999999",
                  },
                  {
                    type: Text,
                    text: '手机号：',
                    fontSize: 28,
                    x:40,
                    y:210,
                    color:"#999999",
                  },
                  {
                    type: Text,
                    text: '123456789',
                    fontSize: 28,
                    x:140,
                    y:210,
                    color:"#505050",
                  },
                  {
                    type: Text,
                    text: '所在地：',
                    fontSize: 28,
                    x:40,
                    y:250,
                    color:"#999999",
                  },
                  {
                    type: Text,
                    text: '北京',
                    fontSize: 28,
                    x:140,
                    y:250,
                    color:"#505050",
                  },
              //图片的使用
                  {
                    type: Image,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fa_auto%2Cc_cut%2Cx_99%2Cy_123%2Cw_403%2Ch_403%2Fimages%2F20180611%2F143bcb3734e0441e99cb3bd2a8fbc531.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628998597&t=09687af33c176448275f0a36e827cba5',
                    x: 420,
                    y: 40,
                    width: 200,
                    height: 200,
                    mode: 'scaleToFill',
                    radius: 100,
                    zIndex: 0
                },
                {
                    type: Line,
                    lineStyle: {
                        width: 1,
                        //cap: "square",
                        //join: "round",
                        dash:[10,10],

                    },
                    line: [
                        { point: [0, 320] },
                        { point: [660, 320] }
                    ],
                    zIndex: 0,
                    
                },
                {
                  type: Image,
                  url: 'https://img1.baidu.com/it/u=2877499757,3239316825&fm=224&fmt=auto&gp=0.jpg',
                  x: 165,
                  y: 370,
                  width: 330,
                  height: 330,
                  mode: 'scaleToFill',
                  //radius: 75,
                  zIndex: 0
                },
                {
                  type: Text,
                  text: '长按识别小程序码，马上认识我',
                  fontSize: 28,
                  x:140,
                  y:750,
                  color:"#505050",
                },
              ]
        });
    }).catch(err => {
      console.log('[WxCanvas2d] Canvas create fail: ', err)
    })
  },

  savePoster(){
    // 保存到相册
    this.data.wxCanvas.save({
        destWidth: 660,
        destHeight: 840
    }).then(res => {
      console.log('保存到相册成功', res)
    }).catch(err => {
      console.log('保存到相册失败', err)
    })
  },

json部分

{
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index"
  }
}

canvas的官方手册：https://kiccer.github.io/wx-canvas-2d/，