微信小程序生成分享图片踩坑大计划

微信小程序有个非常好的缺点，就是分享不能分享到朋友圈，怎么办呢，那只好生成图片，图片里面加个小程序码。

效果图

 但不过其中有坑大家注意啦

HTML代码,我这个是不显示图片的生成图片，所以canvas设置了position:fixed;left:100%;这些，这样canvas就不会显示在手机上了，如果你想展示生成的图片，你可以有以下几种方法，这里我不展示图片，所以没写。

1.一个canvas,设置overflow:hidden;

2.一个“隐藏”的canvas+img

<view style=" 200rpx;margin-top: -7.5rpx;">
    <text class="cuIcon-share" style="font-size: 30rpx;" @click="createShareImg">分享图片</text>
	<canvas style="900px;position:fixed;left:100%;" :style="height" canvas-id="shareCanvas"></canvas>
</view>

在组件的mounted函数提前获取分享图片，当然你可以选择按下按钮的时候获取，我这里获取了三张图片，第一张小程序码图片，第二张背景图片，第三张用户图片，我这边就三张图片，直接写三次就行了，如果你想放多张图片，可以看一下这里https://developers.weixin.qq.com/community/develop/doc/00000824ae06c01f8347b1b925c000

            mounted() {
			that = this;
			ctx = uni.createCanvasContext('shareCanvas',this);
			ctx.scale(30, 30);
			
			wx.getImageInfo({
			    src: "小程序图片src",
				success: (res1) => {
					minAppC = res1.path;
				},
			});
			
			wx.getImageInfo({
			    src: "背景图片src",
				success: (res1) => {
					backImg = res1;
					that.height = "height:"+(res1.height+150)+"px;";//这里因为加头像和标题+150
				},
			});
			
			wx.getImageInfo({
			    src:"用户头像图片src",
				success: (res1) => {
					avatar = res1.path;
				},
			});
			
			
		},

然后就是用户点击生成图片了，在上面的HTML里面点击事件为createShareImg，这个地方有很多坑

1.在ctx.draw(true);后面直接写保存,保存代码需要卸载回调函数里面

2.ctx.draw不进回调函数，在draw之前写个ctx.fillText(" ", 0, 0);

3.生成的图片不清晰,一般情况，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题，只需要放大画布就可以了。

4.canvasToTempFilePath无反应，主要是因为授权问题，请在获取用户授权后执行之后的处理代码，我这里建议直接调用uni.authorize({scope:'scope.writePhotosAlbum'在回调中判断成功与否

5.canvas只有一点点,查看canvas画布大小

6.

        methods: {
			createShareImg:function(e){
				uni.showLoading({
					mask:true,
					title:"正在生成图片"
				})
				
				
				let dynamic = this.$parent.dynamic.dynamic;
				
				ctx.setFillStyle('#fff');
				ctx.fillRect(0, 0, 30, (backImg.height+300)/30);
			
				let dx = 0;
				if(backImg.width<900){
					dx = (900 - backImg.width) / 60;
				}
				
				
				ctx.drawImage(backImg.path, dx, 0, backImg.width / 30, (backImg.height-150)/30);
				ctx.drawImage(minAppC, 26, (backImg.height-150)/30-4, 4, 4);
				ctx.drawImage(avatar,1,(backImg.height-150)/30+1,4,4);
						
				ctx.setFillStyle('#000');  // 文字颜色：黑色
				ctx.setFontSize(1.4);         // 文字字号：20px
						
				let contentH = (backImg.height-150)/30+3;		
						
				if (dynamic.title.length <= 15) {
					// 不用换行
					ctx.fillText(dynamic.title, 6, contentH)
				} else if (dynamic.title.length <= 30) {
					// 两行
					let firstLine = dynamic.title.substring(0, 15);
					let secondLine = dynamic.title.substring(15, 30);
					ctx.fillText(firstLine, 6, contentH)
					ctx.fillText(secondLine, 6, contentH+2)
				} else {// 超过两行
					let firstLine = dynamic.title.substring(0, 15);
					let secondLine = dynamic.title.substring(15, 30) + '...';
					ctx.fillText(firstLine, 6, contentH)
					ctx.fillText(secondLine, 6, contentH+2)
				}
				
				//ctx.draw(true);
				
				ctx.setFillStyle('#0081FF');
				//ctx.font='1.2px 楷体';
				ctx.fillText("微信扫一扫或长按图片前往图中包含的小程序", 2, contentH+6)
				ctx.draw(true,function(){
					uni.canvasToTempFilePath({
						canvasId: 'shareCanvas',
						quality:1,
						success: function (resd) {
							
							if(app.globalData.$writePhotosAlbum == false){
								console.log("没有授权");
								uni.hideLoading();
								uni.authorize({
									scope:'scope.writePhotosAlbum',
									success(res) {
										console.log(res);
										saveImg(resd);
									},fail(res) {
										console.log(res);
									}
								})
							}else{
								saveImg(resd);
							}
							
						},fail() {
							uni.hideLoading();
						}
					}, that);
				});
				
			}
		},

保存图片

function saveImg(res){
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePath,
			success: function (res) {
				uni.hideLoading();
				uni.showToast({
					title:"保存成功,可以发送朋友圈啦"
				})
			},fail() {
				uni.hideLoading();
			}
		})
	}

 uni.authorize({
									scope:'scope.writePhotosAlbum',
									success(res) {
										if(res.errMsg == "authorize:ok"){
											saveImg(resd);
										}else{
											uni.hideLoading();
											uni.showToast({
												icon:'none',
												title:"没有授权"
											})
										}
									},fail(res) {
										uni.hideLoading();
										uni.showToast({
											icon:'none',
											title:"没有授权无法生成图片"
										})
									}
								})