JS图片base64压缩

Posted 2021-05-20 云里游的鱼

function changeImg(e, filePath, index) {
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
//检查后缀名
if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
//showError(\'文件格式必须为：png/jpg/jpeg\');
layer.open({ content: \'文件格式必须为：png/jpg/jpeg\', skin: \'msg\', time: 2 });
return;
}
//获取并记录图片的base64编码
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onloadend = function () {

// 图片的 base64 格式, 可以直接当成 img 的 src 属性值
var dataURL = reader.result;
//// console.log(dataURL)
//// 显示图片
//$("#imgBox").html($("#imgBox").html() + \'<div class="imgContainer" data-index=\' + index + \'><img class="imgs_\' + index + \'" src=\' + dataURL + \' onclick="imgDisplay(this)"><img onclick="removeImg(this,\' + index + \')" class="imgDelete" src="/images/del_img.png" /></div>\');

//你可以打桩看一下有多长
console.log(dataURL.length);
//然后调用压缩方法 第一个参数就是原来的字符串，第二个是宽度，第三个就是回调方法，也就是压缩函数最后面那个callback（base64）
dealImage(dataURL, 800, useImg, index);
};

}

 

function dealImage(base64, w, callback,index) {
var newImage = new Image();
var quality = 1; //压缩系数0-1之间
newImage.src = base64;
newImage.setAttribute("crossOrigin", \'Anonymous\'); //url为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var 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 = 1;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var 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, index);//必须通过回调函数返回，否则无法及时拿到该值
}
}

function useImg(base64, index) {
str = base64;
console.log(str.length);
$("#imgBox").html($("#imgBox").html() + \'<div class="imgContainer" data-index=\' + index + \'><img class="imgs_\' + index + \'" src=\' + base64 + \' onclick="imgDisplay(this)"><img onclick="removeImg(this,\' + index + \')" class="imgDelete" src="/images/del_img.png" /></div>\');
}