小程序画布Canvas生成海报，分享朋友圈

一使用场景：

小程序内，想要分享海报到朋友圈，附带小程序码，达到转发引流的目的。

  /*** 用户点击右上角分享*/onShareAppMessage: function() {},shareBook: function(e) {console.log('绘制画布回调函数');var that = this;wx.showLoading({title: '图片生成中...',})var res = '';//调用画图方法that.drawImages();},/*** 画图方法*/drawImages: function() {let that = this;// console.log(that.data);that.canvasHidden = false;//网络图片地址无法用画布截取到，故使用微信获取图片信息的接口，来设置网络图片地址console.log(that.data.book.imageUrl);//二维码图片var qrcode_image = that.data.codeImg;//书信息var title = that.data.book.title;var author = that.data.book.author;var summary = that.data.book.summary;let context = wx.createCanvasContext('imageCanvas', that);context.setFillStyle('black');//绘制画布宽高context.fillRect(0, 0, that.canvasWidth, that.canvasHeight);context.drawImage(that.data.shareImgSrc, wx.getSystemInfoSync().windowWidth/2-100, 10, 200, 200);//绘制书籍信息context.fillText(title, 20, 230) context.setFontSize(10)context.fillText("作者："+author, 20, 250) context.fillText("书籍简介：", 20, 270) this.drawText(context, summary, 20, 290, 150, wx.getSystemInfoSync().windowWidth-50);//绘制二维码图 x y width height  console.log(that.canvasCodeImgY);context.drawImage(qrcode_image, 20, wx.getSystemInfoSync().windowHeight-150, 130, 130);context.fillText("长按识别-识别小程序码", 160, wx.getSystemInfoSync().windowHeight - 85, 130, 130);context.draw(false, that.drawCallBack);},drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {var lineWidth = 0;var lastSubStrIndex = 0; //每次开始截取的字符串的索引 for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).width;if (lineWidth > canvasWidth) {ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分                initHeight += 20; //16为字体的高度                lineWidth = 0;lastSubStrIndex = i;titleHeight += 14;}if (i == str.length - 1) { //绘制剩余部分                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);}} // 标题border-bottom 线距顶部距离        titleHeight = titleHeight + 10;return titleHeight},/*** 绘制画布回调函数*/drawCallBack: function() {var that = thisconsole.log('绘制画布回调函数');wx.canvasToTempFilePath({canvasId: 'imageCanvas',fileType: 'jpg',success: function(res) {var shareImg = res.tempFilePath;console.log(shareImg)wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.hideLoading();wx.showToast({title: '保存成功',icon: 'success',duration: 2000});},})},fail: function(res) {cosole.log(res, '<-fail res')}})},

注意：

1.网络图片真机上是不可以直接画到画布上去的，要先本地缓存。

2.网络图片缓存必须是https

3.开发过程中，小伙伴可能会遇到，模拟器上图片绘制没问题，但是真机上却画不上去，处理办法就是去小程序后台添加域名

4.有其他问题，欢迎留言，祝各位没有遇到这些奇葩问题，

小程序画布Canvas生成海报，分享朋友圈相关推荐

小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
【小程序】728- 小程序如何生成海报分享朋友圈
作者:小白 https://segmentfault.com/a/1190000019083548 项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录, ...
【微信小程序】用painter插件生成海报分享朋友圈简单教程
第一步:去Git下载插件 1.这是核心插件需要下载全部内容 https://github.com/Kujiale-Mobile/PainterCore 2.官方文档 https://github.c ...
微信小程序开发，设置小程序为可转发可分享朋友圈
微信小程序开发过程中,我们需要把小程序设置为用户可以自己转发给好友,也可以把小程序分享到朋友圈,需要按照以下步骤来设置. 1. 在page中需要定义方法 onShareAppMessage(res) ...
小程序如何生成海报分享朋友圈，android移动开发技术与应用
openStatus = false console.log('请设置允许访问相册') wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) ...
uni-App小程序、canvas 生成海报 +下载图片+分享微信好友
功能:分享弹窗,生成海报并支持保存,目前仅支持微信小程序 ·插件包链接 https://ext.dcloud.net.cn/plugin?id=586 代码: <template>< ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...

小程序画布Canvas生成海报，分享朋友圈

一使用场景：

小程序内，想要分享海报到朋友圈，附带小程序码，达到转发引流的目的。

小程序画布Canvas生成海报，分享朋友圈相关推荐

最新文章

热门文章

小程序画布Canvas生成海报，分享朋友圈

一 使用场景：

小程序内，想要分享海报到朋友圈，附带小程序码，达到转发引流的目的。

小程序画布Canvas生成海报，分享朋友圈相关推荐

最新文章

热门文章

一使用场景：