热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序如何使用canvas二维码保存至手机相册的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

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

推荐使用插件 Painter

github地址

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

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

附上一个简单的例子吧

 
//
 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
  // });
 }
});

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

总结

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


推荐阅读
  • #在当前所用的template模板中嵌入html、以下代码<divclassp10_15><upload_:upload_infoupload_infor ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
author-avatar
cfn7831325
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有