原理：canvas生成图片再保存到手机
JS
onShow: function () {
var that = this;
//1. 请求后端API生成小程序码
// that.getQr();
//2. canvas绘制文字和图片
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '../../image/bn.jpg'
var bgImgPath = '../../image/l11.png';
var xcxm = '../../image/xcxm.jpg';
var baibg = '../../image/baibg.png';
ctx.drawImage(baibg, 0, 0, 600, 1800);
ctx.drawImage(imgPath, 0, 0, 400, 200);
ctx.setFillStyle('white')
//ctx.fillRect(0, 520, 600, 280);
//ctx.drawImage(imgPath, 30, 550, 60, 60);
ctx.drawImage(bgImgPath, 5, 210, 60, 60);
// ctx.drawImage(imgPath, 100, 0, 160, 160);
ctx.setFontSize(14)
ctx.setFillStyle('#6F6F6F')
ctx.fillText('辛辣天赛', 65, 245)
ctx.setFontSize(16)
ctx.setFillStyle('#464646')
ctx.fillText('考考姚蜜', 10, 290)
ctx.setFontSize(16)
ctx.fillText('涩开一塔米', 10, 310)
ctx.setFontSize(14)
ctx.fillText('长按扫码查看详情', 10, 340)
ctx.drawImage(xcxm, 190, 260, 80, 80);
ctx.draw()
},
save:function(){
wx.canvasToTempFilePath({
x: 0,
y: 0,
900,
height: 1200,
destWidth: 900,
destHeight: 1200,
canvasId: 'myCanvas',
quality:1,
success: function (res) {
console.log(res.tempFilePath);
var dz= res.tempFilePath
/* that.setData({
shareImgSrc: res.tempFilePath
})*/
wx.saveImageToPhotosAlbum({
filePath: dz,
success(res) {
wx.showModal({
title: '存图成功',
content: '图片成功保存到相册!',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
// that.hideShareImg()
}
})
}
})
},
fail: function (res) {
console.log(res)
}
})
},
WXML
<canvas canvas-id='myCanvas' id='oo'></canvas>
<view id='pp'></view>
<view id='pp1' bindtap='save'>保存图片</view>
CSS
#oo{
300px;
height: 380px;
display: block;
margin: 0 auto;
position: relative;
z-index: 99;
background: white;
margin-top: 60px;
border-radius: 6px;
overflow: hidden;
}
#pp{
100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
z-index: 98;
}
#pp1{
100px;
height: 40px;
position: fixed;
background: rgba(0,0,0,0.5);
top: 460px;
left: 50%;
margin-left: -50px;
z-index: 99;
background: skyblue;
color: white;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius: 8px;
}