热门标签 | 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
  // });
 }
});

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

总结

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


推荐阅读
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 使用 `git stash` 可以将当前未提交的修改保存到一个临时存储区,以便在后续恢复工作目录时使用。例如,在处理中间状态时,可以通过 `git stash` 命令将当前的所有未提交更改推送到一个新的储藏中,从而保持工作目录的整洁。此外,本文还将详细介绍如何解决 `git stash pop` 时可能出现的冲突问题,帮助用户高效地管理代码变更。 ... [详细]
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 微信平台通过盛派SDK(sdk.weixin.senparc.com)允许服务号和订阅号使用appId和token读取关注用户的个人信息。然而,这一过程需严格遵守隐私保护和数据安全的相关规定,确保用户数据的安全性和隐私性。 ... [详细]
  • Docker入门指南:初探容器化技术
    Docker入门指南:初探容器化技术摘要:Docker 是一个使用 Go 语言开发的开源容器平台,旨在实现应用程序的构建、分发和运行的标准化。通过将应用及其依赖打包成轻量级的容器,Docker 能够确保应用在任何环境中都能一致地运行,从而提高开发和部署的效率。本文将详细介绍 Docker 的基本概念、核心功能以及如何快速上手使用这一强大的容器化工具。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • #在当前所用的template模板中嵌入html、以下代码<divclassp10_15><upload_:upload_infoupload_infor ... [详细]
  • POJ3669题目解析:基于广度优先搜索的详细解答
    POJ3669(http://poj.org/problem?id=3669)是一道典型的广度优先搜索(BFS)问题。由于陨石的降落具有时间属性,导致地图状态会随时间动态变化。因此,可以利用结构体来记录每个陨石的降落时间和位置,从而有效地进行状态更新和路径搜索。 ... [详细]
  • 如何高效地安装并配置 PostgreSQL 数据库系统?本文将详细介绍从下载到安装、配置环境变量、初始化数据库、以及优化性能的全过程,帮助读者快速掌握 PostgreSQL 的核心操作与最佳实践。文章还涵盖了常见问题的解决方案,确保用户在部署过程中能够顺利解决遇到的各种挑战。 ... [详细]
  • C# .NET 4.1 版本大型信息化系统集成平台中的主从表事务处理标准示例
    在C# .NET 4.1版本的大型信息化系统集成平台中,本文详细介绍了主从表事务处理的标准示例。通过确保所有操作要么全部成功,要么全部失败,实现主表和关联子表的同步插入。主表插入时会返回当前生成的主键,该主键随后用于子表插入时的关联。以下是一个示例代码片段,展示了如何在一个数据库事务中同时添加角色和相关用户。 ... [详细]
  • iOS 设备唯一标识获取的高效解决方案与实践
    在iOS 7中,苹果公司再次禁止了对MAC地址的访问,使得开发者无法直接获取设备的物理地址。为了在开发过程中实现设备的唯一标识,苹果推荐使用Keychain服务来存储和管理唯一的标识符。此外,还可以结合其他技术手段,如UUID和广告标识符(IDFA),以确保设备的唯一性和安全性。这些方法不仅能够满足应用的需求,还能保护用户的隐私。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
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社区 版权所有