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;
}
三、创建canvas并保存到系统相册
tips
商品图是正方形的，所以这里商品图的宽高都用canvas的宽文字不能换行，这里只是简单的处理了一下
注意:
wx.canvasToTempFilePath(Object object, Object this) 这个的使用，文档有一句话需要注意的：“把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。”
const app = getApp()
const regeneratorRuntime = app.globalData.regeneratorRuntimeconst
const 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('二维码生成失败');
