前端html+css+js实现复制多个图片到浏览器预览

new_Thread

于 2024-01-29 13:52:35 发布

阅读量542

点赞数 8

文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/weixin_54459948/article/details/135910676

版权

简单的前端html+css+js实现复制多个图片到浏览器预览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<style>
		img{
			max-width: 300px;
		}
	</style>
	<body>
		<div id="root">
			
		</div>
		<script>
			bindPaste();
			function bindPaste() {
				var blob;
				var body = document.getElementsByTagName("body");
				var fun = function(e) {
					var data = e.clipboardData || window.clipboardData;
					for (var i = 0; i < data.items.length; i++) {
						blob = data.items[i].getAsFile();
						var isImg = (blob && 1) || -1;
						var reader = new FileReader();
						if (isImg >= 0) {
							reader.readAsDataURL(blob);
						}
						reader.onload = function(event) {
							var base64_str = event.target.result;
							let img= document.createElement("img")
							img.src=base64_str;
							// 指定某个元素的子元素添加复制的图片
							document.getElementById('root').appendChild(img);
						}
					}
				}
				// 指定鼠标进入某个元素时监听粘贴事件
				body[0].addEventListener('paste', fun);
			}
		</script>
	</body>
</html>