溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Exif.js圖片旋轉怎么修正”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Exif.js圖片旋轉怎么修正”文章能幫助大家解決問題。
測試流程
上傳 -> base64展示 -> 獲取旋轉值 -> 修正 -> 修正后展示 -> 轉換blob和file文件供其他功能調用
<!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);
}
//旋轉角度以弧度值為參數
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元數據的JavaScript庫。
您可以在瀏覽器中的圖像上使用它，從圖像或文件輸入元素。
檢索EXIF和IPTC元數據。這個包也可以在AMD或CommonJS環境中使用。
注意: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>關于“Exif.js圖片旋轉怎么修正”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
