由于小程序不能直接分享到朋友圈，因此需要用户手动生成二维码图片并保存到本地相册，然后分享到朋友圈。
简书封面.png
一、效果图
二、原理
通过canvas绘图，把图片以及文字绘在canvas上面，再通过wx.canvasToTempFilePath()生成图片并把绘制的图片路径保存到一个变量，然后通过wx.saveImageToPhotosAlbum()把这张图片保存到本地相册。
三、疑难点
1、在demo中我们需要控制canvas的显示和隐藏，如果使用了display:none那么将无法进行绘制，如果用opactiy:0在开发者工具可以达到目的效果，在真机测试上无效。这时我们可以通过控制top值这个小技巧来解决(T_T想了好久)
2、适配问题，canvas以px为单位，我们需要把它转换为rpx来适应各种屏幕大小。通过wx.getSystemInfo()来获取当前设备信息，这里需要获取的是屏幕宽度和高度，它们的转换关系是（屏幕宽度 / 750）* canvas的宽度、（屏幕高度 / 1334）* canvas的高度。
3、生成图片模糊问题，在wx.canvasToTempFilePath()中设置destWidth和destHeight的大小为实际图片的2倍以上即可。
四、重点代码
<!--canvas不能用display:block和none 设置样式opacity为0真机无效 因此设置top位置在屏幕外面即可-->
<canvas canvas-id="myCanvas" class="{{isOpacity == true?'topScroll':''}}"></canvas>
/*canvas宽高*/
canvas{
width: 600rpx;
height: 750rpx;
position: fixed;
left: 75rpx;
top: 50%;
margin-top: -435rpx;
}
/*控制canvas显示和隐藏 top值要大 要保证能溢出到屏幕外面*/
.topScroll{
position: absolute;
top: -2000rpx;
}
//获取当前设备屏幕宽高 在onLoad生命周期里执行
onLoad: function (){
var that = this;
wx.getSystemInfo({
success(res) {
console.log(res);
console.log(res.windowWidth);
console.log(res.windowHeight);
that.setData({
deviceWidth: res.windowWidth,
deviceHeight: res.windowHeight
})
}
})
}
//生成图片
showImg:function (){
var that = this;
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '../../images/cat.jpg';
var imgUserPath = '../../images/user.png';
var code = '../../images/code.jpg';
//绘制图像到画布 x y width height
ctx.drawImage(imgPath, 0, 0, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 500);
ctx.setFillStyle('white')
//创建一个矩形
ctx.fillRect(0, (that.data.deviceHeight / 1334) * 500, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 350);
//绘制图像到画布
ctx.drawImage(imgUserPath, (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 530, (that.data.deviceWidth / 750) * 120, (that.data.deviceWidth / 750) * 120)
//创建文字
ctx.setFontSize((that.data.deviceWidth / 750) * 30)
ctx.setFillStyle('#333333')
//文案 x y
ctx.fillText('毕竟1米八', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 590)
ctx.setFontSize((that.data.deviceWidth / 750) * 25)
ctx.setFillStyle('#666666')
ctx.fillText('Web前端攻城狮', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 630)
ctx.setFontSize((that.data.deviceWidth / 750) * 22)
ctx.setFillStyle('#999999')
ctx.fillText('长按识别图中二维码增加好友', (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 710)
//绘制图像到画布
ctx.drawImage(code, (that.data.deviceWidth / 750) * 470, (that.data.deviceHeight / 1334) * 540, (that.data.deviceWidth / 750) * 100, (that.data.deviceWidth / 750) * 100)
//渲染
ctx.draw()
//需要把canvas转成图片后才能保存
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 600,
height: 750,
destWidth: 1200, //2倍关系
destHeight: 1500, //2倍关系
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath);
that.setData({
//关键 赋值给变量
shareImgSrc: res.tempFilePath
})
},
fail: function (res) {
console.log(res)
}
})
}
//保存图片
saveImg: function (){
var that = this;
wx.saveImageToPhotosAlbum({
//shareImgSrc为canvas赋值的图片路径
filePath: that.data.shareImgSrc,
success(res) {
console.log(res);
wx.showModal({
title: '保存成功',
content: '图片成功保存到相册了，去发圈噻~',
showCancel: false,
confirmText: '确认',
confirmColor: '#21e6c1',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
}
好了，大功告成！
网友评论