微信小程序2D canvas绘制分享海报

• 画布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。相关api：获取 canvas 实例。

id:true 是否返回节点 id

node:true 是否返回节点对应的 Node 实例

size:true 是否返回节点尺寸（width height）

  onReady(){
    const query = wx.createSelectorQuery()
    query.select('#canvas_box')
    .fields({
      id: true,
      node: true,
      size: true
    })
    .exec(this.init.bind(this))
   
  },

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

全部代码

wxml

<canvas
  type="2d"
  id="canvas_box"
  style="width:260px;height:420px "
></canvas>


<button class='bottom' catchtap="bc" canvas-id="mycanvas"> 保存到相册    </button>

js

const app = getApp()

Page({
  data: {
    resqrCodeUrl:"https://tmawx.shenzhenair.com/Shwxcharfile/ts/oEy5O5Xdz-aSL5TUV89AFBwsYdsk/oEy5O5Xdz-aSL5TUV89AFBwsYdsk.jpeg", //二维码
    CodeUrlbg:'https://tmawx.shenzhenair.com/Shwxcharfile/ts/app/img_invite_privilege.png',//背景图片
     destMinWidth: 690, //背景宽度
    maxHeight: 995,//背景高度
    destMul: 2,   //画布写出倍数
  },
 

  //init函数 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 [HTML Canvas 2D Context](https://www.w3.org/TR/2dcontext/) 定义的属性、方法。

  init(res) {
    console.log('init----',res)
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio;//获取屏幕的像素比  值为2

     //新接口需显示设置画布宽高； w*2 h*2
     canvas.width = res[0].width * dpr;
     canvas.height = res[0].height * dpr;
     ctx.scale(dpr, dpr); //缩放

     this.setData({
      canvas,
      ctx
    });


  //渲染bg图片和二维码还有文字，必须按照顺序来，先渲染背景，再渲染logo，最后渲染文字，如果顺序不统一，logo先渲染，就会导致背景图片加载不出来。

  //向画布载入图片的方法
  this.canvasDraw(ctx,canvas).then(res=>{
    console.log('1',res)
      // 向画布载入logo的方法
    return this.code(ctx)
  }).then(rrr=>{
    console.log('2',rrr)
    //图片头像渲染完成之后，渲染文字
    this.title(ctx)
  })

  },


  // 封面图  使用 pormise方法来输出 代码执行成功，返回一个成功标识出去
  canvasDraw(ctx,canvas) {
    return new Promise(res=>{
      let img = this.data.canvas.createImage(); //创建img对象
      img.src =this.data.CodeUrlbg;
      img.onload = () => {
        console.log(img.complete); //true
        this.data.ctx.drawImage(img, 0, 0,260, 430);
          setTimeout(() => {
            res(true)
          }, 100);
      };  
    })

},

  // 头像 使用 pormise方法来输出 代码执行成功，返回一个成功标识出去
  code(ctx) {
    const that=this;
    return new Promise(rrr=>{
      let code = this.data.canvas.createImage(); //创建img对象
      code.onload = () => {
        this.data.ctx.drawImage(code, 75,20, 105, 110);
      };
      code.src =this.data.resqrCodeUrl;
      setTimeout(() => {
        rrr(true)
      }, 100);
    })
  },

//文字模块，不使用pormise，因为他是最后模块，所有不需要了
  title(ctx) {
    let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'
    let moy =  '有需要的直接微信扫码'
    ctx.font = 'normal bold 12px sans-serif';
    ctx.fillStyle = "rgba(60, 59, 59)";
    console.log('======,', text.length)


      let firstLine = text.substring(0, 20); //文字切割方法
      let secondLine = text.substring(20, 38);
      ctx.fillText(firstLine, 10, 275, 280)
      ctx.fillText(secondLine, 10, 290, 280)
      ctx.fillStyle = "rgba(0,0,0)";//添加颜色
      ctx.font = 'normal bold 16px sans-serif';//指定文字样式
      ctx.fillStyle = "red"; //新增样式
      ctx.fillText(moy, 10, 315, 280) //    ctx.fillText(文字, 像素, 移动y, 移动x) 
    
  },

  bc() {
    // 保存到相册
    console.log('保存canvasId',this.data.canvas._canvasId)
    wx.canvasToTempFilePath({     //将canvas生成图片
      canvas:this.data.canvas,
      x: 0,
      y: 0,
      width: 690,
      height: 995,
      destWidth: 690*2,     //截取canvas的宽度
      destHeight:995*2,   //截取canvas的高度
      success: function (res) {
        console.log('生成图片成功：',res)
        wx.saveImageToPhotosAlbum({  //保存图片到相册
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: "保存图片成功！",
              duration: 2000
            })
          }
        })
 
      },
    },this)
  
  },
onShow(){
 
},
  onLoad: function () {
   
  },
  onReady(){
    const query = wx.createSelectorQuery()
    query.select('#canvas_box')
    .fields({
      id: true,
      node: true,
      size: true
    })
    .exec(this.init.bind(this))
   
  },
})

结果

logo模块是logo图片
背后花花的是背景图片
文字为最后

image.png