使用js在layui中实现上传图片压缩

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.5; // 默认图片质量为0.7//生成canvasvar 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);// 回调函数返回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});}

<form action="file/uploadDoc" enctype="multipart/form-data" method="post" id="form"><input type="file" id="file" name="file" /><input type="submit" value="上传" /></form>

$("#file").change(function() {var formData = new formData("form");var file = this.files[0];photoCompress(file, {quality: 0.5,}, function(base64Codes) {var bl = convertBase64UrlToBlob(base64Codes);formData.set("file", bl, file.name);});});

<form enctype="multipart/form-data" method="post" id="form"><input type="file" id="file" name="file" /><input type="button" value="上传" id="uploadBtn"/></form>

$("#uploadBtn").click(function () {var formData = new formData("form");$.ajax({type:"post",url:"",async:true,data:formData,success:function (data) {},error:function (e) {}});});

<button type="button" class="layui-btn" id="upImg">上传图片</button><div id="img_list"></div><input type="button" id = "btnHide" class="none">

layui.use('upload', function() {var upload = layui.upload;var uploadInst = upload.render({elem: '#upImg',url: '/upload/',auto: false,bindAction: "#btnHide",choose: function(obj) {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 {if(file.size > 200 * 1024) {delete files[index];photoCompress(file, {quality: 0.5,}, 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) {//这里把后台返回的数据进行操作，展示上传完成的图片，具体数据格式参考layui的API},error: function() {}});});