微信小程序实现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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Highcharts学习之数据列
Aug 03 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
JS三级联动代码格式实例详解
Dec 30 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关联数组的10个操作技巧
2013/01/21 PHP
php-fpm配置详解
2014/02/12 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
经典婚礼主持词
2014/03/13 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
收款委托书
2014/10/14 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电