微信小程序如何使用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 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Js apply方法详解
Feb 16 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 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
PHP实时显示输出
2008/10/02 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP实现简单登录界面
2019/10/23 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jQuery实现跨域
2015/02/03 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python3获取cookie常用三种方案
2020/10/05 Python
自我鉴定写作要点
2014/01/17 职场文书
客服部班长工作责任制
2014/02/25 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
关于长城的导游词
2015/01/30 职场文书
留学推荐信英文范文
2015/03/26 职场文书
会议通知范文
2015/04/15 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
解析Redis Cluster原理
2021/06/21 Redis
js 实现验证码输入框示例详解
2022/09/23 Javascript