前端对图片压缩处理


//第一个参数就是原来的字符串,第二个是宽度,第三个就是回调方法
export const cutImageBase64=(base64, w, callback)=> {
let newImage = new Image();
let quality = 0.6; //压缩系数0-1之间
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
let imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.6;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
let base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
while (base64.length / 1024 > 150) {
quality -= 0.01;
base64 = canvas.toDataURL("image/jpeg", quality);
}
// 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
while (base64.length / 1024 < 50) {
quality += 0.001;
base64 = canvas.toDataURL("image/jpeg", quality);
}
callback(base64);//必须通过回调函数返回,否则无法及时拿到该值
}
}
posted @   aquackw  阅读(210)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示