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>
<i
最低0.47元/天 解锁文章
扫一扫
1761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
