uniapp实现页面固定区域转为base64图片预览并手动保存本地

uniapp实现页面固定区域转为base64图片预览并手动保存本地

声明:H5目前没有实现直接长按保存到手机图库(浏览器可以直接保存为图片),所以将过程中得到的base64转为真实图片地址用a标签click的方式实现预览,并手动长按图片来保存。

需安装插件 html2canvas base64ToPath

复制代码
<view class="subDowncssB1 myEwaigochC1" id="poster" >
					//这个是绘图区只要id唯一就可以
				</view>

<image src="../../static/ly17.png" mode="" @click="renderScript.exportPhoto"
				class="subDowncssC1 myEwaigochD1" >
			</image>
			//这是点击预览按钮

<script module="renderScript" lang="renderjs">
	//引入组件,没有安装的先去安装,怎么安装这里不用多说
	import html2canvas from 'html2canvas';
	import {
		base64ToPath
	} from '@/node_modules/image-tools/index.js';
	export default {
		methods: {
			exportPhoto(e, ownerVm) {
				uni.showModal({
					title: "提示",
					content: "预览时长按图片可保存,点击右上角三个点可实现分享",
					success: (res) => {
						if (res.confirm) {
							//下面的代码可能会比较耗时,给个加载动画
							ownerVm.callMethod('openLoading')
							var dom = document.querySelector('#poster'); // 获取dom元素
							html2canvas(dom, {
								width: dom.clientWidth, //dom 原始宽度
								height: dom.clientHeight,
								scrollY: 0,
								scrollX: 0,
								backgroundColor: null, //背景为透明色
								useCORS: true, //支持跨域,但好像没什么用
							}).then((canvas) => {
								// 将生产的canvas转为base64
								var base64 = canvas.toDataURL('image/png')
								// 将数据回调给第一个script
								ownerVm.callMethod('receiveRenderData', base64)
							}).catch((e) => {
								console.log(e);
							});
						}
					}
				})



			}
		}
	}
</script>

这个写到另一个script的methods里边
	//通过下面的方法将html转换为图片base64数据回调给此处
			receiveRenderData(data) {
//这里是把base64传给后端让他处理成链接,图片预览,让用户长按图片保存
				$api.base64ToImg({
					imgStr: data
				}).then(res => {
					console.log(res.content)
					if (res.code == 0) {
						//创建一个a标签
						var link = document.createElement('a');
						//把a标签的href属性赋值到生成好了的url
						link.href = res.content

						//通过a标签的download属性修改下载图片的名字
						link.download = '互动留言.png';
						//让a标签的click函数,直接下载图片
						link.click();
						uni.hideLoading()
						this.toclosedOver()
					}
				})
				return
//下边这一部分是使用base64直接保存图片的,但是手机无法保存所以先注释了(浏览器可以)。
				let that = this;
				base64ToPath(data, '.jpeg').then(function(imgPath) {
					console.log('111', data)
					//保存到手机相册,
					// #ifdef H5
					uni.downloadFile({
						url: imgPath,
						success: (res) => {
							//创建一个a标签
							var link = document.createElement('a');
							//把a标签的href属性赋值到生成好了的url
							console.log(12312, imgPath)
							link.href = imgPath

							// http://192.168.2.34:9094/home/waterMark/80/140/9/140/kAkEkhUeDE4SKkBq.jpg

							//通过a标签的download属性修改下载图片的名字
							link.download = '互动留言.png';
							// link.download = imgPath.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
							//让a标签的click函数,直接下载图片
							link.click();


							uni.hideLoading()
							that.toclosedOver()
						}
					})
					// #endif
					// #ifndef H5
					uni.saveImageToPhotosAlbum({
						filePath: imgPath,
						success: function() {
							uni.hideLoading()
						},
						fail: err => {

						}
					});
					// #endif


				})
			},
			openLoading() {
				uni.showLoading({
					title: '加载中......'
				})
			},
相关推荐
excel4 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子11 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构18 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep19 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss23 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风24 分钟前
html二次作业
前端·html
江城开朗的豌豆27 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵27 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮30 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
江城开朗的豌豆36 分钟前
拆解Redux:从零手写一个状态管理器,彻底搞懂它的魔法!
前端·javascript·react.js