提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

element查看大图添加下载按钮（整理）

下载 查看 添加 整理 按钮 Element 大图
2023-09-14 09:04:05 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<title>element查看大图添加下载按钮</title>
	</head>
	<body>
		<div id="app">
			<div class="demo-image__preview" @click="checkImage">
				<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
				</el-image>
			</div>
		</div>
		<!-- <i class="el-icon-download" onclick="installImage()"></i> -->
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		let vueEle = null;
		window.installImage = function() {
			alert(111)
			console.log('下载')
			let srcUrl = document.querySelector('.el-image-viewer__img').src;
			vueEle.downloadIamge(srcUrl, '图片名字');
		}
		vueEle = new Vue({
			el: '#app',
			data: function() {
				return {
					url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					srcList: [
						'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
						'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
					]
				}
			},
			methods: {
				checkImage() { //这个事件要绑定el-image父级盒子上
					console.log('点击事件');
					let a = document.querySelector('.el-image-viewer__actions__inner');
					$(a).append(`<i class="el-icon-download" onclick="installImage()"></i>`)
				},
				downloadIamge(imgsrc, name) { //下载图片地址和图片名
					let image = new Image();
					// 解决跨域 Canvas 污染问题
					image.setAttribute("crossOrigin", "anonymous");
					image.onload = function() {
						let canvas = document.createElement("canvas");
						canvas.width = image.width;
						canvas.height = image.height;
						let context = canvas.getContext("2d");
						context.drawImage(image, 0, 0, image.width, image.height);
						let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
						let a = document.createElement("a"); // 生成一个a元素
						let event = new MouseEvent("click"); // 创建一个单击事件
						a.download = name || "photo"; // 设置图片名称
						a.href = url; // 将生成的URL设置为a.href属性
						a.dispatchEvent(event); // 触发a的单击事件
					};
					image.src = imgsrc;
				}
			}
		})
	</script>
</html>

在这里插入图片描述

相关文章