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

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

效果图

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

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:"没有授权无法生成图片"})}})

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

微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
微信小程序分享图片大小处理
1.在分享的page 添加 canvas 标签 <canvas canvas-id="canvas"style="position: absolute; top: ...
android微信分享图片踩坑之旅
分享图片代码如下 bitmap.recycle() 资源被回收了,所以每次分享的bitmap必须是重新创建出来的 /*** 微信图片分享** @param shareType {@link SendM ...
微信小程序生成分享图然后保存图片分享朋友圈
微信小程序可以实现快速的转发好友实现分享,但是不能直接分享到朋友圈,但是有需要要这么做,要怎么实现呢? 查看文档之后,大概有了实现思路 1.使用微信小程序的wx.createCanvasContext ...
开发嵌入京东app h5| Hybrid | 微信小程序｜实践踩坑总结十六条
一前言笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目,在此期间遇到很多坑.这篇文章主要是针对 h5| Hybrid | 微信小程序三个方向来讲述我遇到的坑,以及详细讲解我是如何解 ...
微信小程序分享图片给微信好友（如二维码）
目录前言一.使用哪种api? 二.对图片的处理需要转化为临时路径三.Windows端兼容性问题前言最近在公司开发一个微信小程序项目,用到的uniapp技术,在分享图片时,查看了uniapp的 ...
Unity3d C# 开发微信小游戏分享图片、朋友圈等功能实现（含源码）
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前编写了一篇u3 ...
小程序组件onload_微信小程序自定义组件踩坑教程
微信小程序不支持自定义组件,只提供了一个非常受限制的模板功能,尤其缺乏了开发产品中最重要的几个功能:模板内的数据只能由当前页面传递,无法预先设置一些初始化数据以达到复用的目的: 模板内的数据变化无法通 ...

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

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

最新文章

热门文章