1.依賴? jquery.js

2.html部分

<input class="addImage" name="loadFile" type="file" accept="image/*" capture="camera">//capture="camera" 設(shè)置手機端打開上傳文件時使用手機攝像頭拍照上傳，不寫則默認拍照或相冊

3.js部分

//input上傳圖片 $('.addImage').on('change',function(){//開始處理圖片，此時可以做一些“圖片上傳中。。。”的提示等var fileObj = this.files[0]; var fileName = fileObj.name;//壓縮，先旋轉(zhuǎn)在壓縮，因為cavers從畫圖壓縮，壓縮后的圖片就沒有角度等信息了photoCompress(fileObj, {quality: 0.2 //清晰度}, function(base64Codes){//旋轉(zhuǎn)并且壓縮后傳回base64編碼，此時可以用ajax與后端傳輸圖片，此方法不做演示//模擬表單提交var form = new FormData(); // FormData 對象var bl = convertBase64ToBlob(base64Codes); //base64轉(zhuǎn)化為blob對象form.append("loadFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件對象xhr = new XMLHttpRequest(); // XMLHttpRequest 對象xhr.open("post","<../medicalAppointment/tempImg.do", true); //xhr.upload.onprogress = progressFunction;//【上傳進度調(diào)用方法實現(xiàn)】//請求完成執(zhí)行uploadCompletexhr.onload = function uploadComplete(evt){ var data = evt.target.responseText; //返回的數(shù)據(jù)dataconsole.log(data)};xhr.onerror = function uploadFailed(){}; //請求失敗xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)})})//壓縮后base64轉(zhuǎn)化為blobvar convertBase64ToBlob = function(base64){var base64Arr = base64.split(',');var imgtype = '';var base64String = '';if(base64Arr.length > 1){//如果是圖片base64，去掉頭信息base64String = base64Arr[1];imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';'));}// 將base64解碼var bytes = atob(base64String);//var bytes = base64;var bytesCode = new ArrayBuffer(bytes.length);// 轉(zhuǎn)換為類型化數(shù)組var byteArray = new Uint8Array(bytesCode);// 將base64轉(zhuǎn)換為ascii碼for (var i = 0; i < bytes.length; i++) {byteArray[i] = bytes.charCodeAt(i);}// 生成Blob對象（文件對象）return new Blob( [bytesCode] , {type : imgtype});};//判斷手機類型安卓/iosfunction isAndroid_ios(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 return isAndroid==true?true:false; }//壓縮圖片function photoCompress(file,w,objDiv){var ready=new FileReader();/*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/ready.readAsDataURL(file);ready.onload=function(){var re=this.result;var imageSize = e.total;//圖片大小if(isAndroid_ios()){ //安卓 //不旋轉(zhuǎn)圖片canvasDataURL(re,w,objDiv)}else{//旋轉(zhuǎn)圖片var image = new Image();image.src = re;image.onload = function () {//開始旋轉(zhuǎn)圖片var newImage = rotateImage(image);var newImageSrc = newImage.src;canvasDataURL(newImageSrc,w,objDiv);}}}}function canvasDataURL(path, obj, callback){var img = new Image();img.src = path;img.onload = function(){var that = this;// 圖片原始尺寸var originWidth = that.width;var originHeight = that.height;// 最大尺寸限制，可通過設(shè)置寬高來實現(xiàn)圖片壓縮程度var maxWidth = 1000,maxHeight = 2000;// 目標尺寸var w = originWidth || obj.width,h = originHeight || obj.height;// 圖片尺寸超過1000x2000的限制if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {// 更寬，按照寬度限定尺寸w = maxWidth;h = Math.round(maxWidth * (originHeight / originWidth));} else {h = maxHeight;w = Math.round(maxHeight * (originWidth / originHeight));}}// 默認按比例壓縮/* var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);*/var quality = 0.7; // 默認圖片質(zhì)量為0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 創(chuàng)建屬性節(jié)點var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 圖像質(zhì)量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小，所繪制出的圖像越模糊var base64 = canvas.toDataURL('image/jpeg', quality);// 回調(diào)函數(shù)返回base64的值callback(base64);}}//旋轉(zhuǎn)圖片，手機拍照上傳圖片旋轉(zhuǎn)問題function rotateImage(image) {//console.log('rotateImage');var width = image.width;var height = image.height;var canvas = document.createElement("canvas")var ctx = canvas.getContext('2d');var newImage = new Image();//旋轉(zhuǎn)圖片操作EXIF.getData(image,function () {var orientation = EXIF.getTag(this,'Orientation');// orientation = 6;//測試數(shù)據(jù)//alert('orientation:'+orientation);switch (orientation){//正常狀態(tài)case 1:console.log('旋轉(zhuǎn)0°');// canvas.height = height;// canvas.width = width;newImage = image;break;//旋轉(zhuǎn)90度case 6:console.log('旋轉(zhuǎn)90°');canvas.height = width;canvas.width = height;ctx.rotate(Math.PI/2);ctx.translate(0,-height);ctx.drawImage(image,0,0);imageDate = canvas.toDataURL('Image/jpeg',1)newImage.src = imageDate;break;//旋轉(zhuǎn)180°case 3:console.log('旋轉(zhuǎn)180°');canvas.height = height;canvas.width = width;ctx.rotate(Math.PI);ctx.translate(-width,-height);ctx.drawImage(image,0,0);imageDate = canvas.toDataURL('Image/jpeg',1)newImage.src = imageDate;break;//旋轉(zhuǎn)270°case 8:console.log('旋轉(zhuǎn)270°');canvas.height = width;canvas.width = height;ctx.rotate(-Math.PI/2);ctx.translate(-height,0);ctx.drawImage(image,0,0);imageDate = canvas.toDataURL('Image/jpeg',1)newImage.src = imageDate;break;//undefined時不旋轉(zhuǎn)case undefined:console.log('undefined 不旋轉(zhuǎn)');newImage = image;break;}});return newImage;}

?

總結(jié)

以上是生活随笔為你收集整理的前端解决手机拍照旋转问题及图片压缩上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。