yuminge-app/yun-min-program-plugin-master/packageB/member/business_card/CardCode/CardCode.js

// pages/member/rankingListSecond/rankingListSecond.js
// var app = getApp();
let myCanvasWidth = null;
let myCanvasHeight = null;
let unit = null;
let width = null;
Page({
  /**
	 * 页面的初始数据
	 */
  data: {
    loadingImg: true,
    card_id: '',
    cardData: {},
    //  图片
    drawing: [],
    savebtnText: '保存名片码',
    canvasWidth: '',
    canvasHeight: '',
    showBtn: false,
    ithumb: ''
  },

  /**
	 * 生命周期函数--监听页面加载
	 */
  onLoad: function(options) {
    this.setData({
      card_id: options.card_id
    });
    wx.getSystemInfo({
      success: (res) => {
        unit = res.windowWidth / 375;
        width = res.windowWidth;
        myCanvasWidth = 343 * unit;
        myCanvasHeight = 450 * unit;
        this.setData({
          canvasWidth: myCanvasWidth,
          canvasHeight: myCanvasHeight
        });
      }
    });
    wx.getStorage({
      key: 'info',
      success: (res) => {
        let str = res.data.card_name.split('名');
        this.setData({
          card_name: str[0]
        });
        wx.getStorage({
          key: 'iconFrom',
          success: res => {
            this.setData({
              min_code: res.data.min_code
            });
            this.getAvaterInfo();
          }
        });
      }
    });

    // wx.showLoading({
    //   title: '绘图中'
    // })
  },

  /**
	 * 生命周期函数--监听页面初次渲染完成
	 */
  onReady: function() {
		
  },

  /**
	 * 生命周期函数--监听页面显示
	 */
  onShow: function() {},

  /**
	 * 生命周期函数--监听页面隐藏
	 */
  onHide: function() {},

  /**
	 * 生命周期函数--监听页面卸载
	 */
  onUnload: function() {},

  /**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
  onPullDownRefresh: function() {},

  /**
	 * 页面上拉触底事件的处理函数
	 */
  onReachBottom: function() {
    if (this.data.isLoadMore) {
      this.getMoreData();
    } else {
      console.log('没有更多了');
    }
  },

  /**
	 * 用户点击右上角分享
	 */
  onShareAppMessage: function() {},
  // 画图
  getAvaterInfo() {
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.fillStyle = '#FFFFFF';

    ctx.fillRect((width - myCanvasWidth) / 2, 20, myCanvasWidth, myCanvasHeight);
    ctx.setTextAlign('center'); // 文字居中
    ctx.setFillStyle('#333'); // 文字颜色：黑色
    ctx.setFontSize(15); // 文字字号：22px
    ctx.fillText(this.data.card_name + '专属名片码', myCanvasWidth / 2 + 10, 80);
    // 二维码图片
    ctx.drawImage(this.data.min_code, myCanvasWidth / 2 - 80, 120, 180, 180);
    // 名片码的人
    ctx.setTextAlign('center'); // 文字居中
    ctx.setFillStyle('#333'); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    ctx.fillText('此名片码可印刷在', myCanvasWidth / 2 + 10, 360);
    // 长按
    ctx.setTextAlign('center'); // 文字居中
    ctx.setFillStyle('#50a6f9'); // 文字颜色：黑色
    ctx.setFontSize(14); // 文字字号：22px
    ctx.fillText('纸质名片、宣传单、海报、易拉宝等宣传册上', myCanvasWidth / 2 + 20, 380);
    // 生成
    ctx.setTextAlign('center'); // 文字居中
    ctx.setFillStyle('#8c8c8c'); // 文字颜色：黑色
    ctx.setFontSize(13); // 文字字号：22px
    ctx.fillText('扫一扫名片码即可查看', myCanvasWidth / 2 + 10, 400);

    ctx.draw(true, this.toimage());
  },
  toimage() {
    wx.hideLoading();
    this.setData({
      showBtn: true
    });
    let that = this;
    setTimeout(() => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        // width: this.data.canvasWidth,
        height: this.data.canvasHeight,
        destWidth: this.data.canvasWidth,
        destHeight: this.data.canvasHeight,
        canvasId: 'myCanvas',
        success: function(res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            ithumb: tempFilePath
          });
        },
        fail: function(res) {
          console.log(res);
        }
      });
    },1000);
  },
  // 图片生成之后的回调
  createdImage(val) {
    console.log(val, '65566565454');
  },
  // 识别二维码
  previewImage(e) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      // width: this.data.canvasWidth,
      height: this.data.canvasHeight,
      destWidth: this.data.canvasWidth* 4,
      destHeight: this.data.canvasHeight* 4,
      canvasId: 'myCanvas',
      success: function(res) {
        var tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        wx.previewImage({
          current: tempFilePath, // 当前显示图片的http链接  
          urls: [tempFilePath] // 需要预览的图片http链接列表  
        });
      },
      fail: function(res) {
        console.log(res);
      }
    });
  },
  // 点击保存到相册
  saveShareImg: function() {
    wx.showLoading({
      title: '保存中'
    });
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      // width: this.data.canvasWidth,
      height: this.data.canvasHeight,
      destWidth: this.data.canvasWidth * 4,
      destHeight: this.data.canvasHeight * 4,
      canvasId: 'myCanvas',
      success: function(res) {
        console.log(res);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
      fail: error => {
        wx.hideLoading();
      }

    });
  }
});