/** * 获得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() { var file = this.files[0]; if (file == null) return; if (file.size == 0) { var result = { name: file.name, filetype: "", size: 0, base64: "", clearBase64: "", error: "不能上传空文件" }; // 执行后函数 obj.success(result); this.value = ''; // 清空临时数据 return; } 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) { var result = { name: file.name, filetype:"", size: 0, base64: "", clearBase64: "", error: "上传文件不能大于" + obj.sizeLimit }; // 执行后函数 obj.success(result); this.value = ''; // 清空临时数据 return; } } 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) { var result = { name: file.name, filetype: "", size: 0, base64: "", clearBase64: "", error: "上传文件格式错误" }; // 执行后函数 obj.success(result); this.value = ''; // 清空临时数据 return; } } 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: "" }; // 执行后函数 obj.success(result); this.value = ''; // 清空临时数据 }; return; } var URL = window.URL || window.webkitURL; var blob = URL.createObjectURL(file); // 执行前函数 if ($.isFunction(obj.before)) { obj.before(this, blob, file) }; _create(blob, file,ext); this.value = ''; // 清空临时数据 }); /** * 生成base64 * @param blob 通过file获得的二进制 */ function _create(blob, file, ext) { var Orientation = null; try { EXIF.getData(file, function () { EXIF.getAllTags(this); Orientation = EXIF.getTag(this, 'Orientation'); }); } catch (err) { } var img = new Image(); img.src = blob; img.onload = function() { var that = this; //生成比例 var w = that.width, h = that.height, scale = obj.width/ w; if (obj.width > 0 && obj.width < that.width) { w = obj.width; h = h*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); var base64 = ""; // alert(Orientation); // 修复IOS if (Orientation != "" && Orientation != 1) { switch (Orientation) { case 6://需要顺时针(向左)90度旋转 rotateImg(this, 'left', canvas); break; case 8://需要逆时针(向右)90度旋转 rotateImg(this, 'right', canvas); break; case 3://需要180度旋转 rotateImg(this, 'right', canvas);//转两次 rotateImg(this, 'right', canvas); break; } } base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8); // 生成结果 var result = { name: file.name, filetype: ext, width: that.width, height: that.height, w: w, h: h, size: file.size, base64: base64, clearBase64: base64.substr(base64.indexOf(',') + 1), error: "" }; // 执行后函数 obj.success(result); }; } }; function rotateImg(img, direction, canvas) { //alert(img); //最小与最大旋转方向,图片旋转4次后回到原方向 var min_step = 0; var max_step = 3; //var img = document.getElementById(pid); if (img == null) return; //img的高度和宽度不能在img元素隐藏后获取,否则会出错 var height = img.height; var width = img.width; //var step = img.getAttribute('step'); var step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋转到原位置,即超过最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //img.setAttribute('step', step); /*var canvas = document.getElementById('pic_' + pid); if (canvas == null) { img.style.display = 'none'; canvas = document.createElement('canvas'); canvas.setAttribute('id', 'pic_' + pid); img.parentNode.appendChild(canvas); } */ //旋转角度以弧度值为参数 var degree = step * 90 * Math.PI / 180; var ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } } // 例子 /* $('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); } }); */