微信小程序如何使用canvas二维码保存至手机相册


Posted in Javascript onJuly 15, 2019

前言

在使用canvas绘制海报的过程中不建议使用原生来进行画图,因为默认是不支持rpx像素的,px不会做到自适应。

推荐使用插件 Painter

github地址

github.com/Kujiale-Mob (本地下载)…

配置很简单,也容易上手,无论是画矩形,还是将图片合成canvas;还是自己定义文字;都是很方便的。

附上一个简单的例子吧

微信小程序如何使用canvas二维码保存至手机相册

<painter :customStyle="customStyle" :palette="imgDraw" />
//
 const _this=this;
   wx.getSystemInfo({
    success (res) {
     _this.drawCanvas(res.windowHeight);
    }
   })
	 
drawCanvas(height) {
//这里的canvas的高是动态获取设备的高度,做到自适应
    const that = this;
   let heightVal=height*2+'rpx';
   this.imgDraw = {
    width: '750rpx',
    height: heightVal,
    background: '#fff',
    views: [
     {
      type: "rect",
      css: {
       top: '20rpx',
       left: '130rpx',
       color: '#1A1A1A',
       width: '660rpx',
       height: '220rpx',
       borderRadius: '32rpx'
      }
     },
     {
      type: 'image',
      url: './a.jpg',
      css: {
       top: '36rpx',
       left: '16rpx',
       width: '188rpx',
       height: '188rpx'
      }
     },
     {
      type: 'text',
      text: '',
      css: {
       top: '54rpx',
       left: '260rpx',
       fontSize: '48rpx',
       color: "#fff"
      }
     },
     {
      type: 'text',
      text: '文字部分',
      css: {
       top: '134rpx',
       left: '260rpx',
       fontSize: '30rpx',
       color: "#d1d1d1"
      }
     },
     {
      type: 'text',
      text: '1333333333',
      css: {
       top: '196rpx',
       left: '260rpx',
       fontSize: '26rpx',
       color: "#d1d1d1"
      }
     },
     {
      type: 'text',
      text: '李四',
      css: {
       top: '304rpx',
       left: '302rpx',
       fontSize: '24rpx',
       color: "#767676"
      }
     },
     {
      type: 'image',
      url: '/icon-localtion.png',
      css: {
       top: '275rpx',
       left: '260rpx',
       width: '26rpx',
       height: '168rpx'
      }
     },
     {
      type: 'image',
      url: '二维码.png',
      css: {
       top: '646rpx',
       left: '236rpx',
       width: '278rpx',
       height: '278rpx'
      }
     }
    ]
   }

  
   let { path: __path } = mpvue.getStorageSync('createImagePath')
   mpvue.saveImageToPhotosAlbum({
    filePath: __path,
    success(res) {
     // mpvue.showToast({
     //  title: '保存成功',
     //  icon: 'success',
     //  duration: 800,
     //  mask: true
     // });
   
    },
    fail(res) {
     // mpvue.showToast({
     //  title: '保存失败',
     //  icon: 'fail',
     //  duration: 800,
     //  mask: true
     // });
    }
   });
  },

这里涉及到画二维码, 如果你的二维码图片不是一个线上的链接的话,这时需要做一些小操作。

我的项目中二维码的图片传过来是一个流,所以用img的src默认发送get请求,就能拿到这个图片了。

所以url会直接发送get请求拿到图片。

canvas的层级

canvas的层级是最高的,底部的分享块会被遮住,这时你需要用两套方案,一个是纯展示用的,用正常的html来写,给用户看这个名片。

下载或分享的时候再y用canvas生产你想要图片,接着调用微信的保存api,将图片下载或分享。

let { path: __path } = mpvue.getStorageSync('createImagePath')
mpvue.saveImageToPhotosAlbum({
 filePath: __path,
 success(res) {
  // mpvue.showToast({
  //  title: '保存成功',
  //  icon: 'success',
  //  duration: 800,
  //  mask: true
  // });

 },
 fail(res) {
  // mpvue.showToast({
  //  title: '保存失败',
  //  icon: 'fail',
  //  duration: 800,
  //  mask: true
  // });
 }
});

此时就能顺利完成保存名片的功能了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
javascript实现留言板功能
Feb 08 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
微信小程序解析富文本过程详解
Jul 13 #Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 #Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 #Javascript
微信小程序图片左右摆动效果详解
Jul 13 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP 开发工具
2006/12/06 PHP
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php实现的双向队列类实例
2014/09/24 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
使用python实现rsa算法代码
2016/02/17 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
团日活动总结模板
2014/06/25 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
高中教师个人工作总结
2015/02/10 职场文书
乔迁新居祝福语
2019/11/04 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis