原生js图片截取并渲染页面

一、将海报大图截屏部分图片并渲染页面

二、实现代码如下

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div>
			<h1>图片上传后，截取一部分图片并渲染到页面</h1>
			<input type="file" id="fileInput" />
			<button id="uploadFile">上传文件</button>
			<img id="sliceImg" style="display: none; ;" height="200px" width="300px"/>
		</div>

		<script>
			document.getElementById('uploadFile').addEventListener('click', function() {
				let fileInput = document.getElementById('fileInput');
				let file = fileInput.files[0]
	            console.log('file', file)
				let sliceImg = document.getElementById('sliceImg');
                let file_slice=1024*50;//截取50kb 1kb=1024b
				let sliceBlob = file.slice(0,file_slice,file.type);
				let reader= new FileReader();
				reader.onload=function(e){
					sliceImg.src=e.target.result;
					sliceImg.style.display='block'
				}
				reader.readAsDataURL(sliceBlob)
				
			})
		</script>
	</body>
</html>

三、原图

posted @ 2024-04-20 12:02  会吃鱼的猫123  阅读(45)  评论(0)  编辑  收藏  举报