微信小程序如何使用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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
解决vue scoped scss 无效的问题
Sep 04 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
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
node.js超时timeout详解
2014/11/26 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python与idea的集成的实现
2020/11/20 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
python实现三阶魔方还原的示例代码
2021/04/28 Python
Django一小时写出账号密码管理系统
2021/04/29 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
mysql查找连续出现n次以上的数字
2022/05/11 MySQL