資訊專欄INFORMATION COLUMN
摘要：用編寫圖片裁切上傳，在手機(jī)上可能會(huì)遇到圖片方向錯(cuò)誤問題，在此把解決方法和大家分享一下，用到了的和，如果還沒有接觸的同學(xué)，先了解一下其方法。
用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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78531.html
摘要：原文還是在簡(jiǎn)書上上傳本地圖片處理各種問題這是最近給公司寫一個(gè)項(xiàng)目，項(xiàng)目要求大概是這樣子上傳手機(jī)本地圖片，然后裁剪后加的需求能夠旋轉(zhuǎn)圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個(gè)相關(guān)的圖片，水印到裁剪的圖片上，上傳服務(wù)器生成 原文還是在簡(jiǎn)書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個(gè)項(xiàng)目，項(xiàng)目要求大概是這樣子：1.上傳手機(jī)本地圖片，然后裁剪（后加的需...
摘要：原文還是在簡(jiǎn)書上上傳本地圖片處理各種問題這是最近給公司寫一個(gè)項(xiàng)目，項(xiàng)目要求大概是這樣子上傳手機(jī)本地圖片，然后裁剪后加的需求能夠旋轉(zhuǎn)圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個(gè)相關(guān)的圖片，水印到裁剪的圖片上，上傳服務(wù)器生成 原文還是在簡(jiǎn)書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個(gè)項(xiàng)目，項(xiàng)目要求大概是這樣子：1.上傳手機(jī)本地圖片，然后裁剪（后加的需...
摘要：上傳的文件經(jīng)過就可以實(shí)現(xiàn)預(yù)覽圖片了，這方面不清楚的可以查看進(jìn)階系列文件上傳下載旋轉(zhuǎn)旋轉(zhuǎn)需要用到的方法。 前言 在手機(jī)上通過網(wǎng)頁 input 標(biāo)簽拍照上傳圖片，有一些手機(jī)會(huì)出現(xiàn)圖片旋轉(zhuǎn)了90度d的問題，包括 iPhone 和個(gè)別三星手機(jī)。這些手機(jī)豎著拍的時(shí)候才會(huì)出現(xiàn)這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機(jī)拍照角度來對(duì)照片進(jìn)行旋轉(zhuǎn)，從而解決這個(gè)問題。 Orientatio...
閱讀 1868·2023-04-25 14:28
閱讀 1904·2021-11-19 09:40
閱讀 2807·2021-11-17 09:33
閱讀 1393·2021-11-02 14:48
閱讀 1723·2019-08-29 16:36
閱讀 3343·2019-08-29 16:09
閱讀 2927·2019-08-29 14:17
閱讀 2390·2019-08-29 14:07
