需求:使用input在手機端調用圖片和相機,後通過canvas來渲染圖片並做相應調整保存;
問題:通過input讀取文件時並未遇到問題,但在canvas讀取圖片生成base64數據時,發現通過手機拍照的圖片,豎向拍照,卻橫向顯示(坑爹的iphone)
用html5編寫圖片裁切上傳,在iphone手機上可能會遇到圖片方向錯誤問題,在此把解決方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果還沒有接觸的同學,先了解一下其方法。
//此方法爲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 回調方法,返回校正方向後的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大小,確定旋轉角度,iphone默認的是home鍵在右方的橫屏拍攝方式
switch(dir){
//iphone橫屏拍攝,此時home鍵在左側
case 3:
degree=180;
drawWidth=-width;
drawHeight=-height;
break;
//iphone豎屏拍攝,此時home鍵在下方(正常拿手機的方向)
case 6:
canvas.width=height;
canvas.height=width;
degree=90;
drawWidth=width;
drawHeight=-height;
break;
//iphone豎屏拍攝,此時home鍵在上方
case 8:
canvas.width=height;
canvas.height=width;
degree=270;
drawWidth=-width;
drawHeight=height;
break;
}
//使用canvas旋轉校正
context.rotate(degree*Math.PI/180);
context.drawImage(this,0,0,drawWidth,drawHeight);
//返回校正圖片
next(canvas.toDataURL("image/jpeg",.8));
}
image.src=img;
}
原因:ihone手機設置橫向拍照纔是正向的,豎直拍照則爲倒立,而圖片查看器等會進行相應檢測並調整,而讀取原本文件時,就會發現此問題;
上面的解決方案:1、input讀取文件;
2、使用https://github.com/exif-js/exif-js ,大神的插件讀取圖片的exif信息中的Orientation,
//EXIF js 可以讀取圖片的元信息 https://github.com/exif-js/exif-js
EXIF.getData(file,function(){
orientation=EXIF.getTag(this,'Orientation');
});
3、通過Orientation信息,操作canvas以不同的旋轉角度來渲染圖片;最後,最近還發現iphone的引用touch事件對象上面的問題,,坑爹。。。