微信小程序实现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 利用Cookie记录用户登录信息
Dec 08 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
JS实现九宫格拼图游戏
Jun 28 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 清除网页病毒的方法
2008/12/05 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
使用python3 实现插入数据到mysql
2020/03/02 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
自荐信怎么写好
2013/11/11 职场文书
经典安踏广告词
2014/03/21 职场文书
体现团队精神的口号
2014/06/06 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
教师理论学习心得体会
2016/01/21 职场文书