使用前端js库pica压缩图片
pica
浏览器中的高质量图像大小调整
在浏览器中调整图像大小，无需像素化，速度相当快。自动选择最好的可用技术：webworkers、webassembly、createImageBitmap、纯JS。
简单使用
<script src="./plugins/pica.min.js"></script>
<script>
function resizeImage(img_path, file_name) {
const img = new Image();
img.src = img_path;
img.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const pica = window.pica({ features: ["all"] });
pica
.resize(img, canvas)
.then((result) => pica.toBlob(result, "image/jpeg", 0.9))
.then((blob) => {
const blob_obj = new Blob([blob], {
type: "image/jpeg",
});
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob_obj);
link.download = file_name + ".jpg";
link.click();
window.URL.revokeObjectURL(link.href);
});
};
}
resizeImage("./images/1.jpg", "download");
</script>批量压缩文件域选择的图片并打包下载
<script src="./plugins/pica.min.js"></script>
<script src="./plugins/jszip.min.js"></script>
<script src="./plugins/FileSaver.js"></script>
<input type="file" id="files" multiple onchange="previewImages(this)" accept="image/*" />
<div id="con-obj" class="container"></div>
<div id="con-data" class="container"></div>
<div id="con-resize" class="container"></div>
<script>
function previewImages(this_obj) {
const elem_con_obj = document.querySelector("#con-obj");
const elem_con_data = document.querySelector("#con-data");
const elem_con_resize = document.querySelector("#con-resize");
const file_list = [];
for (let i in this_obj.files) {
const file = this_obj.files[i];
if (["image/jpeg", "image/png"].indexOf(file.type) < 0) continue;
file_list.push(file);
}
Promise.all(
file_list.map((file) => {
return new Promise((resolve, reject) => {
//预览
const elem_img = document.createElement("img");
elem_img.src = window.URL.createObjectURL(file);
elem_con_obj.append(elem_img);
console.log(elem_img.src);//blob:http://localhost:3000/80e8fa2c-caa1-4a23-a6d2-01bdac2843e2
const file_reader = new FileReader();
file_reader.readAsDataURL(file);
file_reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = function () {
//预览
elem_con_data.append(img);
console.log(img.src);//data:image/png;base64,iVBORw0...
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
//压缩
const pica = window.pica({ features: ["all"] });
pica
.resize(img, canvas)
.then((result) => pica.toBlob(result, "image/jpeg", 0.9))
.then((blob) => {
resolve({ blob: blob, file_name: file.name });
//预览
const elem_img_resize = document.createElement("img");
elem_img_resize.src = window.URL.createObjectURL(blob);
elem_con_resize.append(elem_img_resize);
console.log(elem_img_resize.src);//blob:http://localhost:3000/d2868663-aef0-48a2-8bdc-5e6d9f168a2e
});
};
img.onerror = function () {
reject("not a image");
};
};
file_reader.onerror = function () {
reject("read error");
};
});
})
)
.then((images) => {
console.log(images);
const zip = new JSZip();
for (let i in images) {
zip.file(images[i]["file_name"], images[i]["blob"]);
}
zip.generateAsync({ type: "blob" }).then((blob) => {
saveAs(blob, "compress.zip");
});
})
.catch((err) => {
console.error("Error packaging images:", err);
});
}
</script>以上方法由于使用了Promise.all 保证了所有图片压缩完成后进行打包下载，然而由于Promise.all的特性，若图片中出现伪装成图片的文件会导致当前Promise走向reject，进一步导致了Promise.all 的失败。
尝试解决这个问题，使用Promise.allSettled 改写上面的代码。
<script>
function previewImages(this_obj) {
const elem_con_obj = document.querySelector("#con-obj");
const elem_con_data = document.querySelector("#con-data");
const elem_con_resize = document.querySelector("#con-resize");
const file_list = [];
for (let i in this_obj.files) {
const file = this_obj.files[i];
if (["image/jpeg", "image/png"].indexOf(file.type) < 0) continue;
file_list.push(file);
}
Promise.allSettled(
file_list.map((file) => {
return new Promise((resolve, reject) => {
//预览
const elem_img = document.createElement("img");
elem_img.src = window.URL.createObjectURL(file);
elem_con_obj.append(elem_img);
const file_reader = new FileReader();
file_reader.readAsDataURL(file);
file_reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = function () {
//预览
elem_con_data.append(img);
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
//压缩
const pica = window.pica({ features: ["all"] });
pica
.resize(img, canvas)
.then((result) => pica.toBlob(result, "image/jpeg", 0.9))
.then((blob) => {
resolve({ blob: blob, file_name: file.name });
//预览
const elem_img_resize = document.createElement("img");
elem_img_resize.src = window.URL.createObjectURL(blob);
elem_con_resize.append(elem_img_resize);
});
};
img.onerror = function () {
reject("not a image");
};
};
file_reader.onerror = function () {
reject("read error");
};
});
})
)
.then((images) => {
console.log(images);
const zip = new JSZip();
for (let i in images) {
if (images[i]["status"] == "rejected") continue;
const image = images[i]["value"];
zip.file(image["file_name"], image["blob"]);
}
zip.generateAsync({ type: "blob" }).then((blob) => {
saveAs(blob, "compress.zip");
});
})
.catch((err) => {
console.error("Error packaging images:", err);
});
}
</script>即可保证所有真正的图片可以正常压缩和打包下载。
