Exif.js圖片旋轉修正的方法
更新時間：2022年02月23日 15:21:09 作者：風神修羅使
這篇文章主要為大家詳細介紹了Exif.js圖片旋轉修正的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Exif.js圖片旋轉修正的具體方法，供大家參考，具體內(nèi)容如下
上傳后圖片旋轉修正
測試流程
上傳 -> base64展示 -> 獲取旋轉值 -> 修正 -> 修正后展示 -> 轉換blob和file文件供其他功能調(diào)用
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name='viewport' content='width=device-width,initial-scale=1.0'>
? ? <title>測試圖片旋轉</title>
</head>
<body>
<input type="file" id="test" onchange="upload(event)">
<hr>
圖片展示：
<img src="" id="img">
<hr>
旋轉值：
<div id="rotateval"></div>
<hr>
canvas（旋轉修正后）:
<canvas id="canvas" width="100%" height="80%"></canvas>
<script src="exif.js"></script>
<script>
? ? function upload(e) {
? ? ? ? var file = e.target.files;
? ? ? ? var reader = new FileReader();
? ? ? ? reader.onload = function(e) {
? ? ? ? ? ? var res = reader.result;
? ? ? ? ? ? document.getElementById("img").setAttribute('src', res);
? ? ? ? ? ? EXIF.getData(file[0],
? ? ? ? ? ? ? ? function() {
? ? ? ? ? ? ? ? ? ? var Orientation = EXIF.getTag(this, 'Orientation');
? ? ? ? ? ? ? ? ? ? document.getElementById('rotateval').innerHTML = Orientation;
? ? ? ? ? ? ? ? ? ? if (Orientation) {
? ? ? ? ? ? ? ? ? ? ? ? var image = new Image();
? ? ? ? ? ? ? ? ? ? ? ? image.src = res;
? ? ? ? ? ? ? ? ? ? ? ? image.onload = function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? var expectWidth = this.naturalWidth;
? ? ? ? ? ? ? ? ? ? ? ? ? ? var expectHeight = this.naturalHeight;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expectWidth = 800;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
? ? ? ? ? ? ? ? ? ? ? ? ? ? } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expectHeight = 1200;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? var canvas = document.getElementById("canvas");
? ? ? ? ? ? ? ? ? ? ? ? ? ? var ctx = canvas.getContext("2d");
? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.width = "800px"; //expectWidth;
? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.height = expectHeight;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
? ? ? ? ? ? ? ? ? ? ? ? ? ? switch (Orientation) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 6: //需要順時針（向左）90度旋轉
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rotateImg(this, 'left', canvas);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 8: //需要逆時針（向右）90度旋轉
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rotateImg(this, 'right', canvas);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? case 3: //需要180度旋轉
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rotateImg(this, 'right', canvas); //轉兩次
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rotateImg(this, 'right', canvas);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? function rotateImg(img, direction, canvas) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //alert(img);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //最小與最大旋轉方向，圖片旋轉4次后回到原方向
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var min_step = 0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var max_step = 3;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //var img = document.getElementById(pid);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (img == null) return;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //img的高度和寬度不能在img元素隱藏后獲取，否則會出錯
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var height = img.height;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var width = img.width;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //var step = img.getAttribute('step');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var step = 2;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (step == null) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? step = min_step;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (direction == 'right') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? step++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //旋轉到原位置，即超過最大值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? step > max_step && (step = min_step);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? step--;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? step < min_step && (step = max_step);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //旋轉角度以弧度值為參數(shù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var degree = step * 90 * Math.PI / 180;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var ctx = canvas.getContext('2d');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? switch (step) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.width = width;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.height = height;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.drawImage(img, 0, 0);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.width = height;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.height = width;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.rotate(degree);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.drawImage(img, 0, -height);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.width = width;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.height = height;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.rotate(degree);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.drawImage(img, -width, -height);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.width = height;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? canvas.height = width;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.rotate(degree);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ctx.drawImage(img, -width, 0);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? uploadfile(canvas);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? }
? ? ? ? reader.readAsDataURL(file[0]);
? ? }
? ? function uploadfile(canvas) {
? ? ? ? let src = canvas.toDataURL("image/png"); //這里轉成的是base64的地址，直接用到img標簽的src是可以顯示圖片的
? ? ? ? //轉成Blob對象
? ? ? ? function dataURItoBlob(dataURI) { //圖片轉成Buffer
? ? ? ? ? ? //atob() 方法用于解碼使用 base-64 編碼的字符串。
? ? ? ? ? ? //base-64 編碼使用方法是 btoa() 。
? ? ? ? ? ? var byteString = atob(dataURI.split(',')[1]);
? ? ? ? ? ? var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
? ? ? ? ? ? var ab = new ArrayBuffer(byteString.length);
? ? ? ? ? ? var ia = new Uint8Array(ab);
? ? ? ? ? ? for (var i = 0; i < byteString.length; i++) {
? ? ? ? ? ? ? ? ia[i] = byteString.charCodeAt(i);
? ? ? ? ? ? }
? ? ? ? ? ? return new Blob([ab], { type: mimeString });
? ? ? ? }
? ? ? ? var blob = dataURItoBlob(src);
? ? ? ? console.log('二進制對象：');
? ? ? ? console.log(blob);
? ? ? ? //轉成File對象
? ? ? ? function dataURLtoFile(dataurl, filename) {
? ? ? ? ? ? var arr = dataurl.split(','),
? ? ? ? ? ? ? ? mime = arr[0].match(/:(.*?);/)[1],
? ? ? ? ? ? ? ? bstr = atob(arr[1]),
? ? ? ? ? ? ? ? n = bstr.length,
? ? ? ? ? ? ? ? u8arr = new Uint8Array(n);
? ? ? ? ? ? while (n--) {
? ? ? ? ? ? ? ? u8arr[n] = bstr.charCodeAt(n);
? ? ? ? ? ? }
? ? ? ? ? ? return new File([u8arr], filename, { type: mime });
? ? ? ? }
? ? ? ? var file_b = dataURLtoFile(src, 'test.png');
? ? ? ? var formData = new FormData();
? ? ? ? var columnName = 'img';
? ? ? ? formData.append(columnName, file_b);
? ? ? ? formData.append("filetype", file_b.type);
? ? ? ? console.log('文件對象：');
? ? ? ? console.log(file_b);
? ? }
</script>
</body>
</html>解決圖片自動旋轉問題
exif.js
用于從圖像文件中讀取EXIF元數(shù)據(jù)的JavaScript庫。
您可以在瀏覽器中的圖像上使用它，從圖像或文件輸入元素。
檢索EXIF和IPTC元數(shù)據(jù)。這個包也可以在AMD或CommonJS環(huán)境中使用。
注意:EXIF標準僅適用于.jpg和.tiff圖像。
這個包中的EXIF邏輯基于EXIF標準v2.2 (JEITA CP-3451，包含在這個repo中)。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <script src="./jquery-1.7.2.min.js"></script>
? ? <script src="./exif.min.js"></script>
</head>
<body>
<img src="1.jpg" id="J-logo"/>
<script type="text/javascript">
? ? var getor = function() {
? ? ? ? EXIF.getData(document.getElementById("J-logo"),
? ? ? ? ? ? function() {
? ? ? ? ? ? ? ? var aaa = EXIF.getAllTags(this);
? ? ? ? ? ? ? ? var orp = EXIF.getTag(this, 'Orientation');
? ? ? ? ? ? ? ? if (orp == 1) {
? ? ? ? ? ? ? ? ? ? $("#J-logo").css("transform", "rotate(0deg)");
? ? ? ? ? ? ? ? } else if (orp == 3) {
? ? ? ? ? ? ? ? ? ? $("#J-logo").css("transform", "rotate(180deg)");
? ? ? ? ? ? ? ? } else if (orp == 6) {
? ? ? ? ? ? ? ? ? ? $("#J-logo").css("transform", "rotate(90deg)");
? ? ? ? ? ? ? ? } else if (orp == 8) {
? ? ? ? ? ? ? ? ? ? $("#J-logo").css("transform", "rotate(270deg)");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? }
? ? setTimeout('getor()', 1);
</script>
</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實例代碼，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
彈出層效果是一個很實用的功能，很多網(wǎng)站都采用了這種方式實現(xiàn)登錄和注冊，下面小編通過本文給大家分享具體實現(xiàn)代碼，對js彈出頁面效果相關知識感興趣的朋友一起學習吧2016-01-01
JAVA Web實時消息后臺服務器推送技術---GoEasy
本篇文章主要介紹了PHP實現(xiàn)Web實時消息后臺服務器推送技術，這里整理了詳細的代碼,有需要的小伙伴可以參考下。2016-11-11
在uniapp中,云打包以后會自動增加一個電話權限,并且在manifest.json里面也沒有添加這個權限,怎么添加都添加不上,下面小編給大家分享在uniapp中如何去掉一些不想要的權限,感興趣的朋友跟隨小編一起看看吧2024-03-03
本文通過實例代碼給大家分享了基于js+jquery實現(xiàn)的注冊信息驗證功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
JavaScript數(shù)組方法之findIndex()的用法詳解
findIndex()方法是一個非常實用的數(shù)組方法,可以幫助我們快速查找符合某個條件的元素,本文給大家介紹JavaScript數(shù)組方法之findIndex()的用法,感謝的朋友跟隨小編一起看看吧2023-10-10
postman自定義函數(shù)實現(xiàn) 時間函數(shù)的思路詳解
Postman是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁HTTP請求的Chrome插件。這篇文章主要給大家介紹postman自定義函數(shù)實現(xiàn) 時間函數(shù)的思路詳解，感興趣的朋友一起看看吧2019-04-04
javascript使用正則表達式實現(xiàn)注冊登入校驗
這篇文章主要為大家詳細介紹了javascript使用正則表達式實現(xiàn)注冊登入校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
類的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類比大多數(shù)人意識到的更強大,它是構建真正的mixins的良好基礎，本文介紹JavaScript中的Mixin介紹的非常詳細，需要的小伙伴可以參考閱讀一下2023-04-04
微信小程序實現(xiàn)3D輪播圖效果（非swiper組件）
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)3D輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09