关于vue.js:小程序-canvas-画名片

用 cancas 画名片 波及到技术 原型头像、文字超出换行、字体大小色彩、背景图
wxml 页面内容

<view class="pages">
  <canvas  canvas-id="shareKapian" style="width:{{width}}px;height:{{height}}px;"></canvas>
</view>

wxjs 内容
线上图片须要通过 localImge 函数将线上门路转为本地门路方可。
步骤 先开机相机权限 canvasKapian—-> 而后开始绘制名片 canvasClick—-> 最初下载名片 downFn

Page({ 
  data: {
    width: 320,
    height: 300,
    isDisable: false,// 避免屡次点击
  }, 
  onLoad: function (options) {this.canvasKapian();
  },
  // 绘制名片
  canvasKapian() { 
    wx.getSetting({
      success: res => {console.log(res);
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: res => {this.canvasClick();
            },
            fail: err => {
              wx.showModal({
                title: "提醒",
                content: '图片保留失败，您须要开启相册权限并且从新保留, 是否开启?',
                success: res => {if (res.confirm) {
                    wx.openSetting({success: (res) => {if (res.authSetting['scope.writePhotosAlbum']) {this.canvasClick();
                        } else {
                          wx.showToast({
                            title: '获取权限失败, 无奈应用保留图片或视频到您的相册',
                            icon: 'none'
                          })
                        }
                      },
                    })
                  }
                }
              })
            }
          })
        } else {this.canvasClick();
        }
      }
    })
  },
  canvasClick() {
    this.setData({isDisable: true})
    wx.showLoading({title: '名片生成中...',})
    // let image1 = this.localImge(this.data.background);
    // let image2 = this.localImge(this.data.wxCode);
    // let image3 = this.localImge(this.data.headerImg);
    // Promise.all([image1, image2, image3]).then(res => {//   let background1 = res[0];
    //   let wxCode1 = res[1];
    //   let headerImg1 = res[2];
      const ctx = wx.createCanvasContext("shareKapian");
      ctx.setFillStyle("#22DDB8"); // 背景色
      // 背景图
      ctx.drawImage('../../image/bc.jpg', 0, 0, this.data.width, this.data.height);
      ctx.fillRect(0, 0, this.data.width, this.data.height); 
      let top = 30; 
      let left = 30;
      // 头像
      this.circleImg(ctx, '../../image/bc.jpg', left, top, 20)
      // 流动
      ctx.fillStyle="#9B712E";
      ctx.setFontSize(18);
      ctx.font = 'bold'; 
      ctx.fillText('bingxiaoxiao', left + 50, top);
      // 介绍
      ctx.setFontSize(14);  
      this.drawText(ctx, '2020 年 7 月 24 日上午，中国外交部告诉美国驻华使馆，中方决定撤销对美国驻成都总领事馆的设立和运行许可，并对该总领事馆进行所有业务和流动提出具体要求。', left + 50, top + 25 , 0, 135)
      ctx.draw(false, () => {
        wx.canvasToTempFilePath({
          canvasId: "shareKapian",
          success: res => {wx.hideLoading();
            this.setData({catShopUrl: res.tempFilePath});
            this.downFn();},
          fail: err => {console.log('生成失败', err);
          }
        });
      });
    // }).catch(err => {//   console.log(err);
    //   wx.hideLoading();
    //   wx.showToast({
    //     title: '图片加载失败, 请返回重试',
    //     icon: 'none'
    //   })
    // })
  },
  // 保留图片
  downFn() {
    let imgurl = '';
    wx.showLoading({title: '保留中...',})
    imgurl = this.data.catShopUrl;
    wx.saveImageToPhotosAlbum({
      filePath: imgurl,
      success: res => {wx.hideLoading()
        wx.showToast({
          title: "保留胜利，从相册中分享到朋友圈吧",
          icon: "none",
          duration: 4000
        });
        this.setData({isDisable: false}) 
      },
      fail: function (err) {console.log(err)
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {wx.hideLoading();
          wx.showModal({
            title: "提醒",
            content: '图片保留失败，您须要开启相册权限并且从新保留, 是否开启?',
            success: res => {if (res.confirm) {
                wx.openSetting({complete: (res) => {console.log(res);
                  },
                })
              }
            }
          })
        }
      }
    });
  },
  // 生成本地图片
  localImge: function (src) {console.log('src', src);
    return new Promise(function (resolve, reject) {
      wx.downloadFile({
        url: src,
        success: function (res) {resolve(res.tempFilePath);
        },
        fail: err => {reject(err)
        }
      });
    });
  },
  // 超出换行
  drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
    var lineWidth = 0;
    var lastSubStrIndex = 0; // 每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > canvasWidth) {ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); // 绘制截取局部
        initHeight += 16; //16 为字体的高度避免文字重叠
        lineWidth = 0;
        lastSubStrIndex = i;
        titleHeight += 30;
      }
      if (i == str.length - 1) { // 绘制残余局部
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
      }
    }
    // 题目 border-bottom 线距顶部间隔
    titleHeight = titleHeight + 10;
    return titleHeight
  },
  // 圆形图片
  circleImg: function (ctx, img, x, y, r) {ctx.save()
    ctx.beginPath()
    var d = 2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore()},
})