赞
踩
在网上看了很多方法,总结下来一下四种:
官网代码片段允许结果:点击“导出图片”报错,不知道为啥~
- let element = document.getElementById("myContent")
-
- html2canvas(element).then(canvas => {
- const imgData = canvas.toDataURL("image/png")
- console.log(imgData)
- })
官网:https://github.com/Kujiale-Mobile/Painter?tab=readme-ov-file
十分详细的参考文档:推荐推荐
uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册_uniapp painter-CSDN博客
因为我这边的需求只有小程序端需要导出图片,所以h5端的我就忽略掉了
接下来放一些代码片段:
template:
- <!-- #ifdef MP-WEIXIN || H5 -->
- <painter :palette="firstPage" @imgOK="onImgOKOne" v-if="current == 0"/>
- <painter :palette="secondPage" @imgOK="onImgOKTwo" v-if="current == 1"/>
- <painter :palette="thirdPage" @imgOK="onImgOKthree" v-if="current == 2"/>
- <!-- #endif -->
data:
- current: 0,
- imgSrc:"",
- imgArr:["", "", ""],
- firstPage: {}, //在线demo里导出来的json
- secondPage: {},
- thirdPage: {}
methods:
- // 图片生成成功,可以从 e.detail.path 获取生成的图片路径
- onImgOKOne(e) {
- this.imgArr[0] = e.detail.path
- // console.log("第一张图", e.detail.path)
- },
- onImgOKTwo(e) {
- this.imgArr[1] = e.detail.path
- // console.log("第二张图", e.detail.path)
- },
- onImgOKthree(e) {
- this.imgArr[2] = e.detail.path
- // console.log("第三张图", e.detail.path)
- },
-
- showModal(index){
- uni.showModal({
- title:"提示",
- content:"您是否要保存当前页面到相册?",
- confirmText:"是",
- cancelText:"否",
- success: res => {
- this.imgSrc = this.imgArr[index]
- // #ifdef MP-WEIXIN
- this.saveImg()
- // #endif
-
- // #ifdef H5
- this.h5SaveImg()
- // #endif
- }
- })
- },
- h5SaveImg(){
- var alink = document.createElement("a");
-
- alink.href = this.imgSrc;
- console.log(this.imgSrc? '图片存在': "nonononono")
-
- alink.download = "效果图"; //fileName保存提示中用作预先填写的文件名
-
- alink.click();
- },
- // 保存图片
- saveImg() {
- console.log("start 保存当前页面")
- //用户授权并开启保存到相册的权限
- 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()
- }
- })
- }
- })
- },
pages.json:在使用到painter的页面做以下配置
该问题的最终处理方案:由于需要导出页面的动态部分不多,所以采用了由设计把静态部分写死出图给后端,动态部分由后端动态生成定位在图片上,然后前端只需要拿到图片链接做一个保存的操作哈哈哈哈!绕来绕去排了一波雷,也算学到了新知识了。
反思:拿到需求的时候一定不要盲目开始,要跟项目组成员讨论,说不定后台有更好的解决办法。
最后,方法不一,大家根据自己需求选择最适合自己的方案
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。