前端新手

小程序canvas相关问题

2019-11-21  本文已影响0人  刘员外__

生成指定页面小程序二维码(小程序专属码) 分享图片


const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'share_image'; //自定义文件名
  /**
  * 生成指定页面小程序二维码(小程序专属码)  分享图片
  */
  qrcodeFn() {
    let that = this;
    this.setData({ showCanvas:true})
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret',
      complete: function (tokenRes) {
        console.log(tokenRes)
        wx.request({
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + tokenRes.data.access_token,
          method: 'POST',
          data: {
            scene: 1012,
            // 是否为Png,默认jpeg
            is_hyaline: true,
            // 是否自动取色
            auto_color: true,
            page: 'pages/mall/mall',
          },
          responseType: 'arraybuffer',
          complete: function (res) {
            let base64 = wx.arrayBufferToBase64(res.data);
            let userImageBase64 = 'data:image/jpg;base64,' + base64;
            that.base64src(userImageBase64, res => {
              console.log(res)
              that.setData({
                wxapp_code: res
              })
              that.drawImage();
            })
          },
        })
      },
    });
  },

  /**
   * base64转为本地图片
   */
  base64src(base64data, cb) {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      return (new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success() {
        cb(filePath);
      },
      fail() {
        return (new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
  },

小程序 canvas 多文本样式 格式错乱

绘制步骤...
//最后一步:设置一个延时器,让小程序反应一会,就能解决样式错乱
    ctx.draw(false);
    setTimeout(()=>{
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.windowWidth,
        height: that.data.windowHeight,
        destWidth: that.data.windowWidth * 4.2,
        destHeight: that.data.windowHeight * 4,
        canvasId: 'myCanvas',
        success(res) {
          console.log(res)
          that.setData({
            finally_img: res.tempFilePath
          })
          wx.hideLoading()
        }
      }, this)
    }, 100)
上一篇下一篇

猜你喜欢

热点阅读