微信小程序分享朋友圈
原理：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,
width: 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{
width: 300px;
height: 380px;
display: block;
margin: 0 auto;
position: relative;
z-index: 99;
background: white;
margin-top: 60px;
border-radius: 6px;
overflow: hidden;
}
#pp{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
z-index: 98;
}
#pp1{
width: 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;
}
请发表评论