三金网手机网站,表格制作教程 步骤,自己能做app软件吗,辽阳网站建设学校引言
我使用到painter的原因是#xff0c;在uniapp开发微信小程序时#xff0c;需要将一个页面的内容转换成图片保存到本地相册。 起初在网上找到很多都是在uniapp中使用 html2canvas 将网页转换成图片再jspdf将图片转换为pdf#xff0c;但是这种方式在小程序环境不支持在uniapp开发微信小程序时需要将一个页面的内容转换成图片保存到本地相册。 起初在网上找到很多都是在uniapp中使用 html2canvas 将网页转换成图片再jspdf将图片转换为pdf但是这种方式在小程序环境不支持只在h5环境下适用当然这个方式是可行的可以使用webview将h5将页面嵌入到微信小程序中可我这个整体模块已经在微信小程序实现了时间上也不允许我重新再用h5开发所以就使用painter方式将微信小程序页面转换成图片。
一、painter是什么
painter是一款微信小程序插件
painter github 镜像网址https://gitcode.net/mirrors/Kujiale-Mobile/Painter?utm_sourcecsdn_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.json3. 在 pages.json 对应页面的 style - usingComponents 引入组件 // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQusingComponents: {painter: /wxcomponents/painter/painter}
// #endif4. 然后就可以在刚配置的页面中使用painter了 painter name合同签订 :scaleRatio2 :palettepalette imgOKimgOKcustomStyleposition:fixed;top:-9999rpx/painter四、painter的基本用法
这是官网的介绍 下面是我使用时用的一个简单的demo 生成的图片效果如下 代码如下
template
painter name合同签订 :scaleRatio2 :palettepalette imgOKimgOK styleposition:fixed;top:-9999rpx/painter
button tapsaveImg保存/buttondata 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数据。然后我们重点介绍了如何使用Painter在Canvas上绘制出需要的图片包括文字图片矩形等元素并详细解说了如何具体控制这些元素的绘制位置大小和样式。最后我们介绍了怎样通过微信小程序的API将这个绘制出来的Canvas图片保存到用户的本地相册中。希望看到这里的小伙伴这篇记录对你有所帮助
