实现原理：canvas.toDataURL（https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL）
实现方法：Compressor.js（https://github.com/fengyuanchen/compressorjs）
压缩效果
压缩效果对比
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片压缩</title>
<style>
.upinputBox {
width: 300px;
height: 300px;
border: 1px dashed #ccc;
position: relative;
border-radius: 5px;
}
.upinput {
width: 100%;
height: 100%;
opacity: 0;
}
.upTxt {
position: absolute;
left: 0;
right: 0;
top: 30%;
text-align: center;
color: #999;
z-index: -1;
}
.qualitySpan {
color: #999;
font-size: 14px;
}
.qualityTxt {
width: 140px;
padding: 2px 6px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="upinputBox">
<input class="upinput" type="file" id="file" accept="image/*" />
<div class="upTxt">
<p>将图片拖到此处</p>
<p>或点击选择</p>
</div>
</div>
<div>
<span class="qualitySpan">压缩比率（1-100）：</span>
<input
type="text"
id="quality"
value="80"
placeholder="输入1-100之间数字"
onchange="upquality()"
class="qualityTxt"
/>
</div>
<script src="https://unpkg.com/compressorjs@1.0.7/dist/compressor.js"></script>
<script>
document.getElementById("file").addEventListener("change", (e) => {
// console.log('获取图片：', e);
const file = e.target.files[0];
if (!file) {
return;
}
let qval = document.getElementById("quality").value;
qval = qval.trim();
qval = Number(qval);
console.log("压缩:", qval);
if (qval > 1 && qval < 100) {
new Compressor(file, {
quality: qval / 100,
success(result) {
console.log("压缩成功：", result);
let alink = document.createElement("a");
alink.href = webkitURL.createObjectURL(result);
alink.download = result.name; //图片名
alink.click();
},
error(err) {
console.log("压缩失败：", err.message);
},
});
} else {
alert("输入1-100之间数字");
}
});
// 重置内容
function upquality() {
document.getElementById("file").value = "";
}
</script>
</body>
</html>
网友评论