1. 通过input type="file" 获取图片
2. 通过dom获取input节点
3. 通过addEventListener('change',function(e){})监听文件获取
4. 再addEventListener函数内通过事件对象 e.target.files[0] 获取图
5. 编写压缩函数，通过canvas实现压缩
原代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file">
<h4>压缩前</h4>
<img id='img1' src="" alt="">
<h4>压缩后</h4>
<img id='img2' src="" alt="">
<script>
var imgFile = document.querySelector('input')
var img1 = document.getElementById('img1')
var img2 = document.getElementById('img2')
// 选取文件函数
imgFile.addEventListener('change',function(e) {
console.log(e.target.files[0])
let read = new FileReader()
// 让实例化API获取文件内容
read.readAsDataURL(e.target.files[0])
// 加载时打印出原文件的base64编码内容
read.onload = function() {
console.log(read.result)
// 显示原图片
img1.src = read.result
compressImg(read.result,90,'image/jpeg')
}
})
// 压缩函数，imgBase64为图片源文件，quality图片质量，imgType图片类型
function compressImg(imgBase64,quality,imgType) {
let canvas = document.createElement('canvas')
let img = document.createElement('img')
// 创建img存储图片,用于canvas获取
img.src = imgBase64
img.onload = function() {
// canvas.width = 300
// canvas.height = 300
let ctx = canvas.getContext('2d')
ctx.drawImage(img,0,0)
// 第二个参数除100 ，因为该API质量范围为0-1，我们传入的值为90，需要转换
let newImg = canvas.toDataURL(imgType,quality / 100)
// 显示压缩后图片
img2.src = newImg
console.log(newImg)
// 最后打印出的base64编码可以对比压缩前后大小
}
}
</script>
</body>
</html>
8437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
