Wechat applet (4) canvas drawing and saving to mobile album and fileText drawing text for automatic line wrapping

Keywords: network Mobile

thinking

First of all, prepare a picture. Both the local picture and the network picture can be used as your background picture. Currently, the applet does not support screenshots. Here are the local pictures.
wx.createCanvasContext(ා get the ID of the canvas) will be used
 drawImage(ා draw the picture onto the background picture)
setFillStyle(ා set font color)
setFontSize(ා font size)
fillText(ා set the text you need)
draw(ා save the picture)
wx.canvasToTempFilePath(ා save picture path) 
wx.saveImageToPhotosAlbum(ා save picture to mobile album)
Please move to the official wechat applet file for details

First step

wxml prepare canvas

< canvas class ='ce 'Canvas id = "mycanvas" > set the canvas style to display first < / Canvas >
< button bindtap = "conceals" > share graph < / button >

The second step

js click trigger
Explanation: this.data.qr is the data in data {}

 conceals: function () {
     //Get canvas
    const cts = wx.createCanvasContext('myCanvas')
    cts.drawImage(this.data.back, 5, 5, 600, 450)
    cts.setFontSize(14)
    cts.setFillStyle("#606D80")
    cts.fillText('Surrounding objects'+':'+this.data.datas[0].tag_name,50,300)
    cts.drawImage(this.data.qr, 200, 400, 50, 50);
    cts.drawImage(this.data.src, 50, 50, 170, 200);
    // Finish drawing and save the picture path
    var that = this
    cts.draw(false,function(){
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
            console.log(res.tempFilePath)
          if (!res.tempFilePath){
            wx.showModal({
              title: 'Tips',
              content: 'Drawing picture, please try again later',
              showCancel: false
            })
            }
          //After saving the picture path, download it to local
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success:function(res){
              wx.showToast({
                title: 'Success',
                icon: 'success',
                duration: 2000
              })

              setTimeout(function () {
                console.log(res)
                wx.hideLoading()
              }, 3000)

            },
            fail:function(err){
              console.log(err)
              wx.hideLoading()
            }
          })
        }
      }, this)
    })
  },

fileText draw text wrap

Namely sticky use

    var text = "This is the text to draw"//This is the text to draw
    var chr = text.split("")
    console.log(chr)
    var temp = ""
    var row = []
    for (var a = 0; a < chr.length; a++) {
      if (cts.measureText(temp).width < 250) {
        temp += chr[a];
      }
      else {
        a--; //a -- is added here to prevent character loss,
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp); 
    //If the array length is greater than 2, the first two are truncated
    //2 take the first two lines 3 take the first three lines
    if (row.length > 2) {
      var rowCut = row.slice(0, 3);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (cts.measureText(test).width < 220) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..."//Only two lines are shown here. The excess is represented by
      rowCut.splice(2, 2, group);//1,1 has an ellipsis at the beginning of the second line. 2,2 with ellipsis on the third line
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      cts.fillText(row[b], 5, 330 + b * 30);
    }

Detailed Edition

canvas drawing and saving to album

Posted by s0me0ne on Fri, 03 Jan 2020 00:27:33 -0800