layui上传图片压缩

var uploadInst = upload.render({
elem: '.pictureBtn'
,method: "post"
,accept: 'images'
,acceptMime:'image/png,image/jpg,image/jpeg'
,url: ctx + "/baseinfoOutController/uploadPicture",
auto: false,
bindAction: "#btnHide"
,before: function(obj) {
var configCode = $(this)[0].item[0].title;
var item = "#" + configCode;
var baseInfoId = $("#baseInfoId").val();
var configId = $(item).parent().find("#configId").val();
var personInfoTempId = $(item).parent().find("#personInfoTempId").val();
//预读本地文件示例,不支持ie8
this.data={"baseInfoId":baseInfoId,"configId":configId,"configCode":configCode,"personInfoTempId":personInfoTempId}//携带参数
}, choose: function(obj) {
loadIndex = layer.msg('正在压缩图片中,请稍后...', {icon: 16, shade: 0.3, time:0});
var configCode = $(this)[0].item[0].title;
var item = "#" + configCode;
obj.preview(function(index, file, result){
$(item).attr('src', result); //图片链接(base64)
});
console.info(11111111);
var files = obj.pushFile();
var index, file, indexArr = [];
for(index in files) {
indexArr.push(index);
};
var iaLen = indexArr.length;
file = files[indexArr[iaLen - 1]];
for(var i = 0; i < iaLen - 1; i++) {
delete files[indexArr[i]];
}
try {
console.info(33333333);

				if(file.size > 200 * 1024) {
					console.info(44444444);

					delete files[index];
                    photoCompress(file, {
                        quality: 0.7,
                    }, function(base64Codes) {

						var bl = convertBase64UrlToBlob(base64Codes);
                        obj.resetFile(index, bl, file.name);

                        $("#btnHide").trigger("click");
                    });
                } else {
                    $("#btnHide").trigger("click");
                }
            } catch(e) {
                $("#btnHide").trigger("click");
            }
        },
        done: function(res) {
			//如果上传失败
			if(res.code != 0){
				layer.msg(res.msg, {icon: 2});
			}else{
				//上传成功
				layer.msg(res.msg, {icon: 1});


				var id = res.data;
				$("#baseInfoId").val(id);

				var num = $("#fileNum").val();
				num = parseInt(num) + 1 ;
				$("#fileNum").val(num)
			}
			layer.close(loadIndex);            },
        error: function() {

        }
    });

function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容./
ready.readAsDataURL(file);
ready.onload = function() {
var re = this.result;
canvasDataURL(re, w, objDiv);
}
};
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
while (base64.length / 1024 > 200) {
quality -= 0.01;
base64 = canvas.toDataURL("image/jpeg", quality);
}
// 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
while (base64.length / 1024 < 100) {
quality += 0.001;
base64 = canvas.toDataURL("image/jpeg", quality);
}
console.log("压缩后2222", base64.length / 1024)

		// 回调函数返回base64的值
		callback(base64);
	}
}
function convertBase64UrlToBlob(urlData) {
	var arr = urlData.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
	while(n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: mime
	});
}
posted @ 2021-10-22 17:26  骆驼f  阅读(479)  评论(0)    收藏  举报