微信小程序实现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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 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
咖啡的传说和历史
2021/03/03 新手入门
在JavaScript中调用php程序
2009/03/09 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python 获取url中的参数列表实例
2018/12/18 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
岗位明星事迹材料
2014/05/18 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
化验室岗位职责
2015/02/14 职场文书
雷锋电影观后感
2015/06/10 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript