Exif.js图片上传旋转修正的问题怎样处理

发布时间：2023-08-05 11:05:18 所属栏目：语言来源：

导读：这篇文章给大家分享的是“Exif.js图片上传旋转修正的问题怎样解决？”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。本文实例为大家分享了Exif.js

这篇文章给大家分享的是“Exif.js图片上传旋转修正的问题怎样解决？”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

本文实例为大家分享了Exif.js图片旋转修正的具体方法，供大家参考，具体内容如下

上传后图片旋转修正

测试流程

上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用

<!DOCTYPE html>

<head>

<title>测试图片旋转</title>

</head>

<body>

<hr>

图片展示：

<hr>

旋转值：

<hr>

canvas（旋转修正后）:

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>

</head>

<body>

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图片上传旋转修正的问题怎样解决？”的内容就介绍到这里了，感谢大家的阅读。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!