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將相冊中圖片上傳至服務(wù)器的方法
相關(guān)文章
iOS密碼在進(jìn)入后臺1小時(shí)后重新設(shè)置
這篇文章主要介紹了iOS密碼在進(jìn)入后臺1小時(shí)后重新設(shè)置的相關(guān)資料,需要的朋友可以參考下2017-08-08
iOS實(shí)現(xiàn)控制屏幕常亮不變暗的方法示例
最近在工作中遇到了要將iOS屏幕保持常亮的需求,所以下面這篇文章主要給大家介紹了關(guān)于利用iOS如何實(shí)現(xiàn)控制屏幕常亮不變暗的方法,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
iOS實(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-09
iOS內(nèi)存管理Tagged Pointer使用原理詳解
這篇文章主要為大家介紹了iOS內(nèi)存管理Tagged Pointer使用原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式
這篇文章主要介紹了iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式的相關(guān)資料,需要的朋友可以參考下2016-09-09
iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單
這篇文章主要介紹了 iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單的相關(guān)資料,需要的朋友可以參考下2016-12-12

