ios html5 拍照上傳 照片調整90度 為什么上傳之后 又返回來了

它的主要功能就是上傳兩張人像，通過算法進行分析對比，最后得出一個相似度的分數(shù)，以驗證你們是天造地設還是顏值互補。

創(chuàng)新互聯(lián)專注于網站建設，為客戶提供網站制作、做網站、網頁設計開發(fā)服務，多年建網站服務經驗，各類網站都可以開發(fā)，品牌網站設計，公司官網，公司展示網站，網站設計，建網站費用，建網站多少錢，價格優(yōu)惠，收費合理。

但是，當我們把上傳的圖片轉換成base64格式，發(fā)送給后臺時，會發(fā)現(xiàn)偶爾會出現(xiàn)問題，有一些圖片本來是這樣的：

柴犬

處理之后卻變成了這樣：

柴犬2

經過測試發(fā)現(xiàn)，只有iOS手機豎著拍的照片才會出現(xiàn)這樣的問題，而iOS手機橫著拍的照片、Android手機拍的照片以及通過屏幕截圖、網絡下載等途徑獲得的圖片都不會產生這個問題。

那么，這到底是為什么呢？

在開發(fā)過程中，由于時間緊迫，未求甚解，使用了github上的一個開源項目 lrz.js 來解決此問題，這個工具的主要用途是在盡量保證圖片質量的前提下壓縮圖片的大小，但同時也附帶了圖片旋轉角度糾正的功能。

通過閱讀 lrz.js 的源代碼，我發(fā)現(xiàn)它引入了一個叫做 exif.js 的庫來實現(xiàn)旋轉角度的糾正，它提供了js讀取圖像的原始數(shù)據(jù)的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數(shù)據(jù)。而拍照方向就是關鍵所在！

exif.js 獲取圖像的拍照方向的代碼如下：

EXIF.getData(IMG_FILE, function () { // IMG_FILE為圖像數(shù)據(jù)

var orientation = EXIF.getTag(this, "Orientation");

console.log("Orientation:" + orientation); // 拍照方向

});

獲取拍照方向的結果為1-8的數(shù)字：

拍照方向信息

注意：對于上面的八種方向中，加了*的并不常見，因為它們代表的是鏡像方向，如果不做任何的處理，不管相機以任何角度拍攝，都無法出現(xiàn)鏡像的情況。

這個表格代表什么意義？我們來看第一行，值為1時，右邊兩列的值分別為：Row #0 is Top，Column #0 is Left side，其實很好理解，它表示照片的第一行位于頂端，而第一列位于左側，那么這張照片自然就是以正常角度拍攝的。

而這8種結果，就是第一行與第一列所在的位置的8種組合。

那么，我們來測試一下iOS手機橫著拍的照片，來看看它的拍照方向是什么呢？

測試1

結果是1，即以正常角度拍攝的，其實也就是原圖啦~

那么，我們再測試一下iOS手機豎著拍的照片，來看看它的拍照方向是什么呢？

測試2

原來是6！即第一行位于右側，第一列位于頂端，其實相當于將照片順時針旋轉了90度！

所以，實際上iOS手機豎著拍出的照片與橫著拍出的照片其本質上是一樣的，只不過豎著拍出的照片被添加了一個順時針旋轉90°的拍照方向，所以顯示的時候，就變成了上下邊窄左右邊寬的狀態(tài)，其實也就是橫著拍的照片順時針旋轉90°而成的~

那么明白了這些，文章開頭所說的照片旋轉bug的原因，也就很簡單啦~

其實就是當我們在前端對圖片進行像素處理或者drawInRect等操作之后，照片的Orientaion信息，即為拍照方向信息被刪除了，所以iOS手機豎著拍的照片又回到了橫著的狀態(tài)，看起來也就是逆時針旋轉了90°！

那么如何糾正這個旋轉角度呢？

其實思路也很簡單：在處理圖片之前，先讀取并保存圖片的拍照方向信息，然后在處理圖片之后，再根據(jù)拍照方向，對圖片進行相應的調整，lrz.js 中的代碼如下：

switch (orientation) {

case 3:

ctx.rotate(180 * Math.PI / 180);

ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);

break;

case 6:

ctx.rotate(90 * Math.PI / 180);

ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);

break;

case 8:

ctx.rotate(270 * Math.PI / 180);

ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);

break;

case 2:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.drawImage(img, 0, 0, resize.width, resize.height);

break;

case 4:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(180 * Math.PI / 180);

ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);

break;

case 5:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(90 * Math.PI / 180);

ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);

break;

case 7:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(270 * Math.PI / 180);

ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);

break;

default:

ctx.drawImage(img, 0, 0, resize.width,resize.height);

}

其中，translate是平移變換，scale(-1,1)是向左翻轉，rotate是順時針旋轉。

舉例說明 case 2，當圖片的拍照方向為2時，即第一行位于頂端，而第一列位于右側，其實相當于把照片進行了左右的翻轉。所以，這里對圖片的操作是，先向右平移等于圖片寬度的距離，再向左翻轉，這相當于以圖片水平方向的對稱軸為軸進行了左右翻轉，然后再以（0，0）為起始點繪制原寬高的圖片，即完成了對拍照方向的糾正。

最后

經過一系列的測試，發(fā)現(xiàn)確實只有iOS手機的豎拍照片與橫拍照片是通過拍照方向來區(qū)別的，Android手機無論豎拍還是橫拍的照片，拍照方向都為1，也就是說即使丟失了拍照方向這一信息，也不會影響到圖片的旋轉角度。而手機或電腦的屏幕截圖、網絡上的圖片、通過PS制作的圖片等也是如此。

作者：任無名F

鏈接：

來源：簡書

著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

HTML5實現(xiàn)圖片拖動，旋轉，放大，拉伸等特效后保存效果

可以設置cookie（可以加載一個cookie.min.js，使用起來非常方便）。就是當?shù)谝淮芜M入頁面的時候，先去讀取該cookie，如果存在，說明之前已經做了更改，把cookie值稍作處理就可以完成初始化了（記得當初始化完成后刪除該cookie），如果cookie不存在說明還沒有做過更改。

html5怎樣做出圖片轉圈的動畫效果

可以使用css3中的rotate實現(xiàn)

實際的旋轉效果是這樣：

rotate中的 60deg 表示按最原始的位置，順時針旋轉60°

w3school 里面有更詳細用法，可以2D旋轉、3D旋轉

可以參考：網頁鏈接

動畫效果可以通過js改變rotate中傳入的值來實現(xiàn)

網頁設計中怎么實現(xiàn)圖片旋轉

css3 的transform屬性允許我們旋轉、縮放和移動元素。 可以通過給它傳遞一個 rotate(度數(shù)) 值來旋轉一個元素，正值表示順時針方向旋轉，負值表示逆時針方向旋轉，旋轉的中心點為元素的中心。

CSS代碼如下：

.rotate{

-ms-transform:rotate(90deg); /* IE 9 */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari and Chrome */

-o-transform:rotate(90deg); /* Opera */

}

瀏覽器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

HTML5中，如何控制canvas旋轉圖片？

要控制canvas旋轉圖片需要用到HTML5中canvas的rotate方法。我們通過一個具體的示例進行分析。

!DOCTYPE html

html

head

meta charset="utf-8"

title圖片旋轉/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的瀏覽器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//1、 獲取到畫布對象以及畫布的上下文對象

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

//2、 在畫布上進行圖片繪制

var img = new Image();

img.src = 'fist-pump-baby.jpg';//這里是繪制圖片的路徑

img.onload = function() {

context.drawImage(img, 0, 0);

}

//3、 設置畫布旋轉

context.rotate(0.2);//通過rotate方法以弧度為參數(shù)旋轉圖像

//在rotate中傳入的參數(shù)為弧度。如果你對弧度不太了解，在HTML5中還提供了一個函數(shù)degreeToRadians（）。它可以將度數(shù)轉換為弧度。這里傳入-15，即表示將圖像向左旋轉15度。如需把旋轉的角度轉換為弧度的公式為：( 度數(shù)*PI )/ 180。這兩種傳入弧度的方法你選擇一種即可。

//context.rotate(degreesToRadians(-15));

}

/script

script src="jquery.js"/script

/body

/html

這些都是有關于HTML5新特性的一些應用。給你推薦一個教程網站秒秒學，該網站上有關于HTML5新特性的講解，可以去看看，希望對你有幫助。

html怎樣讓圖片的旋轉？

css代碼：

.rotator

{

text-align:center;

}

.rotator img {

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

}

.rotator img:hover {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

/*360deg是360度，度你可以自己寫*/

本文題目：html5圖片翻轉,html 圖片翻轉
標題網址：http://jinyejixie.com/article18/dsdgpdp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、營銷型網站建設、App開發(fā)、做網站、微信公眾號、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)