小潘杂谈

小程序之如何实现朋友圈图片的生成

字号+ 作者:admin 来源:seo博客 2020-09-17 18:40 我要评论( )

这篇文章主要介绍了关于小程序之如何实现朋友圈图片的生成,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 微信的小程序是没有分享到朋友圈的功......

这篇文章主要介绍了关于小程序之如何实现朋友圈图片的生成,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。

经过度娘后,得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。百度过几个好的demo,参考了一下,本以为会很简单就解决这个问题,然而这个并不是小程序canvas的难点!

  WXML

<view><button>这是触发canvas的按钮

  绘制长按识别二维码

settext: function (context) {let _this = this;var size= _this.setCanvasSize();var text= "长按识别小程序";context.setFontSize(12);context.setTextAlign("center");context.setFillStyle("#000");context.fillText(text, size.w / 2, size.h * 0.90);context.stroke();},

绘制图片

createNewImg: function () {var _this= this;var size= _this.setCanvasSize();var context= wx.createCanvasContext('myCanvas');var path= "/assets/images/qrshare1.jpg";//测试的图片var imageQrCode = _this.data.filePath;       //二维码context.drawImage(path, 0, 0, size.w, size.h);context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);this.settext(context);//绘制图片context.draw();//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时wx.showToast({title: '生成中...',icon: 'loading',duration: 2000});setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'myCanvas',success : function (res) {var tempFilePath = res.tempFilePath;_this.setData({imagePath: tempFilePath,});var img= _this.data.imagePath;let urls = []urls.push(img, '二维码路径')//二维码路径是为了用户也可以保存二维码,分享到朋友圈有合成的图片也有二维码(参考拉钩小程序分享)wx.previewImage({current: img,// 当前显示图片的http链接urls: urls// 需要预览的图片http链接列表})},fail: function (res) {console.log(res);}});}, 2000);},

本来我是直接绘制网络图片的,但是在真机上,网络图片不显示!于是百度了一下,可以先下载,接口返回的图片再绘制

//生成朋友圈图片createSharePic() {let _this = this,qrcode= _this.data.qrcodewx.downloadFile({url: qrcode,success: function (res) {if (res.statusCode === 200) {_this.setData({filePath: res.tempFilePath,})_this.createNewImg();}}})}

问题出来了,本地上测试没问题,远程调试也没问题,可以生成图片保存到手机

小程序之如何实现朋友圈图片的生成

小程序之如何实现朋友圈图片的生成

纳闷了一会之后,我发现自己没有后台添加download的下载域名。因为平时在本地的都是勾选了不检查域名。所以在这纳闷了很久!!!!!!!

总结:

小程序canvas不好控制,写样式时用rpx,canvas用px;

网络图片不显示(我用网络图片时,是不显示,不确定这个问题是我的操作问题还是小程序的限制,希望大佬们可以给我个肯定的结论)

要在微信后台设置downloand下载域名(我这里用了下载后绘制的方法,如果大家有不用下载的方法,望告知!谢谢)

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

小程序之如和使用view内部组件来进行页面的排版功能

小程序之使用for循环绑定item的点击事件的实现以上就是小程序之如何实现朋友圈图片的生成的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读