IOS中html5上傳圖片方向問題解決方法
用html5編寫圖片裁切上傳,在iphone手機(jī)上可能會(huì)遇到圖片方向錯(cuò)誤問題,在此把解決方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果還沒有接觸的同學(xué),先了解一下其方法。
//此方法為file input元素的change事件 function change(){ var file = this.files[0]; var orientation; //EXIF js 可以讀取圖片的元信息 https://github.com/exif-js/exif-js EXIF.getData(file,function(){ orientation=EXIF.getTag(this,'Orientation'); }); var reader = new FileReader(); reader.onload = function(e) { getImgData(this.result,orientation,function(data){ //這里可以使用校正后的圖片data了 }); } reader.readAsDataURL(file); }
// @param {string} img 圖片的base64 // @param {int} dir exif獲取的方向信息 // @param {function} next 回調(diào)方法,返回校正方向后的base64 function getImgData(img,dir,next){ var image=new Image(); image.onload=function(){ var degree=0,drawWidth,drawHeight,width,height; drawWidth=this.naturalWidth; drawHeight=this.naturalHeight; //以下改變一下圖片大小 var maxSide = Math.max(drawWidth, drawHeight); if (maxSide > 1024) { var minSide = Math.min(drawWidth, drawHeight); minSide = minSide / maxSide * 1024; maxSide = 1024; if (drawWidth > drawHeight) { drawWidth = maxSide; drawHeight = minSide; } else { drawWidth = minSide; drawHeight = maxSide; } } var canvas=document.createElement('canvas'); canvas.width=width=drawWidth; canvas.height=height=drawHeight; var context=canvas.getContext('2d'); //判斷圖片方向,重置canvas大小,確定旋轉(zhuǎn)角度,iphone默認(rèn)的是home鍵在右方的橫屏拍攝方式 switch(dir){ //iphone橫屏拍攝,此時(shí)home鍵在左側(cè) case 3: degree=180; drawWidth=-width; drawHeight=-height; break; //iphone豎屏拍攝,此時(shí)home鍵在下方(正常拿手機(jī)的方向) case 6: canvas.width=height; canvas.height=width; degree=90; drawWidth=width; drawHeight=-height; break; //iphone豎屏拍攝,此時(shí)home鍵在上方 case 8: canvas.width=height; canvas.height=width; degree=270; drawWidth=-width; drawHeight=height; break; } //使用canvas旋轉(zhuǎn)校正 context.rotate(degree*Math.PI/180); context.drawImage(this,0,0,drawWidth,drawHeight); //返回校正圖片 next(canvas.toDataURL("image/jpeg",.8)); } image.src=img; }
- iOS視頻壓縮存儲(chǔ)至本地并上傳至服務(wù)器實(shí)例代碼
- iOS 使用AFN上傳視頻到服務(wù)器示例代碼
- IOS開發(fā)教程之put上傳文件的服務(wù)器的配置及實(shí)例分享
- IOS 開發(fā)獲取本地圖片路徑及上傳
- iOS通過http post上傳圖片
- iOS實(shí)現(xiàn)視頻和圖片的上傳思路
- iOS開發(fā)之tableView點(diǎn)擊下拉擴(kuò)展與內(nèi)嵌collectionView上傳圖片效果
- iOS實(shí)現(xiàn)壓縮圖片上傳功能
- 詳解IOS開發(fā)中圖片上傳時(shí)兩種圖片壓縮方式的比較
- iOS將相冊(cè)中圖片上傳至服務(wù)器的方法
相關(guān)文章
iOS密碼在進(jìn)入后臺(tái)1小時(shí)后重新設(shè)置
這篇文章主要介紹了iOS密碼在進(jìn)入后臺(tái)1小時(shí)后重新設(shè)置的相關(guān)資料,需要的朋友可以參考下2017-08-08iOS實(shí)現(xiàn)控制屏幕常亮不變暗的方法示例
最近在工作中遇到了要將iOS屏幕保持常亮的需求,所以下面這篇文章主要給大家介紹了關(guān)于利用iOS如何實(shí)現(xiàn)控制屏幕常亮不變暗的方法,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10iOS實(shí)現(xiàn)點(diǎn)擊狀態(tài)欄自動(dòng)回到頂部效果詳解
在IOS開發(fā)過程中,經(jīng)常會(huì)有這種需求,需要通過點(diǎn)擊狀態(tài)欄返回到頂部,給用戶更好的體驗(yàn)效果,下面這篇文章給大家詳細(xì)介紹了實(shí)現(xiàn)過程,有需要的可以參考借鑒。2016-09-09iOS內(nèi)存管理Tagged Pointer使用原理詳解
這篇文章主要為大家介紹了iOS內(nèi)存管理Tagged Pointer使用原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式
這篇文章主要介紹了iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式的相關(guān)資料,需要的朋友可以參考下2016-09-09iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單
這篇文章主要介紹了 iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單的相關(guān)資料,需要的朋友可以參考下2016-12-12