1.实现思路
- 先通过input标签获取本地图片
- 把获取到的图片转换成base64格式
- 使用canvas中的API把图片分辨率调低(canvas只能处理base64格式的图片)
注:不懂base64的同学可以花5分钟看看这个《用FileReader对象把图片转换成base64格式》
2.核心代码
<input id="file" type="file">
let fileObj = document.getElementById('file').files[0]
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function(e) {
console.log(e.target.result)
}
context.drawImage(image, 0, 0, imageWidth, imageHeight)
3.步骤详解(着急的同学可以跳到后面看完整代码)
- 我们先在HTML中添加一个input标签,用于获取本地图片文件,并且写一个img标签,用于展示压缩后的图片。
<body>
<img id="img" src="">
<input id="file" type="file">
</body>
- 给input标签添加一个onchange监听,只要获取到了本地图片,就执行compress( )方法。compress( )将获取到的图片文件转换成base64格式(固定搭配,我们只需要在onload方法中执行自己的操作就行了)。此时代码如下
<body>
<img id="img" src="">
<input id="file" type="file" onchange="compress()">
</body>
<script>
function compress() {
let fileObj = document.getElementById('file').files[0]
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function(e) {
console.log(e.target.result)
}
}
</script>
- 上面的步骤已经获取到了转换后的base64格式图片,我们接下来就要通过canvas来对base64格式的图片进行压缩了。记住,base64转换代码是固定搭配,我们的操作只要添加到onload方法里面即可。此时代码如下
<body>
<img id="img" src="">
<input id="file" type="file" onchange="compress()">
</body>
<script>
function compress() {
let fileObj = document.getElementById('file').files[0]
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function(e) {
let image = new Image()
image.src = e.target.result
image.onload = function() {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 2,
imageHeight = image.height / 2,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg')
document.getElementById('img').src = data
}
}
}
</script>
4.完整代码,最精简的一个demo(复制到html文件就能运行)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>压缩图片demo</title>
</head>
<body>
<img id="img" src="">
<input id="file" type="file" onchange="compress()">
</body>
<script>
function compress() {
let fileObj = document.getElementById('file').files[0]
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function(e) {
let image = new Image()
image.src = e.target.result
image.onload = function() {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 2,
imageHeight = image.height / 2,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg')
document.getElementById('img').src = data
}
}
}
</script>
</html>