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

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

效果图

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

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

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

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

<view style="width: 200rpx;margin-top: -7.5rpx;">    <text class="cuIcon-share" style="font-size: 30rpx;" @click="createShareImg">分享图片</text><canvas style="width: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画布大小

        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);         // 文字字号：20pxlet 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:"没有授权无法生成图片"})}})

更多相关文章

随机推荐