微信小程序的图片转b64流和画布的使用

微信的画布的使用

handlePoster: async function () {
    let _this=this
    _this.setData({
      show:true
    })
    wx.showLoading({
      title: '生成中',
      mask:true,
    })
    
    let rpx = 1;
    wx.getSystemInfo({
      success(res) {
        rpx = res.windowWidth / 375;//这里设定一个等比缩放比例这样设定后画布的所有都适配
      },
    })
    const ctx = wx.createCanvasContext('shareCanvas')
    ctx.rect(0 * rpx, 0 * rpx, 300 * rpx, 300 * rpx)
    ctx.setFillStyle('#ffffff')
    ctx.fill()
    let res = await this.getImage("https://blog-10039692.file.myqcloud.com/1490186149145_3942_1490186149823.jpg?imageslim")
    ctx.drawImage(res.path, 0 * rpx, 0 * rpx, 255 * rpx, 150 * rpx)
    // let re=await this.getImage("https://blog-10039692.file.myqcloud.com/1490186149145_3942_1490186149823.jpg?imageslim")
    // ctx.drawImage(re.path, 0, 0, 60*rpx, 60*rpx)
    let text = '新闻资讯'
    ctx.setFontSize(30 * rpx);
    const metrics = ctx.measureText(text)  //获取字符的长度
    console.log(metrics.width)        //获取字符的长度
    ctx.fillStyle = "#cccccc";        //设置字体颜色
    let wit = Math.ceil((255 - text.length * 30) / 2)
    let hit = Math.ceil((150) / 2)
    ctx.fillText(text, wit * rpx, hit * rpx) //绘制字体
    let re = await this.getImage("https://blog-10039692.file.myqcloud.com/1490186149145_3942_1490186149823.jpg?imageslim")
    ctx.drawImage(re.path, 10 * rpx, 230 * rpx, 60 * rpx, 60 * rpx)

    text = '这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷后期希望大家多多指教呀欢迎'//这是要绘制的文本
    var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    ctx.setFontSize(15 * rpx)
    ctx.setFillStyle("#000")
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < 220 * rpx) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 3) {
      var rowCut = row.slice(0, 3);
      var rowPart = rowCut[2];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        console.log(rowPart[a])
        if (ctx.measureText(test).width < 220 * rpx) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      console.log(empty)
      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(2, 2, group);//这里设定显示几行0的话就显示1行
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      console.log(row[b])
      ctx.fillText(row[b], 10 * rpx, 170 * rpx + b * 20 * rpx, 300 * rpx);
    }
    /**
     * @description: 下方固定信息
     * @param {type} text
     * @return: 描述引导文字
     */
    text = '长按小程序，进入食业头条查看详情'
    ctx.setFontSize(10 * rpx);
    ctx.fillText(text, 80 * rpx, 260 * rpx)
    ctx.draw(false,function(){
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 300 * rpx, 
        height: 300 * rpx,
        destWidth: 300 * rpx,
        destHeight: 300 * rpx,
        canvasId: 'shareCanvas',
        success(res) {
          console.log(res.tempFilePath)
          _this.setData({
        tempFilePath:res.tempFilePath
          })
          setTimeout(function () {
            wx.hideLoading()
          }, 2000)
        }
      })
      
    })
  },

微信小程序的使用转码将图片转为b64流文件

 //b64转流
  bindupload: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        wx.saveFile({
          tempFilePath: res.tempFilePaths[0],
          success: function (res) {
            let path = res.savedFilePath
            that.setData({
              tempFilePaths: path
            })
            console.log('后缀名', that.data.tempFilePaths.substr(-3, 3))
            that.data.postfix = that.data.tempFilePaths.substr(-3, 3)
            that.data.tempFilePaths.substr(-3, 3)
            console.log('看看后缀', path)
            wx.getFileSystemManager().readFile({
              filePath: path,
              encoding: 'base64',
              success: res => {
                // console.log('我是什么', res.data)
                that.data.baseimage = res.data
                // console.log('aaaaaaaa',that.data.baseimage,that.data.postfix);
                // AXIOS.Request(true, 'POST', {
                //   url: 'card/index/upload-image',
                //   data: {
                //     image: that.data.baseimage,
                //     postfix:  that.data.postfix
                //   }
                // }, (res) => {
                //  console.log('lala321321321',res.data.data.image_url)
                //  that.data.intimage=res.data.data.image_url
                // }, 'api2')
              }
            })
          }
        })
      }
    })
  },

不懂可以先看看文档
文档看不会可以联系我QQ745663930

画布上的文字自动换行单独摘出来了

去博客设置
这段是转载的但是自己略有改动完善有需要的可以借鉴，如对原作有侵权行为请联系我撤回就是了

// An highlighted block
text = '这是一段文字用于文本自动换行文本长度自行设置欢迎大家指出缺陷后期希望大家多多指教呀欢迎'//这是要绘制的文本
    var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    ctx.setFontSize(15 * rpx)
    ctx.setFillStyle("#000")
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < 220 * rpx) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 3) {
      var rowCut = row.slice(0, 3);
      var rowPart = rowCut[2];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        console.log(rowPart[a])
        if (ctx.measureText(test).width < 220 * rpx) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      console.log(empty)
      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(2, 2, group);//这里设定显示几行0的话就显示1行
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      console.log(row[b])
      ctx.fillText(row[b], 10 * rpx, 170 * rpx + b * 20 * rpx, 300 * rpx);
    }

这个很重要

api	具体作用
wx.createCanvasContext(string canvasId, Object this)	此方法是必要的首先要获取道画布实例（相当于Java里的new obj（））

获取实例后就使用这个实例调用方法就行了，

.draw这个方法是一个最后绘制保存的一个画布的方法切记最后调用这个方法
一定要用画布实例调用这个方法我的调用是ctx.draw（）。
例{new obj（）.draw()}

画布的步骤