微信小程序实现canvas分享朋友圈海报
更新时间:2020年6月21日 15:29 点击:2959
本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下
思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕看不见的地方(定位left:1000px)绘制出canvas,绘制完成将canvas转为图片显示。点击保存按钮,将本地缓存路径的图片下载到手机相册,在这里需要进行授权处理
untils.js文件
// 参数说明: mainImg 商品图 headImg 微信头像 onshareImg 二维码 goodsName 商品名称 goodsDec 商品描述 goodsTime 截图时间 goodsPrice 商品价格 callback 绘制完成回调 // 需要在小程序控制台downfile加入网络图片的域名, 否则无法显示图片 shareImgCanvas: function(mainImg, headImg, onshareImg, goodsName, goodsDec, goodsTime, goodsPrice, callback) { var that = this // 防止网络图片绘制失败, 将网络图片更改为本地缓存图片, 成功回调执行 let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ // src需要使用https网络路径 src: mainImg, success: function(res) { resolve(res); } }) }); let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: headImg, success: function(res) { resolve(res); } }) }); let promise3 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: onshareImg, success: function(res) { resolve(res); } }) }); // all接收数组作为参数, p1 p2 p3 三个返回值, 都为fulfilled执行 Promise.all([ promise1, promise2, promise3 ]).then(res => { // 创建上下文 var ctx = wx.createCanvasContext('shareImg') // 开始绘制 ctx.beginPath(); // 列表商品都有分享朋友圈功能, 需要多次调用绘制, 每次需先清除画布重新绘制 // 清除矩形区域 ctx.clearRect(0, 0, 400, 667) // 重新填充, 不填充无法清除画布 // ctx.fillRect(0, 0, 400, 667); (无法清除画布看情况添加) // 开始画 ctx.beginPath(); // 填充白色 ctx.setFillStyle("#fff") // 填充进矩形框 ctx.fillRect(0, 0, 400, 667); // 商品图 ctx.drawImage(res[0].path, 0, 0, 400, 400) // 二维码 ctx.drawImage(res[2].path, 290, 470, 100, 100) // 画头像圆 ctx.arc(364, 110, 30, 0, Math.PI * 2, false); // 切割圆, 调用fillRect后,模拟器显示切割不成功, ctx.clip(); // 头像 ctx.drawImage(res[1].path, 335, 80, 60, 60) // 恢复之前保存的上下文(清除画布后,文字不显示) ctx.restore(); // 文字位置 ctx.setTextAlign('left') // 文字颜色 ctx.setFillStyle('#666') // 文字大小 ctx.setFontSize(20) // 填充文字 ctx.fillText(goodsname, 20, 430) ctx.setTextAlign('left') ctx.setFillStyle('#aaa') ctx.setFontSize(18) ctx.fillText(goodsTime, 20, 470) ctx.setTextAlign('left') ctx.setFillStyle('#f07f45') ctx.setFontSize(24) ctx.fillText('¥ ' + goodsPrice, 20, 530) // 绘制路径的边框(头像黑框) ctx.stroke() // 绘制到画布中,绘制成功掉生成海报图 ctx.draw(false, function() { callback() }) }) },
untils.js文件
生成朋友圈图
getFriendImg: function(that) { // canvas转图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: 400, height: 600, destWidth: 400, destHeight: 600, canvasId: 'shareImg', success: function(res) { // 本地临时路径 that.setData({ qrcode_src: res.tempFilePath, }) }, fail: function(res) { wx.showToast({ title: '加载失败,稍后再试~', icon: "none" }) } }) }
保存图片前授权
// 参数说明 that 为调用处的this, callback为回调全局保存is_friendAuthor ,is_friendAuthor 是否已经授权相册, qrcode_src本地缓存路径, returncallback 失败回调 function saveImage(that, callback, is_friendAuthor, qrcode_src, returncallback) { // 未授权 if (is_friendAuthor) { wx.showModal({ title: '授权提示', content: '"千真优农"要访问你的本地相册,是否允许?', success: function(res) { if (res.confirm) { wx.openSetting({ success: function(res) { // 允许授权 if (res.authSetting["scope.writePhotosAlbum"]) { // 将允许授权全局保存 callback(false) // 保存图片 common.saveImgPhoto(that, qrcode_src, callback, returncallback) } else { callback(true) wx.showToast({ title: '保存失败', icon: 'none' }); returncallback() } } }) } else if (res.cancel) { callback(true) wx.showToast({ title: '保存失败', icon: 'none' }); } } }) } else { // 已经授权, 直接保存图片 common.saveImgPhoto(that, qrcode_src, callback, returncallback) } }
common文件
保存图片
// 参数说明: that为this, qrcode_src 本地缓存路径 function saveImgPhoto(that, qrcode_src) { wx.showLoading({ title: '保存中', mask: true }) // qrcode_src 已经是本地路径,不需要downloadFile转为本地路径 wx.saveImageToPhotosAlbum({ filePath: qrcode_src, success: function (res2) { wx.hideLoading(); wx.showToast({ title: '保存成功', }) }, fail: function (res3) { wx.hideLoading(); wx.showToast({ title: '保存失败', icon: 'none' }) } }) }
效果图(缺少商品描述)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
下一篇: 微信小程序实现选择地址省市区三级联动
相关文章
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程,各位想知道具体的制作步骤的使用者们,那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
Illustrator渐变网格工具绘制可爱的卡通小猪教程分享
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说渐变网格工具绘制可爱的卡通小猪的教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一...2016-09-14- 不知不觉功夫熊猫这部电影已经出到3了,今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报,各位想知道制作方法的,那么下面就来跟着小编一起看看吧。 给各...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说日系小清新通透人像的调色教程,各位想知道具体的调色步骤的使用者们,那么下面就快来跟着小编一起看一看...2016-09-14
- 下面来给大家分享两个关于php威盾解密的例子,一个是批量解密一个是超级算法的解密都非常的好,大家有举的进入参考。 例子,批量解密 代码如下 复制代码 ...2016-11-25
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- mysqli封装了诸如事务等一些高级操作,同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 核心代码: 复制代码 代码如下:<!--?php$html2RTFCom = new COM("HTML2RTF.Converter");$html2RTFCom--->PreserveImages = true;$html2RTFCom->PageNumbers = 1;$html2RTFCom->PageNumbersAlignH = 1;$html2RTFCom->Pa...2014-06-07
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作卡通全家福的教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14
- 这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-20
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11