网上查了很多,都是不完整版,要么就是用不了的,气死我了。自己花了3天时间搞了个
利用wx.createCanvasContext方法,先看图
wx:9693312.png
<view class="main-page">
<view bindtap="priviewImg" class="qr-area" id="qr-area" style="width: 600rpx;height: 900rpx;">
<canvas canvas-id="shareCanvas" class="qr-canvas" style="width:100%;height:100%"></canvas>
</view>
</view>
<view class="button_view">
<button class="tap1" bindtap="tap1" hoverClass="tap1-hover">分享给好友</button>
<view class="line_view" /><!-- 微信 9693312-->
<button class="tap2" bindtap="tap2" hoverClass="tap2-hover">分享朋友圈</button>
</view>
page{
background-color: #f8f8f8;
padding-top: 40rpx;
background: #fff;
}
.share{
width: 300px;
height: 380px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 100rpx;
margin: auto;
}
.btn-box{
padding: 1060rpx 60rpx 0 60rpx;
}
button{
background: darkturquoise;
}
.main-page {
box-sizing: border-box;
padding: 30rpx;
height: 100%;
overflow: hidden;
}
.qr-area {
margin: 0 auto 20rpx;
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.10);
}
.share-text {
display: block;
line-height: 40rpx;
font-size: 28rpx;
color: #2E2E2E;
text-align: center;
margin-bottom: 70rpx;
}
.btn-sub {
font-size: 28rpx;
line-height: 50rpx;
color: #00D196;
text-decoration-line: none;
border: none;
background-color: transparent;
}
.opera-area {
background: none;
display: block;
text-align: center;
}
.btn-spec {
display: inline-block;
padding: 0;
margin: 0 74rpx 0 0;
background: none;
text-align: center;
font-size: 0;
line-height: inherit;
}
.last {
margin: 0;
}
.btn-spec text {
font-size: 28rpx;
color: #2E2E2E;
text-align: center;
}
.btn-spec image {
width: 80rpx;
height: 80rpx;
display: block;
margin: 0 auto 20rpx;
}
/** 微信 9693312 **/
.button_view{
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
left: 0;
right: 0;
align-items: center;
margin: 0 auto;
position: fixed;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 0 20px #e6e6e6;
height: 100rpx;
width: 580rpx;
background-color: #fff;
}
.button_view .line_view {
height: 30rpx;
width: 0.2%;
box-sizing: border-box;
background-color: #eee;
}
.button_view button {
color: #fff;
height: 100rpx;
width: 49.9%;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
font-size: 36rpx
}
button{
background-color: transparent;
border: none;
position: relative;
margin: 0;
line-height: normal;
padding: 0;
border-radius: 0;
}
button::after {
content: none;
}
button::before {
width: 0;
height: 0;
border: none;
}
.tap1{
background-color: rgba(14, 133, 245, 0.411);
}
.tap2{
background-color: rgba(104, 14, 250, 0.39);
}
/**按下按钮颜色*/
.tap1-hover{
background-color: rgba(36, 158, 233, 0.582);
}
.tap2-hover{
background-color: rgba(104, 14, 250, 0.493);
}
let windowW = 0, windowH=0;
var bjx =0, bjy= 0, bjWidth =0, bjHeigh= 0;
var fx = 0, fy = 0, fWidth = 0, fHeigh = 0;
var ex = 0, ey = 0, eWidth = 0, eHeigh = 0;
var tx = 0, ty = 0, tSize = 0, tStyle = "";
Page({
data: {
shareTitle: '长按查看闪照', // 分享标题
shareCoverImg: 'http://tp.qxapk.com/xcx/img/ssa1.jpg', // 分享背景图
shareQrImg: 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg', // 分享小程序二维码
fengmian: 'http://tp.qxapk.com/xcx/img/111.png'//封面图
},
onLoad: function (options) {
/**
wx.navigateTo({//通过该方法切换携带的 imgid 可以用 options.imgid接收
url: "/pages/haibao/index?imgid=1",
})
*/
console.log(options);
windowW = wx.getSystemInfoSync().windowWidth;
windowH = wx.getSystemInfoSync().screenHeight;
switch (options.imgid) {
case "1":
//背景图
bjx = 0;
bjy = 0;
bjWidth = windowW * 0.8;
bjHeigh = windowW * 1.2;
this.data.shareCoverImg = 'http://tp.qxapk.com/xcx/img/sz1.jpg';
//封面图
fx = windowW * 0.12;
fy = windowW * 0.17;
fWidth = windowW * 0.56;
fHeigh = windowW * 0.68;
this.data.fengmian = 'http://tp.qxapk.com/xcx/img/111.png';
//二维码
ex = windowW * 0.17;
ey = windowW * 0.93;
eWidth = windowW * 0.2;
eHeigh = windowW * 0.2;
this.data.shareQrImg = 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg';
//文字
tx = windowW * 0.21;
ty = windowW * 0.53;
tSize = windowW * 0.064;
tStyle = "#FFF";
break;
}
this.downloadImg();//生成图片
},
downloadImg: function () {
let that = this;
const ctx = wx.createCanvasContext('shareCanvas');// 创建画布
wx.getImageInfo({//下载视频封面图
src: that.data.shareCoverImg,
success: (res2) => {
ctx.drawImage(res2.path, bjx, bjy, bjWidth , bjHeigh);//背景图
wx.getImageInfo({//下载视频封面图
src: that.data.fengmian,
success: (res8) => {
ctx.drawImage(res8.path, fx, fy, fWidth, fHeigh);//背景图
wx.getImageInfo({// 下载二维码
src: that.data.shareQrImg,
success: (res3) => {
//二维码
ctx.drawImage(res3.path, ex, ey, eWidth, eHeigh);
//文字
ctx.setFillStyle(tStyle);//颜色:黑色
ctx.setFontSize(tSize);//字号:16px
ctx.fillText(that.data.shareTitle, tx ,ty);
ctx.draw(true);//制图结束
}
})
}
})
}
})
},
save_img() {//保存到相册
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({ title: '分享图片已保存到相册' });
}
})
}
}, this)
}
})