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

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

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

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

柴犬

處理之后卻變成了這樣：

柴犬2

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

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

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

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

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

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

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

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

});

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

拍照方向信息

注意：對于上面的八種方向中，加了*的并不常見，因?yàn)樗鼈兇淼氖晴R像方向，如果不做任何的處理，不管相機(jī)以任何角度拍攝，都無法出現(xiàn)鏡像的情況。

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

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

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

測試1

結(jié)果是1，即以正常角度拍攝的，其實(shí)也就是原圖啦~

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

測試2

原來是6！即第一行位于右側(cè)，第一列位于頂端，其實(shí)相當(dāng)于將照片順時(shí)針旋轉(zhuǎn)了90度！

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

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

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

那么如何糾正這個(gè)旋轉(zhuǎn)角度呢？

其實(shí)思路也很簡單：在處理圖片之前，先讀取并保存圖片的拍照方向信息，然后在處理圖片之后，再根據(jù)拍照方向，對圖片進(jìn)行相應(yīng)的調(diào)整，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)是向左翻轉(zhuǎn)，rotate是順時(shí)針旋轉(zhuǎn)。

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

最后

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

作者：任無名F

鏈接：

來源：簡書

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

HTML5實(shí)現(xiàn)圖片拖動(dòng)，旋轉(zhuǎn)，放大，拉伸等特效后保存效果

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

html5怎樣做出圖片轉(zhuǎn)圈的動(dòng)畫效果

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

實(shí)際的旋轉(zhuǎn)效果是這樣：

rotate中的 60deg 表示按最原始的位置，順時(shí)針旋轉(zhuǎn)60°

w3school 里面有更詳細(xì)用法，可以2D旋轉(zhuǎn)、3D旋轉(zhuǎn)

可以參考：網(wǎng)頁鏈接

動(dòng)畫效果可以通過js改變r(jià)otate中傳入的值來實(shí)現(xiàn)

網(wǎng)頁設(shè)計(jì)中怎么實(shí)現(xiàn)圖片旋轉(zhuǎn)

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

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旋轉(zhuǎn)圖片？

要控制canvas旋轉(zhuǎn)圖片需要用到HTML5中canvas的rotate方法。我們通過一個(gè)具體的示例進(jìn)行分析。

!DOCTYPE html

html

head

meta charset="utf-8"

title圖片旋轉(zhuǎn)/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、 在畫布上進(jìn)行圖片繪制

var img = new Image();

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

img.onload = function() {

context.drawImage(img, 0, 0);

}

//3、 設(shè)置畫布旋轉(zhuǎn)

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

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

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

}

/script

script src="jquery.js"/script

/body

/html

這些都是有關(guān)于HTML5新特性的一些應(yīng)用。給你推薦一個(gè)教程網(wǎng)站秒秒學(xué)，該網(wǎng)站上有關(guān)于HTML5新特性的講解，可以去看看，希望對你有幫助。

html怎樣讓圖片的旋轉(zhuǎn)？

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圖片翻轉(zhuǎn),html 圖片翻轉(zhuǎn)
標(biāo)題網(wǎng)址：http://vcdvsql.cn/article18/dsdgpdp.html

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

廣告

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