// 封裝獲取微信圖片信息。export const getWxImageInfo = (imgPath) => {  return new Promise((resolve, reject) => {    wx.getImageInfo({      src: imgPath,      success: res => {        resolve(res)      },      fail: res => {        reject(res)      }    })  })}// 封裝獲取節點選擇器信息export const getSelectQurey = (queryStr) => {  return new Promise(resolve => {    var query = wx.createSelectorQuery();    query.select(queryStr).boundingClientRect();    query.exec(res => {      resolve(res)    })  })}// 封裝把畫布導出生成指定大小的圖片export const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => {  return new Promise((resolve, reject) => {    wx.canvasToTempFilePath({      width,      height,      canvasId,      fileType,      success: res => {        resolve(res)      },      fail: res => {        reject(res)      }    })  })}// 封裝保存圖片到系統相冊export const saveImageToPhotosAlbum = (filePath) => {  return new Promise((resolve, reject) => {    wx.saveImageToPhotosAlbum({      filePath,      success: res => {        resolve(res)      },      fail: res => {        reject(res)      }    })  })}

<view class="icon-download" catchtap="getCanvas">點擊生成圖片</view><!-- 二維碼大圖 --><view class='shade' wx:if="{{isShowCanvas}}">  <view class='qr-code'>    <canvas class='qr-canvas' canvas-id="qrCanvas" id="qrCanvas"></canvas>    <view class='qr-btn'>      <view class='qr-btn-save' catchtap='saveImageToPhotosAlbumFunc'>保存圖片,分享到朋友圈</view>      <view class='qr-btn-cancel' catchtap='hideCanvas'>取消</view>    </view>  </view></view><!-- 二維碼大圖.end -->

/* 查看大圖 */.shade {  width: 100%;  height: 100%;  background-color: rgba(240, 235, 235, 0.5);  position: fixed;  z-index: 100;  top: 0;  left: 0;}.qr-code {  width: 600rpx;  height: 1000rpx;  background-color: #fff;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); /* margin: 30rpx auto; */}.qr-canvas {  display: block;  background-color: #fff;  margin: 0 auto;  width: 600rpx;  height: 900rpx;}.qr-btn {  width: 600rpx;  height: 100rpx;  line-height: 100rpx;  margin: 0 auto;  font-size: 28rpx;  color: #fff;  display: flex;  background-color: #658dc5;}.qr-btn-save {  flex: 0 0 500rpx;  text-align: center;  border-right: 1rpx solid #fff;}.qr-btn-cancel {  text-align: center;  flex: 0 0 100rpx;}

const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = require('../../utils/util.js')import {  getSelectQurey,  getWxImageInfo,  canvasToTempFilePath,  saveImageToPhotosAlbum} from '../../datas/common.js'Page({  data: {    isShowCanvas: false, // 是否顯示canvas        wxaCode: 'https://xxx..jpg', // 商品小程序碼    goodsImageUrl: 'https://xxx..jpg', // 商品圖片        canvasTempFilePath: '', // canvas導出生成圖片的臨時路徑    },  // 點擊顯示要生成的canvas    getCanvas(e) {    if (!this.data.wxaCode) {      util.showToast('二維碼生成失敗');      return;    }    this.setData({      isShowCanvas: true    }, () => {      this.createCanvas();    })  },  // 隱藏canvas    hideCanvas() {    this.setData({      isShowCanvas: false    })  },  // 創建canvas    async createCanvas() {    wx.showLoading({      title: '圖片生成中...'    })    const _this = this    // 創建節點選擇器        const res = await getSelectQurey('#qrCanvas');    // canvas的寬高        const cvWidth = res[0].width;    const cvHeight = res[0].height;    const cvSubValue = cvHeight - cvWidth    const qrWidth = cvSubValue / 1.5    const qrMargin = (cvSubValue - qrWidth) / 2    const qrX = cvWidth - qrWidth - qrMargin / 2    const qrY = cvWidth + qrMargin    const shopNameY = cvWidth + cvSubValue - qrWidth    // 二維碼網絡圖片轉臨時路徑        let qrImagePath = '';    try {      const wxaCode = _this.data.wxaCode;      const qrImage = await getWxImageInfo(wxaCode);      qrImagePath = qrImage.path    } catch (e) {      wx.hideLoading();      this.hideCanvas();      util.showToast('二維碼生成失敗');      return;    }    // 商品網絡圖片轉臨時路徑        let goodsImagePath = '/images/default_goods.png';    const goodsImage = _this.data.goodsImageUrl;    if (goodsImage) {      const goodsImageRes = await getWxImageInfo(goodsImage);      goodsImagePath = goodsImageRes.path;    }    // 創建canvas        var ctx = wx.createCanvasContext('qrCanvas', _this);    // 設置背景        ctx.setFillStyle('#fff');    ctx.fillRect(0, 0, cvWidth, cvHeight);    // 設置商品圖片 商品圖寬高是一樣的        ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth);    // 設置二維碼圖片        ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth);    // 設置店鋪名稱        const shopName = '我是店鋪名稱';    ctx.setFillStyle('black')    ctx.setFontSize(16)    ctx.setTextAlign('left')    ctx.fillText(shopName, 10, shopNameY, cvWidth - qrWidth);    // 設置商品名稱 文字不能換行，這里只是簡單的處理了一下        const goodsName = '一個名字很長很長的商品就問你怕不怕';    let goodsName1 = '';    let goodsName2 = '';    ctx.setFillStyle('black')    ctx.setFontSize(14)    ctx.setTextAlign('left')    if (goodsName.length <= 10) {      ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth);    } else    if (goodsName.length > 10 && goodsName.length <= 22) {      goodsName1 = goodsName.substring(0, 10);      goodsName2 = goodsName.substring(10);      ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth);      ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth);    } else {      goodsName1 = goodsName.substring(0, 10);      goodsName2 = goodsName.substring(10, 22) + '...';      ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth);      ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth);    }    // 設置提示        const tipText = '長按識別小程序，馬上下單！';    ctx.setFillStyle('gray')    ctx.setFontSize(8)    ctx.setTextAlign('center')    ctx.fillText(tipText, cvWidth / 2, cvHeight - 10);    // 完成        ctx.draw(false, () => {      wx.hideLoading();      _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas')    });  },  // 把當前畫布指定區域的內容導出生成指定大小的圖片    async canvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) {    try {      let res = await canvasToTempFilePath(cvWidth, cvHeight, qrCanvas);      this.setData({        canvasTempFilePath: res.tempFilePath      });    } catch (error) {      console.log(error);      util.showToast(error.errMsg);    }  },  // 保存圖片到本地    async saveImageToPhotosAlbumFunc() {    try {      let res = await saveImageToPhotosAlbum(this.data.canvasTempFilePath);      console.log(res);      this.hideCanvas();      util.showToast('圖片保存成功');    } catch (err) {      console.log(err);    }  }})