微信小程序如何使用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对象及属性
Feb 13 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 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分页代码学习示例分享
2014/02/20 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
一些网络技术方面的面试题
2014/05/01 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
opencv检测动态物体的实现
2021/07/21 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB