|
|
/**
|
|
|
* 获得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);
|
|
|
}
|
|
|
});
|
|
|
*/ |
