exiforientationjs

『壹』 關於手機拍照後上傳，上傳角度旋轉問題總結

iphone默認正平拍照為正確的方向，豎屏拍照會攜帶逆時針旋轉90的信息，也就是Orientation (rotation)

可參考下圖理解

資料： http://www.cocoachina.com/ios/20150605/12021.html

        https://www.jianshu.com/p/ad4501db178e/

解決思路：

引入了一個叫做  exif.js  的吵敬檔庫來實現旋轉角度的糾正，它提供了js讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。

解決方法：

1.在保存圖片至伺服器之前讀取圖升亂片的拍照方向信息，根據旋轉角度做稿拿處理，將處理後的圖片上傳至伺服器，顯示

優點：預覽的圖片和大後台審核的圖片一致

缺點:據開發說比較難處理

2.將圖片上傳至伺服器，前端讀取圖片信息，在展示前做旋轉角度處理，顯示

優點：能快速解決當前出現的問題

缺點：大後台審核的小夥伴審核時看圖比較難受

Andriod的情況就比較復雜了，就我們公司現有的機型來看，得出以下結論，垂直角度拍攝上傳，顯示正常

唯一一個 有問題的是三星手機參考資料 https://www.jianshu.com/p/01d0fd4b4bfe ，跟ios問題一樣

資料： https://www.jianshu.com/p/7d88ec1347b6

『貳』 微信公眾平台本地上傳的圖片為何原圖豎的，上傳上來就變橫的了，也不能旋轉。

您好！很高興能為您解答， 微信公眾號圖文編輯對話框不支持進行圖標旋轉編輯，要先處理好圖片再上傳到微信素材庫里邊。圖片太大就不行，改小了就好了。最好在4M以內。
工具：圖片處理軟體
1，在圖片上傳之前在圖片處理軟體里邊把圖片進行旋轉後保存，

2，然後進行保存後上傳到微信公眾號素材庫飢迅。

3，然後再進行插入到圖文素材爛瞎此神槐里邊就是剛剛保存的樣子了，

『叄』 js 大文件分片上傳處理如何實現

推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,PHP示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。

『肆』 JS 如何獲取和監聽屏幕方向的改變

大概寫一下：

方法一：用觸發手機的橫屏和豎屏之間的切換的事件

代碼如下：

window.addEventListener("orientationchange", function() {

// 宣布新方向的數值

alert(window.orientation);

}, false);

方法二：監聽調整大小的改變

代碼如下:

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (內部/外部寬度，內部/外部高度)

}, false);

css判斷橫豎屏幕

代碼如下:

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處於直立或水平視角：

代碼如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，則我們處於垂直視角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一個媒體查詢改變監聽者

mql.addListener(function(m) {

if(m.matches) {

// 改變到直立方向

document.getElementById("test").innerHTML="改變到直立方向";

}

else {

document.getElementById("test").innerHTML="改變到水平方向";

// 改變到水平方向

}

});

『伍』 ios html5 拍照上傳 照片調整90度 為什麼上傳之後 又返回來了

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

但是，當我們把上傳的圖片轉換成base64格式，發送給後台時，會發現偶爾會出現問題，有一些圖片本來是這樣的：

柴犬

處理之後卻變成了這樣：

柴犬2

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

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

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

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

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

EXIF.getData(IMG_FILE, function () { // IMG_FILE為圖像數據
var orientation = EXIF.getTag(this, "Orientation");
console.log("Orientation:" + orientation); // 拍照方向
});

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

拍照方向信息

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

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

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

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

測試1

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

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

測試2

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

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

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

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

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

其實思路也很簡單：在處理圖片之前，先讀取並保存圖片的拍照方向信息，然後在處理圖片之後，再根據拍照方向，對圖片進行相應的調整，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）為起始點繪制原寬高的圖片，即完成了對拍照方向的糾正。

最後

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

作者：任無名F
鏈接：http://www.jianshu.com/p/ad4501db178e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

『陸』 前端圖片 js 怎麼判斷相機是橫拍還是豎拍

CSS判斷橫槐灶屏豎屏 寫在同一孝斗個CSS中
@media screen and (orientation: portrait) { /*豎屏巧明磨 css*/ }
@media screen and (orientation: landscape) { /*橫屏 css*/}

『柒』 js如何判斷手機當前狀態是橫屏還是豎屏

判斷是橫屏還是豎屏的方法:
function orient() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone豎屏；Andriod橫屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone橫屏；Andriod豎屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//頁面載入時調用
$(function(){
orient();
});
//用戶變化屏幕方向時調用
$(window).bind( 'orientationchange', function(e){
orient();
});

『捌』 微信公眾平台本地上傳的圖片為何原圖豎的，上傳上來就變橫的了，也不能旋轉。

公眾號裡面圖片不能旋轉，只能剪輯。

微信公眾平台，簡稱公眾號。曾命名為「官號平台」、「媒體平台」、微信公眾號，最終定位為「公眾平台」，無疑讓我們看到一個微信對後續更大的期望。

利用公眾賬號平台進行自媒體活動，簡單來說就是進行一對多的媒體性行為活動，如商家通過申請公眾微信服務號通過二次開發展示商家微官網、微會員、微推送、微支付、微活動、微報名、微分享、微名片等，已經形成了一種主流的線上線下微信互動營銷方式。

2018年1月5日，微信公眾平台公告：規范「非固定收益類投資產品」類信息發布。即日起微信公眾平台將配合微信安全中心的打擊行動，針對相關詐騙、騷擾等違法違規的信息和公眾號進行處理。

「非固定收益類投資產品」指包括但不限於股票、期權、期貨、外匯、大宗商品、電子貨幣等本金或收益存在不確定性的投資產品。

2018年7月19日，微信公眾平台「轉載可贊賞作者」暫時下線。

2019年8月26日，微信公眾平台已經匯聚超2000萬公眾賬號，不少作者通過原創文章和原創視頻形成了自己的品牌，成為了微信里的創業者。

服務號功能：

公眾平台服務號，是公眾平台的一種賬號類型，旨在為用戶提供服務。

1、1個月（自然月）內僅可以發送4條群發消息。

2、發給訂閱用戶（粉絲）的消息，會顯示在對方的聊天列表中，相對應微信的首頁。

3、服務號會在訂閱用戶（粉絲）的通訊錄中。通訊錄中有一個公眾號的文件夾，點開可以查看所有服務號。

4、服務號可申請自定義菜單。