为什么要压缩图片？
你有没有遇到过这种情况：拍了一张照片想发邮件，结果提示"附件太大"？或者做网站放了几张图，页面加载慢得像蜗牛？
现在手机拍一张照片动辄5MB、10MB，但很多时候我们并不需要那么高的清晰度。比如发朋友圈、做网页配图，压缩到原来的十分之一，肉眼几乎看不出区别。
今天我们做一个在浏览器里就能用的图片压缩工具，最大的好处是：图片不用上传到别人的服务器，隐私安全有保障。
原理是什么？
浏览器有一个叫 Canvas 的功能，你可以把它想象成一块画布。我们把图片画到这块画布上，然后让画布用较低的质量把图片重新导出，图片就变小了。就像复印机调低分辨率复印一样。
第一步：做一个拖拽区域
创建 index.html 文件：
图片压缩工具
把图片拖到这里
虚线边框的区域就是拖拽区域，用户把图片拖进去就开始压缩。
第二步：处理拖拽事件
在body结束标签前加script标签：
var dropZone = document.getElementById("dropZone");
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
dropZone.classList.add("active");
});
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
if (file && file.type.startsWith("image/")) {
compressImage(file);
}
});
第三步：实现压缩功能
这是核心部分：
function compressImage(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob) {
showResult(file.size, blob.size, blob);
}, "image/jpeg", 0.7);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
最关键的是 toBlob 的第三个参数 0.7，表示70%的质量。这个数字可以调，0.5就是50%质量，文件更小但画质也更低。
第四步：显示结果并提供下载
function showResult(oldSize, newSize, blob) {
var saved = Math.round((1 - newSize/oldSize) * 100);
var url = URL.createObjectURL(blob);
var html = "原始大小：" + (oldSize/1024).toFixed(1) + "KB";
html += " | 压缩后：" + (newSize/1024).toFixed(1) + "KB";
html += " | 节省了" + saved + "%";
html += "
下载压缩后的图片";
document.getElementById("result").innerHTML = html;
}
总结
这个工具虽然简单，但非常实用。所有处理都在你的浏览器里完成，图片不会上传到任何服务器。你可以把它放到自己的网站上，也可以直接在本地用。