/** * 获得base64 * @param {Object} obj * @param {Number} [obj.width] 图片需要压缩的宽度,高度会跟随调整 * @param {Number} [obj.quality=0.8] 压缩质量,不压缩为1 * @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file * @param {Function} obj.success(obj) 处理后函数 * @example * */ $.fn.localResizeIMG = function (obj) { this.on('change', function () { if (this.files.length == 0) { return; } var UploadNum = 1; if (obj.UploadNum != undefined && obj.UploadNum != null && obj.UploadNum != "") { UploadNum = obj.UploadNum; if (UploadNum < 1) UploadNum = 1; } if (this.files.length > UploadNum) { alert("最多只能选择" + UploadNum + "个文件"); return; } var error = ""; var listResult = new Array(); for (var i = 0; i < this.files.length; i++) { var file = this.files[i]; if (file.size == 0) { error = file.name+"大小为0KB,不允许上传"; break; } if (obj.sizeLimit != 0) { var sizeLimit = 0; if (obj.sizeLimit.indexOf("kb") >= 0) { sizeLimit = parseInt(obj.sizeLimit.substr(0, obj.sizeLimit.length - 2) * 1024); } else if (obj.sizeLimit.indexOf("mb") >= 0) { sizeLimit = parseInt(obj.sizeLimit.substr(0, obj.sizeLimit.length - 2) * 1024 * 1024); } else { sizeLimit = parseInt(obj.sizeLimit); } if (file.size > sizeLimit) { error = file.name + "超出限制,不能大于" + obj.sizeLimit; break; } } if (obj.fileTypeExts == "*") obj.fileTypeExts = ""; var extStart = file.name.lastIndexOf(".") + 1; var ext = file.name.substring(extStart, file.name.length).toLowerCase(); if (obj.fileTypeExts != "") { var ss = obj.fileTypeExts.split(","); var bk = false; for (var i = 0; i < ss.length; i++) { var s = ss[i].substr(2, ss[i].length).toLowerCase(); if (ext == s) { bk = true; break; } } if (bk == false) { error = file.name + "上传文件格式错误"; break; } } if (ext != "bmp" && ext != "png" && ext != "gif" && ext != "jpg" && ext != "jpge") { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var base64 = e.target.result; // 生成结果 var result = { name: file.name, filetype: ext, size: file.size, base64: base64, clearBase64: base64.substr(base64.indexOf(',') + 1), error: "" }; listResult.push(result); }; continue; } var URL = window.URL || window.webkitURL; var blob = URL.createObjectURL(file); _create(listResult,blob, file, ext); } if (error != "") { alert(error); this.value = ""; return; } //执行回调 this.value = ''; // 清空临时数据 obj.success(listResult); }); /** * 生成base64 * @param blob 通过file获得的二进制 */ function _create(listResult,blob, file, ext) { var img = new Image(); img.src = blob; img.onload = function () { var that = this; //生成比例 var w = that.width, h = that.height, scale = w / h; if (obj.width > 0) { w = obj.width || w; //h = w / scale; h = obj.height || h; } //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); $(canvas).attr({ width: w, height: h }); ctx.drawImage(that, 0, 0, w, h); /** * 生成base64 * 兼容修复移动设备需要引入mobileBUGFix.js */ var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8); // 修复IOS if (navigator.userAgent.match(/iphone/i)) { var mpImg = new MegaPixImage(img); mpImg.render(canvas, { maxWidth: w, maxHeight: h, quality: obj.quality || 0.8 }); base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8); } // 修复android if (navigator.userAgent.match(/Android/i)) { var encoder = new JPEGEncoder(); base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80); } // 生成结果 var result = { name: file.name, filetype: ext, size: file.size, base64: base64, clearBase64: base64.substr(base64.indexOf(',') + 1), error: "" }; listResult.push(result); }; } }; // 例子 /* $('input:file').localResizeIMG({ width: 100, quality: 0.1, //before: function (that, blob) {}, success: function (result) { var img = new Image(); img.src = result.base64; $('body').append(img); console.log(result); } }); */