微信小程序用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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
微信小程序云开发详细教程
May 16 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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函数的常用方法及注意之处小结
2011/07/10 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python手机号码归属地查询代码
2016/05/04 Python
Atom的python插件和常用插件说明
2018/07/08 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python3运算符常见用法分析
2020/02/14 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
火锅店营销方案
2014/02/26 职场文书
保护环境倡议书
2014/04/14 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电