js 前端图片压缩+ios图片角度旋转

function ImgToBase64 (e, fn) {
// 图片方向角
//fn为传入的方法函数，在图片操作完成之后执行
var Orientation = null;//ios选择上传图片是图片角度问题
var base64 = false;
var max_size = 480 * 1024;//单位B，图片最大尺寸
var ratio = 0.99;
if (window.File && window.FileList && window.FileReader && window.Blob) {
e = e || window.event;
e.stopPropagation(); // 阻止冒泡
e.preventDefault(); //阻止默认行为
var files = e.target.files;
var f = files[0];//图片单张上传
if (f) {
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(f.type)) {
base64 = false;
$.m.fade("请选择jpeg、png格式的图片");
return;
}
//获取照片方向角属性ios
//ios图片方向调整需要加载exif exif文件下载
EXIF.getData(f, function () {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
}
if (f.size < 10) {
base64 = false;
return;
} else if (f.size > 1024 * 1024 * 10) {
//10M
base64 = false;
$.m.fade("您选择的图片过大,请重新选择10M以内的图片!");
return;
}
$.m.loading(true); var reader = new FileReader();
var image = new Image;
image.src = '';
reader.onload = function () {
image.src = this.result;
image.onload = function () {
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var w = image.naturalWidth,
h = image.naturalHeight;
canvas.width = w;
canvas.height = h;
ctx.drawImage(image, 0, 0);//, w, h, 0, 0, w, h
if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
switch (Orientation) {
case 6://需要顺时针90度旋转
canvas.width = h;
canvas.height = w;
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(this, 0, -h);
break;
case 8://需要逆时针90度旋转
canvas.width = h;
canvas.height = w;
ctx.rotate(-90 * Math.PI / 180);
ctx.drawImage(this, -w, 0);
break;
case 3://需要180度旋转
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(this, -w, -h);
break;
}
}
compressImg(ratio);//压缩图片
function compressImg(_ratio) {
base64 = canvas.toDataURL("image/jpeg", _ratio);
var _f = base64ToBlob(base64, new Date().getTime());
//没有达到要求的图片尺寸时，反复压缩
if(_ratio>0.11 && _f.size > max_size){
var rr =parseFloat((_ratio - 0.11).toFixed(2)) ;
compressImg(rr);
}else if(_ratio<=0.11 && _ratio>0 && _f.size > max_size){
var rr =parseFloat((_ratio - 0.01).toFixed(2)) ;
compressImg(rr);
}else{
fn(base64);
}
}
};
}
reader.readAsDataURL(f);
}
}

function base64ToBlob (_data, timeTrap) {
//window.atob方法将其中的base64格式的图片转换成二进制字符串；若将转换后的值直接赋值给Blob会报错，需Uint8Array转换：最后创建Blob对象；
//base64转blob
_data = _data.split(',')[1];
var binary = window.atob(_data);
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
var blob = new Blob([view], { type: 'image/jpeg' });
blob.name = timeTrap + '.jpg';//以时间戳给图片重命名
return blob;
}

<div class="l-m-r">
<span class="mtitle">选择图片</span>
<span class="m"></span>
<span class="right-text">
<div class="p-imgs">
<div class="top-bottom" id="img-upload">
<i class="iconfont yxticon-camera"></i>
<p>添加商品图</p>
<input class="file" image-file type="file" accept="image/*,camera">

</div>
</div>
</span>
</div>

'image-file': {
evt: 'change',
fun: function (e) {
//选择了图片
var _this = this;
//input的file框onchange事件触发一次失效的新的解决方法
$(this).remove();
$('#img-upload').append('<input class="file" image-file type="file" accept="image/*">')
ImgToBase64(e, setHtmlFun);//调用step1
function setHtmlFun(base64) {
$.m.loading(false);
if (params.file.length > 3) {
$.m.fade('图片最多只能上传4张！');
return;
}
var timeflag = new Date().getTime();
var blob =base64ToBlob(base64, timeflag);//调用step2
params.file[params.file.length] = blob;//将文件存储到对应参数中

//图片展示
var ele = '\
<div class="img">\
<img src="'+ base64 + '">\
<i class="iconfont yxticon-arrow-delete" delete-img data-name="'+ timeflag + '.jpg" ></i>\
</div>\
'
$('#uploadImgs').append(ele);
}
}
}