js+canvas 实现图片压缩

最新推荐文章于 2024-01-15 21:27:54 发布

龙雨LongYu12

最新推荐文章于 2024-01-15 21:27:54 发布

阅读量152

点赞数

分类专栏： Js 文章标签： javascript html canvas

本文链接：https://blog.csdn.net/A88552211/article/details/121611822

版权

Js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" onchange="getImg(this)"/>
		<img src="" id="img"  >
		<script>
			function getImg(e){
				let [file] = e.files
				let render = new FileReader()
				render.readAsDataURL(file)
				render.onload = res => {
					// console.log(res.target.result)
					let {result} = res.target
					img.src = result// 讲 base64 文件流付给img
					img.onload = res => {
					  let re = new Blob([result], {type:'image/jpeg'})
					  console.log(re.size/1024)
					  if(re.size > (1024 * 1024)) {
						  result = compression(img)
						  img.src = result
					  }
					}
					render = null // 清空
				}
				render.onerror = err => {
					console.log('上传失败', err)
				}
			}
			
			// 图片压缩
			function compression(image) { 
				let canvas = document.createElement('canvas')
				canvas.width = img.naturalWidth
				canvas.height = img.naturalHeight
				canvas.setAttribute('id', 'ctx')
				let ctx = canvas.getContext("2d");
				let multiple = (1024 * 1024) / (img.naturalWidth * img.naturalHeight) // 压缩倍率，保证压缩在小于1MB
				multiple = multiple > 0.8 ? 0.8 : multiple
				ctx.drawImage(image, 0, 0, img.naturalWidth, img.naturalHeight)
				return canvas.toDataURL('image/jpeg', multiple) // 压缩后的图片的文件流
			}
		</script>
	</body>
</html>

龙雨LongYu12

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js+canvas 实现图片压缩

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" onchange="getImg(this)"/> <img src="" id="img" > <script> function ge.
复制链接

扫一扫

专栏目录