var Orientation = null; var upUrl = ''; function previewImage(obj,type,upurl=''){ upUrl = upurl; setFilesReader(obj.files[0], 0,type); } function setFilesReader(file, ismul,type) { //获取照片方向角属性,用户旋转控制 EXIF.getData(file, function() { Orientation = EXIF.getTag(this, 'Orientation'); }); var reader = new window.FileReader(); reader.onload = function(e) { compress(this.result, fileSize, ismul,type); } reader.readAsDataURL(file); //console.log(this.files[0]); var fileSize = Math.round(file.size/1024/1024) } //onchange="readMultiFiles(this.files)" function readMultiFiles(files) { for (var i = 0; i < files.length; i++) { setFilesReader(files[i]); } } //res代表上传的图片,fileSize大小图片的大小 function compress(res, fileSize, ismul,type) { var img = new Image(), maxW = 1000; //设置最大宽度 img.onload = function () { var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d'); if(img.width > maxW) { img.height *= maxW / img.width; img.width = maxW; } var w = img.width, h = img.height; cvs.width = w; cvs.height = h; ctx.clearRect(0, 0, cvs.width, cvs.height); if (Orientation != "" && Orientation != 1 && Orientation != undefined) { switch (Orientation) { case 6://需要顺时针90度旋转 cvs.width = h; cvs.height = w; ctx.rotate(Math.PI / 2); ctx.drawImage(img, 0, -h, w, h); break; case 8://需要逆时针90度旋转 cvs.width = h; cvs.height = w; ctx.rotate(-90 * Math.PI / 180); ctx.drawImage(img, -w, 0, w, h); break; case 3://需要180度旋转 ctx.rotate(180 * Math.PI / 180); ctx.drawImage(img, -w, -h, w, h); break; } }else{ ctx.drawImage(img, 0, 0, img.width, img.height); } var compressRate = getCompressRate(1,fileSize); var dataUrl = cvs.toDataURL('image/jpeg', compressRate); if(upUrl!=''){ showLoading(); $.post(upUrl,{preview:dataUrl},function(res) { hideLoading(); if(res){ if(res.error == 1){ $('#'+type).val(res.picurl); }else{ showToast(res.msg); return false; } } }, 'json'); }else{ if($('#'+type)){ $('#'+type).val(dataUrl); } } if($('#'+type+'img')){ $('#'+type+'img').attr('src',dataUrl); } if($('#'+type+'show')){ $('#'+type+'show').css('display', 'block'); } } img.src = res; } //计算压缩比率,size单位为MB function getCompressRate(allowMaxSize,fileSize){ var compressRate = 1; if(fileSize/allowMaxSize > 4){ compressRate = 0.5; } else if(fileSize/allowMaxSize >3){ compressRate = 0.6; } else if(fileSize/allowMaxSize >2){ compressRate = 0.7; } else if(fileSize > allowMaxSize){ compressRate = 0.8; } else{ compressRate = 0.9; } return compressRate; } function photoChange(obj){ var files = obj.files, file; if(files && files.length) { showLoading(); previewImage(obj,'preview'); file = files[0]; if(/^image\/\w+$/.test(file.type)) { setTimeout(function(){ hideLoading(); toAlloyCrop($('#preview').val()); },1000); obj.value = ''; } else { showToast('请上传图片'); } } }