uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册

引言

我使用到painter的原因是,在uniapp开发微信小程序时,需要将一个页面的内容转换成图片保存到本地相册。
起初在网上找到很多都是在uniapp中使用 html2canvas 网页转换成图片再jspdf将图片转换为pdf,但是这种方式在小程序环境不支持,只在h5环境下适用,当然这个方式是可行的,可以使用webviewh5将页面嵌入到微信小程序中,可我这个整体模块已经在微信小程序实现了,时间上也不允许我重新再用h5开发,所以就使用painter方式,将微信小程序页面转换成图片。

一、painter是什么

painter是一款微信小程序插件

painter github 镜像网址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter?utm_source=csdn_github_accelerator#
下图是官网自己对painter的介绍。
在这里插入图片描述

二、painter的应用场景

1.社交分享:开发者可以把用户的个人信息、活动页面等转换为图片,用户可以将这些图片保存到本地后分享到朋友圈,QQ空间等社交平台。

2.电商推广:电商平台可以把当前商品详情页转成图片,提供给用户分享到社交平台上,实现商品推广。

3.数据可视化:某些需要展现大量数据,或者复杂数据的场景,可以将数据以图表的形式展示出来,然后使用painter将这些数据图表转换为图片,提供给用户下载使用。

4.截图保存:例如问答、短篇小说、教程等类型的小程序,可一键截图保存整页内容。

5.生成个性化海报:如把用户的昵称,头像,成就等生成一张个性化的海报提供给用户保存,增强用户体验。

三、uniapp中自定义组件引用painter

uniapp中引用小程序自定义组件的方式
上面链接是官方教程如何在uniapp中引入自定义组件,我这里简单记录一下在引入微信小程序的自定义组件painter的方式。

1. 下载painter

painter下载地址
在这里插入图片描述

下载下来之后,找到compontents文件夹下的painter文件夹,这个就是我们要使用的painter组件。
在这里插入图片描述
在这里插入图片描述

2. 在项目根目录新建wxcomponents 文件夹,将下载的painter文件夹拷贝到该目录中

┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──painter                   微信小程序自定义组件
│		├─painter.js
│		├─painter.wxml
│		├─painter.json
│		└─lib
├─pages
│  └─index
│		└─index.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

在这里插入图片描述

3. 在 pages.json 对应页面的 style -> usingComponents 引入组件:

在这里插入图片描述

// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ"usingComponents": {"painter": "/wxcomponents/painter/painter"}
// #endif

4. 然后就可以在刚配置的页面中使用painter了

    <painter name="合同签订" :scaleRatio="2" :palette="palette" @imgOK="imgOK"customStyle="position:fixed;top:-9999rpx"></painter>

四、painter的基本用法

这是官网的介绍:
在这里插入图片描述
下面是我使用时用的一个简单的demo
生成的图片效果如下:
在这里插入图片描述
代码如下

  • template
<painter name="合同签订" :scaleRatio="2" :palette="palette" @imgOK="imgOK" style="position:fixed;top:-9999rpx"></painter>
<button @tap="saveImg">保存</button>
  • data
      imgSrc: '',painterStyle: {rect: {width: '710rpx',left: '20rpx',color: '#fff',borderRadius: '16rpx'},textLeft: {left: '40rpx',fontSize: '28rpx',color: '#111'},textRight: {right: '40rpx',fontSize: '28rpx',color: '#111'},textLeftTwo: {left: '180rpx',fontSize: '28rpx',color: '#111'},title: {textAlign: 'center',fontSize: '36rpx',color: '#000',width: '100%'},line: {left: '40rpx',width: '670rpx',height: '1px',color: '#eee'}}
  • computed
    // 这里是图片内容的具体实现palette() {const palette = {width: '750rpx',height: '1200rpx',background: '#f7f7f7',views: []}const startTop = 600 // 开始的 top 值const gapSize = 50 // 间隙大小// css 使用数组形式抽离相同样式const arr1 = [{type: 'rect', // 背景css: [{ height: '500rpx' }, this.painterStyle.rect]},{type: 'rect', // 分割线css: [{ top: '100rpx' }, this.painterStyle.line]},{type: 'rect', // 分割线css: [{ top: '200rpx' }, this.painterStyle.line]}]// 文字const arr2 = [{type: 'text',text: '民用天然气供用气合同',css: [{ top: `${startTop}rpx`, }, this.painterStyle.title]},{type: 'text',text: '用户编号:',css: [{ top: `${startTop + 2 * gapSize}rpx`,}, this.painterStyle.textLeft]},{type: 'text',text: '002',css: [{top: `${startTop + 2 * gapSize}rpx`,},this.painterStyle.textLeftTwo]},{type: 'text',text: '合同编号:',css: [{ top: `${startTop + 3 * gapSize}rpx`,}, this.painterStyle.textLeft]},{type: 'text',text: '123456',css: [{top: `${startTop + 3 * gapSize}rpx`,},this.painterStyle.textLeftTwo]},]palette.views = palette.views.concat(arr1, arr2)// 如果图片没有显示出来,可以把它放到 views 的末尾palette.views.push({type: 'image',url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',css: {top: '48rpx',right: '48rpx',width: '192rpx',height: '192rpx',},})return palette},
  • methods
    // 图片生成成功,可以从 e.detail.path 获取生成的图片路径imgOK(e) {console.log('e', e)this.imgSrc = e.detail.pathconsole.log('imgSrc', this.imgSrc) // 点击打印出来的内容就可以看见图片了},// 保存图片saveImg() {//用户授权并开启保存到相册的权限uni.authorize({scope: 'scope.writePhotosAlbum',success: (result) => {if (!this.imgSrc) {return uni.showToast({title: '图片生成中,请稍等~',icon: 'none'})}// 保存到手机相册uni.saveImageToPhotosAlbum({filePath: this.imgSrc,success: function (e) {console.log('保存成功', e)uni.showToast({title: '保存成功',icon: 'none'})}})},fail: (error) => {uni.showModal({title: '提示',content: '检测到您有未开启的权限,为保证功能正常使用,请保持保存到相册权限均为开启状态',confirmText: '去开启',success: ({ confirm }) => {if (confirm) uni.openSetting()}})}})},

这只是最基础的用法,更多需求可参考官网。

总结

好啦,以上就是如何在UniApp开发环境中使用Painter插件将微信小程序页面转换为图片并保存至本地相册。首先,我们描述了安装和配置Painter的详细步骤,包括如何在项目中引入Painter以及编写Painter绘图的JSON数据。然后,我们重点介绍了如何使用PainterCanvas上绘制出需要的图片,包括文字,图片,矩形等元素,并详细解说了如何具体控制这些元素的绘制位置,大小和样式。最后,我们介绍了怎样通过微信小程序的API,将这个绘制出来的Canvas图片保存到用户的本地相册中。希望看到这里的小伙伴,这篇记录对你有所帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/97599.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地

本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook&#xff0c;并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件&#xff1a; jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…

excel中有哪些通配符、excel配置问题,数学函数篇1之sum系列

学习excel前需要明确的是事&#xff1a;   在学习excel函数之前&#xff0c;大家需要明确一件事&#xff0c;excel现在设计到了一些新函数&#xff0c;这些新函数只能存在于office365、office2019及更 新版本之中&#xff0c;所以建议大家在学习时安装较新的版本&#xff0c;…

PyMuPDF`库实现PDF旋转功能

本文介绍了一个简单的Python应用程序&#xff0c;用于将PDF文件转换为旋转90度的PDF文件。主要用于csdn网站中导出的博客pdf是横向的&#xff0c;看起来不是很方便&#xff0c;才想到用python编制一个将pdf从横向转为纵向的功能。 功能 该PDF转换工具具有以下功能&#xff1a…

算法通关村第十关 | 快速排序

1.快速排序的基本过程 快速排序是分治法运用到排序问题的典型例子&#xff0c;基本思想是&#xff1a;通过一个标记pivot元素将n个元素的序列划分为左右两个子序列left和right&#xff0c;其中left中的元素都比pivot小&#xff0c;right的都比pivot的大&#xff0c;然后再次对l…

BOXTRADE-天启量化分析平台 系统功能预览

BOXTRADE-天启量化分析平台 系统功能预览 系统功能预览 1.登录 首页 参考登录文档 2. A股 行情与策略分析 2.1 A股股票列表 可以筛选和搜索 2.2 A股行情及策略回测 2.2.1 行情数据提供除权和前复权&#xff0c;后复权数据&#xff1b;外链公司信息 2.2.2 内置策略执行结果…

uniapp选择只选择月份demo效果(整理)

<template><view style"margin-top: 200rpx;"><!-- mode"multiSelector" 多列选择器 --><view><picker :range"years" :value"echoVal" change"yearChange" mode"multiSelector">{…

【排序】插入排序 希尔排序(改进)

文章目录 插入排序时间复杂度空间复杂度 代码希尔排序时间复杂度空间复杂度 代码 以从小到大排序为例进行说明。 插入排序 插入排序就是从前向后&#xff08;i1开始&#xff09;进行选择&#xff0c;如果找到在i之前&#xff08;分配一个j下标进行寻找&#xff09;有比array[i…

【腾讯云 TDSQL-C Serverless产品体验】抓取processon热门模版的标题生成词云

【腾讯云 TDSQL-C Serverless产品体验】抓取processon热门模版的标题生成词云 serverless服务是腾讯云自研的新一代云原生关系型数据库TDSQ L-C的无服务器架构版&#xff0c;是全Serverless架构的云原生数据库 前言 体验了一下腾讯云刚出的TDSQL-C Serverless&#xff0c;使用…

React快速入门

最近需要学到react&#xff0c;这里进行一个快速的入门&#xff0c;参考react官网 1.创建和嵌套组件 react的组件封装是个思想&#xff0c;我这里快速演示代码&#xff0c;自己本身也不太熟悉。 代码的路径是src底下的App.js function MyButton() {return (<button>I…

GAN!生成对抗网络GAN全维度介绍与实战

目录 一、引言1.1 生成对抗网络简介1.2 应用领域概览1.3 GAN的重要性 二、理论基础2.1 生成对抗网络的工作原理2.1.1 生成器生成过程 2.1.2 判别器判别过程 2.1.3 训练过程训练代码示例 2.1.4 平衡与收敛 2.2 数学背景2.2.1 损失函数生成器损失判别器损失 2.2.2 优化方法优化代…

git错误记录

露id没有影响&#xff0c;搞得微软不知道我ip一样 git fatal: 拒绝合并无关的历史的错误解决(亲测有效)

Vue elementui 实现表格selection的默认勾选,翻页记录勾选状态

需求&#xff1a;当弹出一个列表页数据&#xff0c;对其进行筛选选择。 列表更新&#xff0c;填充已选数据 主要使用toggleRowSelection 代码如下&#xff1a; <el-table v-loading"loading" :data"drugList" selection-change"handleSelection…

非常适合大学附近的校园跑腿和自习室订座小程序

推荐两款非常适合在大学内和大学周边的项目 这两款小程序分别是校园跑腿系统和自习室在线订座系统 1、校园跑腿系统&#xff0c;第一张图所示&#xff0c;支持多校运营、快递代取、校园跑腿、租借服务、代理中心、跑腿中心、人员管理、订单抽成、数据统计、众包接单、消息通…

软考A计划-系统集成项目管理工程师-法律法规-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

春秋云镜 CVE-2020-13933

春秋云镜 CVE-2020-13933 Shiro < 1.6.0 验证绕过漏洞 靶标介绍 Apahce Shiro 由于处理身份验证请求时出错 存在 权限绕过漏洞&#xff0c;远程攻击者可以发送特制的HTTP请求&#xff0c;绕过身份验证过程并获得对应用程序的未授权访问。 启动场景 漏洞利用 exp /admin…

区块链碎碎念

现在的区块链早已过了跑马圈地的时代&#xff0c;现在还按照以前承接项目的方式做区块链只能是越来越艰难。经过几年的技术沉淀&#xff0c;做区块链项目的公司都已经没落的七七八八了。 区块链不是一个能够快速显现盈利能力的行业&#xff0c;相反这个行业目前的模式还是处于…

对话音视频牛哥:开发RTSP|RTMP直播播放器难不难?难在哪?

我关注的播放器指标 好多开发者跟我交流音视频相关技术的时候&#xff0c;经常问我的问题是&#xff0c;多久可以开发个商业级别的RTMP或RTSP播放器&#xff1f;你们是怎样做到毫秒级延迟的&#xff1f;为什么一个播放器&#xff0c;会被你们做到那么复杂&#xff1f;带着这些…

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器 在本文中&#xff0c;我们将创建一个实时网页编辑器。这是一个 Web 应用程序&#xff0c;允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用ifram…

nodejs+vue古诗词在线测试管理系统

一开始&#xff0c;本文就对系统内谈到的基本知识&#xff0c;从整体上进行了描述&#xff0c;并在此基础上进行了系统分析。为了能够使本系统较好、较为完善的被设计实现出来&#xff0c;就必须先进行分析调查。基于之前相关的基础&#xff0c;在功能上&#xff0c;对新系统进…

通过请求头传数据向后端发请求

axios &#xff08;get post请求、头部参数添加&#xff09;傻瓜式入门axios_axiospost请求参数_web_blog的博客-CSDN博客