資訊專欄INFORMATION COLUMN
摘要：使用自動修正數(shù)碼照片使用場景，在做朋友圈時，時常遇到需要用戶拍照上傳圖片需求，但是在一些手機上拍出來的照片會出現(xiàn)奇怪的旋轉(zhuǎn)角度來呈現(xiàn)。
使用Canvas + exif-js自動修正數(shù)碼照片
使用場景，在做朋友圈 H5 時，時常遇到需要用戶拍照上傳圖片需求，但是在一些手機（iso）上拍出來的照片會出現(xiàn)奇怪的旋轉(zhuǎn)角度來呈現(xiàn)。經(jīng)過各種百度才發(fā)現(xiàn)相機拍出來的圖片擁有很多屬性，其中一項是Orientation ，用于記錄拍攝時相機物理旋轉(zhuǎn)角度，例如把相機倒過來Orientation 是3，順時針豎起來Orientation 是6，逆時針豎起來Orientation 是8，正常模式Orientation 是1。根據(jù)這個屬性我們可以使用Canvas來對圖片重繪。
Orientation 示意圖 Show Code
import EXIF from "exif-js"; // 引入依賴插件
// 參數(shù)列表：img 對象，callback返回Base64圖片編碼，生成圖片質(zhì)量默認值0.9
export const FixImg = (img, callback, quality = 0.9) => {
let Orientation, ctxWidth, ctxHeight, base64; // 定義所需變量
EXIF.getData(img, function() {
Orientation = EXIF.getTag(this, "Orientation");
ctxWidth = this.naturalWidth;
ctxHeight = this.naturalHeight;
console.log(Orientation, ctxWidth, ctxHeight);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = ctxWidth;
canvas.height = ctxHeight;
if ([5, 6, 7, 8].includes(Orientation)) {
canvas.width = ctxHeight;
canvas.height = ctxWidth;
}
switch (Orientation) {
case 2:
ctx.transform(-1, 0, 0, 1, ctxWidth, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, ctxWidth, ctxHeight);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, ctxHeight);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, ctxHeight, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, ctxHeight, ctxWidth);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, ctxWidth);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
}
ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight);
// 默認輸出jpeg,也可以讀取原圖片格式，最后輸出原圖格式，搜索關鍵詞 ：File.type
base64 = canvas.toDataURL("image/jpeg", quality);
callback(base64);
});
};
性感照騙，在線修復： http://peichenhu.cn/demo/awesome/#/Exif
相關補充：從圖片 Exif 信息中取到 Orientation 后，就可以根據(jù)它來自動旋轉(zhuǎn)圖片了，canvas、filter 濾鏡、vml、css3 都可以實現(xiàn)圖片的旋轉(zhuǎn)。
參考文章：https://imququ.com/post/how-t...
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107965.html
摘要：有些時候在端上傳圖片會遇到這種情況，正向的圖片，上傳預覽時就被旋轉(zhuǎn)了。在使用或者其他軟件旋轉(zhuǎn)圖片時，圖片旋轉(zhuǎn)了，但不會改變，由于我們使用的圖片預覽器能夠預處理圖片，使其看起來與旋轉(zhuǎn)后一致，但上傳圖片時，瀏覽器并不會預處理。 有些時候在web端上傳圖片會遇到這種情況，正向的圖片，上傳預覽時就被旋轉(zhuǎn)了。 showImg(https://segmentfault.com/img/bVbhxd...
摘要：下上傳圖片被旋轉(zhuǎn)解決方法用既然是解決問題，那就簡單說一下，直接上代碼方式使用在上可以直接調(diào)用照相機拍照，豎拍出來的圖片都會變成橫圖思路獲取到照片拍攝的方向角，對非橫拍的照片使用的進行角度旋轉(zhuǎn)修正。 iOS下html上傳圖片被旋轉(zhuǎn) 解決方法用exif.js+canvas既然是解決問題，那就簡單說一下，直接上代碼！ html方式使用在iOS上可以直接調(diào)用照相機拍照，豎拍出來的圖片都會變成橫...
摘要：上傳的文件經(jīng)過就可以實現(xiàn)預覽圖片了，這方面不清楚的可以查看進階系列文件上傳下載旋轉(zhuǎn)旋轉(zhuǎn)需要用到的方法。 前言 在手機上通過網(wǎng)頁 input 標簽拍照上傳圖片，有一些手機會出現(xiàn)圖片旋轉(zhuǎn)了90度d的問題，包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現(xiàn)這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機拍照角度來對照片進行旋轉(zhuǎn)，從而解決這個問題。 Orientatio...
閱讀 851·2021-11-18 10:07
閱讀 2363·2021-10-14 09:42
閱讀 5360·2021-09-22 15:45
閱讀 597·2021-09-03 10:29
閱讀 3476·2021-08-31 14:28
閱讀 1885·2019-08-30 15:56
閱讀 3048·2019-08-30 15:54
閱讀 1003·2019-08-29 11:32
