直接贴代码
<html>
<head>
<title>前端js图片压缩</title>
<style>
#previewImg,#compressedImg{display:inline-block;width:300px;height:auto;}
#previewImg,#compressedImg{display:none;}
</style>
</head>
<body>
<input type="file" id="selectFile" />
<hr/>
<dl>
<dt>压缩前的图片</dt>
<dd><img src="" id="previewImg" /></dd>
<dd id="beforeCompress"></dd>
</dl>
<canvas id="canvas" style="display: none;"></canvas>
<hr/>
<dl>
<dt>压缩后的图片</dt>
<dd><img src="" id="compressedImg" /></dd>
<dd id="afterCompress"></dd>
</dl>
<hr/>
<div id="info"></div>
<script type="text/javascript">
var selectFile = document.getElementById("selectFile")
var previewImg = document.getElementById("previewImg")
var compressedImg = document.getElementById("compressedImg")
var beforeCompress = document.getElementById("beforeCompress")
var afterCompress = document.getElementById("afterCompress")
var info = document.getElementById("info")
// 这里是入口，获取上传时选择的文件流
selectFile.onchange = function(e) {
var input = e.srcElement;
var files = input.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function () {
var img = new Image();
img.src = reader.result;
previewImg.setAttribute('src', img.src);
previewImg.style = "display:inline-block;";
img.onload = function () {
// 注意：图像绘制时，必须保证资源已经加载完成
var p1 = document.createElement('p')
p1.innerHTML = 图片的原始宽度: +img.naturalWidth+'px'
var p2 = document.createElement('p')
p2.innerHTML = 图片的原始高度: +img.naturalHeight+'px'
var p3 = document.createElement('p')
p3.innerHTML = 图片的原始大小(byte): +file.size
beforeCompress.appendChild(p1)
beforeCompress.appendChild(p2)
beforeCompress.appendChild(p3)
draw(img, file)
}
}
reader.readAsDataURL(file);
}
function draw(img, file) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置 canvas 的宽高，默认同比缩小1倍，其他缩放策略可自行设置。
canvas.width = img.naturalWidth/2;
canvas.height = img.naturalHeight/2;
// 将图片绘制到 canvas 上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 获取压缩后的图片数据
// 可调整质量参数
const compressedData = canvas.toDataURL(file.type, 0.7);
// 创建一个新的压缩后的 File 对象
const compressedFile = dataURItoBlob(compressedData, file.type);
compressedFile.lastModifiedDate = file.lastModifiedDate;
compressedFile.name = file.name;
var reader = new FileReader();
reader.onload = function () {
var img = new Image();
img.src = reader.result;
compressedImg.setAttribute('src', img.src);
compressedImg.style = "display:inline-block;";
img.onload = function () {
var p1 = document.createElement('p')
p1.innerHTML = 压缩后图片的宽度: +img.naturalWidth+'px'
var p2 = document.createElement('p')
p2.innerHTML = 压缩后图片的高度: +img.naturalHeight+'px'
var p3 = document.createElement('p')
p3.innerHTML = 压缩后图片的原始大小(byte): +compressedFile.size
afterCompress.appendChild(p1)
afterCompress.appendChild(p2)
afterCompress.appendChild(p3)
var p4 = document.createElement('p')
p4.innerHTML = 压缩后图片的大小减少了: +(parseFloat((file.size-compressedFile.size)/file.size).toFixed(2)*100)+'%';
info.appendChild(p4)
}
}
reader.readAsDataURL(compressedFile);
// 这里是出口，compressedFile是文件流，继续后面上传的操作
// uploadImage(compressedFile);
}
function dataURItoBlob(dataURI, mimeType) {
const binary = atob(dataURI.split(',')[1]);
const array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: mimeType });
}
</script>
</body>
</html>上效果
