微信小程序用canvas画图并分享


Posted in Javascript onMarch 09, 2020

最近开始做微信小程序,有这样一个需求:

从列表页进入详情,在每一个详情页面去分享,分享出来的图片是带有当前详情数据的图片

如下图的列表:

微信小程序用canvas画图并分享

分享出来的样子:

微信小程序用canvas画图并分享

解决方案和思路:canvas画图生成图片

上代码:

【html部分】

<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
<button open-type='share'>分享</button>

【js部分】

var ctx = "" // 用于获取canvas
var leftMargin = "" //文字距离左边边距
var topMargin = "" //文字距离右边边距
Page({

 /**
 * 页面的初始数据
 */
 data: {
 title: '人人车司机',
 salary: '500-8000元/月',
 rtype: '日结',
 rmoney: '20元',
 canvasWidth: '', // canvas宽度
 canvasHeight: '', // canvas高度
 imagePath: '' // 分享的图片路径
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this
 var sysInfo = wx.getSystemInfo({
  success: function (res) {
  that.setData({
   //设置宽高为屏幕宽,高为屏幕高的80%,因为文档比例为5:4
   canvasWidth: res.windowWidth,
   canvasHeight: res.windowWidth * 0.8
  })
  leftMargin = res.windowWidth
  topMargin = res.windowWidth * 0.8
  },
 })
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 ctx = wx.createCanvasContext('myCanvas')
 this.addImage()
 this.tempFilePath()
 
 },
 //画背景图
 addImage: function () {
 var context = wx.createContext();
 var that = this;
 var path = "/images/share.jpg";
 //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
 //不知道是什么原因,手机环境能正常显示
 ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
 this.addTitle()
 this.addRtype()
 this.addRmoney()
 this.addSalary()
 ctx.draw()
 },
 //画标题
 addTitle: function (){
 var str = this.data.title
 ctx.font = 'normal bold 20px sans-serif';
 ctx.setTextAlign('center'); // 文字居中
 ctx.setFillStyle("#222222");
 ctx.fillText(str, this.data.canvasWidth/2,65)
 },
 // 画返费方式
 addRtype: function () {
 var str = this.data.rtype
 ctx.setFontSize(16)
 ctx.setFillStyle("#ff4200");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
 },
 // 画返费金额
 addRmoney: function () {
 var str = this.data.rmoney
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
 },
 // 画薪资
 addSalary: function () {
 var str = this.data.salary
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
 },
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function (res) {
 // return eventHandler接收到的分享参数
 return {
  title: this.data.title,
  path: '/pages/test/test',
  imageUrl: this.data.imagePath
 };
 },
 //导出图片
 tempFilePath: function(){
 let that = this;
 wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function success(res) {
  wx.saveFile({
   tempFilePath: res.tempFilePath,
   success: function success(res) {
   that.setData({
    imagePath: res.savedFilePath
   });
   }
  });
  }
 });
 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 }


})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 #Javascript
原生js无缝轮播插件使用详解
Mar 09 #Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 #Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
You might like
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python进阶教程之动态类型详解
2014/08/30 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
法人授权委托书格式
2014/04/08 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
电影建国大业观后感
2015/06/01 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers