恶补canvas。。。

    1. const ctx = wx.createCanvasContext('myCanvas');
    2.     /**/获取设备信息
    3.     wx.getSystemInfo({
    4.       success: function (res) {
    5.         let clientHeight = res.windowHeight;
    6.         let clientWidth = res.windowWidth;
    7.         //获取屏幕宽度，获取自适应单位
    8.         let rpx = res.windowWidth / 375;
    9.         that.setData({
    10.           clientHeight: clientHeight,
    11.           clientWidth: clientWidth,
    12.           rpx:rpx
    13.         });
    14.       }
    15.     });
    17.     // 生成带参数二维码
    18.     this.drawBgPic(ctx,that,function () {
    19.       wx.request({
    20.         url: 'https://www.xxxxxx.com/xxx/wx_qrcode',
    21.         data: {
    22.           page: 'pages/xxx/xxx'
    23.         },
    24.         responseType: 'arraybuffer',
    25.         success: function (res) {
    26.           //网络图片要下载到本地以后才能绘制
    27.           var qrImg = wx.arrayBufferToBase64(res.data);
    28.           that.setData({
    29.             code: qrImg
    30.           })
    31.           const fsm = wx.getFileSystemManager(), //文件管理器
    32.             FILE_BASE_NAME = 'tmp_base64src', //文件名
    33.             format = 'png', //文件后缀
    34.             base64Str = that.data.code
    35.           var buffer = wx.base64ToArrayBuffer(base64Str), //base 转二进制
    36.             filePath = `${wx.env.USER_DATA_PATH}/www.${format}`; //文件名
    37.           fsm.writeFile({ //写文件
    38.             filePath,
    39.             data: buffer,
    40.             encoding: 'binary',
    41.             success(res) {
    42.               wx.getImageInfo({ //读取图片
    43.                 src: filePath,
    44.                 success: function (res) {
    45.                   that.circleImg(ctx, res.path, 200 * that.data.rpx, 250 * that.data.rpx, 55 * that.data.rpx)
    46.                   that.drawName(ctx,that)
    47.                 },
    48.               })
    49.             }
    50.           })
    51.         },
    52.         complete:function(){
    53.           wx.hideLoading()
    54.         }
    55.       })
    56.     });
    57. //圆形二维码
    58. circleImg: function (ctx, img, x, y, r) {
    59.     ctx.save();
    60.     var d = 2 * r;
    61.     var cx = x + r;
    62.     var cy = y + r;
    63.     ctx.beginPath();
    64.     ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    65.     ctx.clip();
    66.     ctx.drawImage(img, x, y, d, d);
    67.   },
    68.   /**
    69.    * 生成分享图
    70.    */
    71.   /**
    72.    * 保存到相册
    73.    */
    74.   save: function () {
    75.     var that = this;
    76.     //获取相册授权
    77.     wx.getSetting({
    78.       success(res) {
    79.         if (!res.authSetting['scope.writePhotosAlbum']) {
    80.           wx.authorize({
    81.             scope: 'scope.writePhotosAlbum',
    82.             success() {
    83.               that.savaImageToPhoto();
    84.             }
    85.           })
    86.         } else {
    87.           that.savaImageToPhoto();
    88.         }
    89.       }
    90.     })
    91.   },
    92.   drawName: function(ctx,that,callback){
    93.     ctx.save();
    94.     ctx.setFontSize(20)
    95.     ctx.fillText(that.data.nickname, 10, 10)
    96.     ctx.draw();
    97.     ctx.save();
    98.     if(callback){ callback() }
    99.   },
    100.   drawBgPic: function (ctx,that,callback) {
    101.     wx.showLoading({
    102.       title: '努力生成中',
    103.       mask:true
    104.     })
    105.     var path = 'https://www.xxxxx.com/img/xxx.png';
    106.     wx.getImageInfo({
    107.       src: path, //服务器返回的图片地址
    108.       success: function (res) {
    109.         //res.path是网络图片的本地地址
    110.         let Path = res.path;
    111.         ctx.drawImage(Path, 0, 0, 325 * that.data.rpx , 450 * that.data.rpx)
    112.         ctx.setTextAlign('left')
    113.         ctx.setFillStyle('#000')
    114.         ctx.setFontSize(18*that.data.rpx)
    115.         ctx.fillText(that.data.nickname, (325 / 7) * that.data.rpx, 275*that.data.rpx)
    116.         callback()
    117.       },
    118.       fail: function (res) {
    119.         console.log(res)
    120.         //失败回调
    121.       }
    122.     });
    123.   },
    124. //保存
    125.   saveewm: function () {
    126.     let that = this;
    127.     wx.showLoading({
    128.       title: '努力生成中...'
    129.     })
    130.     wx.canvasToTempFilePath({
    131.       x: 0,
    132.       y: 0,
    133.       width: that.data.winWidth,
    134.       height: that.data.winHeight - 70,
    135.       destWidth: that.data.winWidth,
    136.       destHeight: that.data.winHeight - 70,
    137.       canvasId: 'myCanvas',
    138.       success: function (res) {
    139.         wx.hideLoading()
    140.         wx.saveImageToPhotosAlbum({
    141.           filePath: res.tempFilePath,
    142.           success(res) {
    143.             wx.showModal({
    144.               content: '图片已保存到相册了',
    145.               showCancel: false,
    146.               confirmText: '我知道啦',
    147.               confirmColor: '#232323',
    148.               success: function (res) {
    149.                 if (res.confirm) {
    150.                   console.log('用户点击确定');
    151.                   that.setData({
    152.                     hidden: true
    153.                   })
    154.                 }
    155.               }
    156.             })
    157.           }
    158.         })
    159.       },
    160.       fail: function (res) {
    161.         console.log(res)
    162.       }
    163.     })
    165.   },