微信小程序实现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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
PHP PDO操作总结
Nov 17 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript创建表格的方法
Apr 13 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
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP的加密方式及原理
2012/06/14 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP7常量数组用法分析
2016/09/26 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
node网页分段渲染详解
2016/09/05 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
详解Python 解压缩文件
2019/04/09 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
求职信模板怎么做
2014/01/26 职场文书
现场活动策划方案
2014/08/22 职场文书
员工离职证明范本
2015/06/12 职场文书
2015上半年个人工作总结
2015/07/27 职场文书