微信小程序实现canvas分享朋友圈海报


Posted in Javascript onJune 21, 2020

本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下

思路:生成朋友圈海报放在公共文件,首先需要绘制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'
  })
 }
 })
}

效果图(缺少商品描述)

微信小程序实现canvas分享朋友圈海报

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js charAt的使用示例
Feb 18 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 #Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
小程序表单认证布局及验证详解
Jun 19 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
php-msf源码详解
2017/12/25 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
jQuery中:radio选择器用法实例
2015/01/03 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python映射列表实例分析
2015/01/26 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python3实现购物车功能
2018/04/18 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
校运动会广播稿(100篇)
2014/09/12 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
个人思想政治总结
2015/03/05 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL