圖片自動旋轉的前端實現方案
提醒:本文最後更新於 2522 天前,文中所描述的資訊可能已發生改變,請謹慎使用。
隨著智慧手機的普及,大家已經習慣隨手拍點照片傳網上了。有時候傳上去的照片方向會不對,甚至還有腦袋朝下的情況。為此,各大微博不約而同的給照片增加左右旋轉的功能。這樣能解決問題,但我們是否能更進一步,自動選擇正確的照片方向呢?剛好最近我們有類似的場景,本文就討論下這個問題。
實際上,數碼裝置拍攝照片時,會把許多屬性附加在照片檔案裡,這些屬性構成了大家常說的 Exif 資訊。訪問我的相簿會發現照片下也有對應的 Exif 資訊。Exif 中有個 Orientation 欄位,用來存放照片方向,這就是我們需要的,看下它的定義:
EXIF Orientation Value | Row #0 is: | Column #0 is: |
---|---|---|
1 | Top | Left side |
2 | Top | Right side |
3 | Bottom | Right side |
4 | Bottom | Left side |
5 | Left side | Top |
6 | Right side | Top |
7 | Right side | Bottom |
8 | Left side | Bottom |
NOTE: Values with "*" are uncommon since they represent "flipped" orientations. via
當然,Exif 中的 Orientation 屬性,取決於拍照的裝置是否擁有方向感測器。不過根據我的瞭解,目前大部分數碼拍照裝置都支援記錄方向。1 是預設值,2、4、5、7 表示照片進行了翻轉。一般情況下,取值應該是 1、3、6、8 中的一種。下面有張更形象的圖描述了具體的旋轉策略:
如何從圖片中獲取 Exif 資訊,各個語言都有封裝好的程式碼可以直接使用。Javascript 也不例外,國外某同學 08 年就釋出了可用程式碼。他的做法分為兩步,首先通過 Ajax 獲取原始二進位制,這在 firefox 和 webkit 比較好辦,在 IE 下需要藉助 VBScript 的幫忙;第二步是從原始資料不同位置獲取相關資訊,基本是體力活了。想深入瞭解的同學可以點本段幾個連結圍觀下。
從圖片 Exif 資訊中取到 Orientation 後,就可以根據它來自動旋轉圖片了,canvas、filter 濾鏡、vml、css3 都可以實現圖片的旋轉。網上也有很多封裝好的程式碼可以直接拿過來用。
綜合上文,我寫了一個 demo,除了 Opera,相容大部分其它瀏覽器(在 Opera11.6 下測試過,也是 OK 的)。
另外,如果用 FileReader Api 獲取圖片的原始二進位制,就可以在瀏覽器本地實現圖片自動旋轉。這在圖片上傳前預覽時比較有用,這裡有 demo。
PS:其實,大部分的圖片檢視客戶端早已支援自動旋轉,所以一般情況下數碼裝置拍的照片用電腦看,方向都是正確的。許多縮圖生成程式,也是可以指定縮放前自動旋轉的(例如 ImageMagick 的 -auto-orient 引數)。
再 PS:純前端獲取圖片 Exif,只是一種嘗試。如果需要頻繁使用 Exif 資訊,還是後端獲取完,存在資料庫比較靠譜。
參考:
--EOF--
提醒:本文最後更新於 2522 天前,文中所描述的資訊可能已發生改變,請謹慎使用。
相關推薦
圖片自動旋轉的前端實現方案
提醒:本文最後更新於 2522 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 隨著智慧手機的普及,大家已經習慣隨手拍點照片傳網上了。有時候傳上去的照片方向會不對,甚至還有腦袋朝下的情況。為此,各大微博不約而同的給照片增加左右旋轉的功能。這樣能解決問題,但我們是否能更進一步,自動選擇正確的照片方
前端把圖片轉為base64,解決手機上傳圖片自動旋轉的問題
使用這個首先要下載exif.js。jsp頁面引用這個js,下載連結:https://link.jianshu.com?t=http://code.ciaoca.com/javascript/exif-js/jsp部分:上傳圖片:<input type="file" ac
圖片上傳前端實現
multipart splice ons chang console resp 前端 返回 res 基於bootstrap實現圖片上傳,具體代碼實現如下 <form id="poster_form" class="form-horizontal" method="p
iOS開發技巧之:相機獲取到的圖片自動旋轉90度解決辦法
本文轉載自這裡:http://blog.csdn.net/hitwhylz/article/details/39518463 今天寫demo的時候發現, 如果把通過相機獲取到的圖片,直接進行操作, 比如裁剪, 縮放, 則會把原圖片向又旋轉90度。 剛開始覺得莫名其妙, 不知所措。 後來百度了
iOS開發- 相機 攝像頭 獲取到的圖片自動旋轉90度解決辦法
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
IOS 圖片自動旋轉
+ (UIImageView *)rotate360DegreeWithImageView:(UIImageView *)imageView{ CABasicAnimation *animation = [ CABasicAnimation
image-orientation: 讓圖片自動旋轉
提醒:本文最後更新於 1944 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 晚上 ao 大哥發過來一個連結,是關於 firefox 開始支援「image-orientation」這個 css 屬性的,我用最新的 Firefox Nightly 26.0a1 做了一些測試。 我在一年半前寫過一
iOS照相機獲取到的圖片自動旋轉90度解決辦法
情景再現: iOS開發過程中,要實現用用手機攝像頭拍一張照片,經過裁剪壓縮,然後發出去。結果發出去的圖片始終是逆時針旋轉了90度的圖片。 事出有因: 相機拍照後直接取出來的UIimage(用UIImagePickerControllerOriginalIma
iOS拍照之後圖片自動旋轉90度解決辦法
今天開發一個拍照獲取照片的功能的時候, 發現上傳之後圖片會自動旋轉90. 測試發現, 只要是圖片大於2M, 系統就會自動翻轉照片 相機拍照後直接取出來的UIimage(用UIImagePickerControllerOriginalImage取出),它本身的im
Android三星手機拍照自動旋轉問題解決方案
Android 三星手機拍照,從相簿選擇照片旋轉問題完美解決 好久沒有寫部落格了,最近解決了一個令我頭疼好久的問題,就是三星手機拍照圖片旋轉的問題,專案中有上傳圖片的功能,那麼涉及到拍照,從相簿中選擇圖片,別的手機都ok沒有問題,唯獨三星的手機拍照之後,你會很清楚的看
基於D3.js的資料視覺化前端實現方案
近幾年隨著大資料逐漸火熱,資料視覺化也就顯得格外重要,Ben Fry在他的著作《Visualiziing Data》中將資料視覺化的過程分為七個步驟: 獲取 分析 過濾 挖掘 表現 改善 互動 前面4步分別屬於資料採集、資料分析、資料處理和資料探勘領域,
【前端解決方案】input file 上傳圖片,並實現實時預覽
前言 我最近在做自己個人部落格的時候,遇到一個前端的問題,就是如何實時預覽 input 標籤上傳的圖片。一般的 <input type="file’ /> 標籤是不能實現實時預覽的。 解決方案 可以通過 file 標籤和 js 的 FileReader 介面來實
C# 提取PPT文本和圖片的實現方案
提取 sam tor sha spa pict color edi {0} 在圖文混排的文檔中,我們可以根據需要將文檔中的文字信息或者圖片提取出來,通過C#代碼可以提取Word和PDF文件中的文本和圖片,那麽同樣的,我們也可以提取PPT幻燈片當中的文本和圖片。本篇文檔將講述
前端實現input[type='file']上傳圖片預覽效果
query selector indexof 圖片加載 code lock 復用 lec 應用 眾所周知JavaScript在設計上處於安全角度考慮,是不允許讀寫本地文件的(原因請自行百度); 但是在實際項目應用中,經常會使用到上傳圖片,並且可以讓用戶直接預覽圖片。對於此種
【Thumbnailator】java 使用Thumbnailator實現等比例縮放圖片,旋轉圖片等【轉載】
strong class chm eight load angle true api ins Thumbnailator概述: Thumbnailator是與Java界面流暢的縮略圖生成庫。它簡化了通過提供一個API允許精細的縮略圖生成調整生產從現有的圖
Tengine+Lua+GraphicsMagick實現圖片自動伸縮功能(ubuntu)
Tengine+Lua+GraphicsMagick實現圖片自動伸縮功能(ubuntu) 個人分類: 學習 配置環境 支援軟體 apt-get install libreadline-dev apt-get install
前端實現手機相簿或照相預覽圖片及壓縮圖片的方法
總體思路是: 1、FileReader.readAsDataURL將上傳的圖片檔案轉為Base64格式 2、將img繪製到canvas上,canvas.toDataURL壓縮圖片 3、new Blob將壓縮後的Base64轉為Blob格式 4、FormData.append將圖片檔案資料存入formdata
JS實現圖片自動滾動(圖片橫向滾動)
實現的效果就是 一排圖片自動橫向滾動,滑鼠指向的時候,暫定滾動,滑鼠離開,繼續滾動 首先看下html程式碼:隨便加入四張圖片 <div id="div1"> <ul> <li><img src="img/logo-black.png"
android之ImageButton實現選中改變背景,外加(圖片自動適配元件大小)
android之ImageButton實現選中改變背景,附加(圖片自動適配元件大小) 下面是程式碼 <ImageButton android:id="@+id/jmxw" android:layout_width="fill_parent" android:layout_ma
純前端實現base64圖片下載,相容IE10+
背景 在專案開發過程中,經常會有圖片匯出的需求,尤其是帶有圖表類的應用,通常需要將圖表下載匯出。在chrome等新版瀏覽器中實現base64圖片的下載還是比較容易的: 建立一個a標籤 將a標籤的href屬性賦值為圖片的base64編碼 指定a標籤的download