The examples in this article share with you the specific method of image rotation correction for your reference. The specific content is as follows
Image rotation correction after upload
Test process
Upload -> base64 display -> Get rotation value -> Fix -> Display after correction -> Convert blob and file files for other functions to call
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<title>Test picture rotation</title>
</head>
<body>
<input type="file" onchange="upload(event)">
<hr>
Image display：
<img src="" >
<hr>
Rotation value：
<div ></div>
<hr>
canvas（After rotation correction）:
<canvas width="100%" height="80%"></canvas>
<script src=""></script>
<script>
function upload(e) {
var file = ;
var reader = new FileReader();
= function(e) {
var res = ;
("img").setAttribute('src', res);
(file[0],
function() {
var Orientation = (this, 'Orientation');
('rotateval').innerHTML = Orientation;
if (Orientation) {
var image = new Image();
= res;
= function() {
var expectWidth = ;
var expectHeight = ;
if ( > && > 800) {
expectWidth = 800;
expectHeight = expectWidth * / ;
} else if ( > && > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * / ;
}
var canvas = ("canvas");
var ctx = ("2d");
= "800px"; //expectWidth;
= expectHeight;
(this, 0, 0, expectWidth, expectHeight);
switch (Orientation) {
case 6: //Clockwise (to the left) 90 degrees need to be rotated clockwise (to the left) rotateImg(this, 'left', canvas);
break;
case 8: // Requires 90 degrees of rotation counterclockwise (to the right) rotateImg(this, 'right', canvas);
break;
case 3: // 180 degrees of rotation is required rotateImg(this, 'right', canvas); //Turn twice rotateImg(this, 'right', canvas);
break;
}
function rotateImg(img, direction, canvas) {
//alert(img);
//The minimum and maximum rotation directions, the picture will return to the original direction after rotating 4 times var min_step = 0;
var max_step = 3;
//var img = (pid);
if (img == null) return;
//The height and width of img cannot be obtained after the img element is hidden, otherwise an error will occur var height = ;
var width = ;
//var step = ('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//Rotate to the original position, that is, exceeding the maximum value step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//The rotation angle is parameterized by radian value var degree = step * 90 * / 180;
var ctx = ('2d');
switch (step) {
case 0:
= width;
= height;
(img, 0, 0);
break;
case 1:
= height;
= width;
(degree);
(img, 0, -height);
break;
case 2:
= width;
= height;
(degree);
(img, -width, -height);
break;
case 3:
= height;
= width;
(degree);
(img, -width, 0);
break;
}
uploadfile(canvas);
}
}
}
});
}
(file[0]);
}
function uploadfile(canvas) {
let src = ("image/png"); //The address converted here is the base64 address, and the src directly used to display the picture can be displayed by using the img tag src.
//Convert to Blob object function dataURItoBlob(dataURI) { //Convert the picture to a Buffer
The //atob() method is used to decode strings encoded using base-64. //The encoding method is btoa() . var byteString = atob((',')[1]);
var mimeString = (',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer();
var ia = new Uint8Array(ab);
for (var i = 0; i < ; i++) {
ia[i] = (i);
}
return new Blob([ab], { type: mimeString });
}
var blob = dataURItoBlob(src);
('Binary object:');
(blob);
//Convert to File object function dataURLtoFile(dataurl, filename) {
var arr = (','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = ,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = (n);
}
return new File([u8arr], filename, { type: mime });
}
var file_b = dataURLtoFile(src, '');
var formData = new FormData();
var columnName = 'img';
(columnName, file_b);
("filetype", file_b.type);
('File Object:');
(file_b);
}
</script>
</body>
</html>Solve the problem of automatic image rotation
JavaScript library for reading EXIF metadata from image files.
You can use it on an image in your browser, entering elements from an image or a file.
Retrieve EXIF and IPTC metadata. This package can also be used in AMD or CommonJS environments.
Note: EXIF standard only applies to.jpgand.tiffimage.
The EXIF logic in this package is based on EXIF standard v2.2 (JEITA CP-3451, included in this repo).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./jquery-1.7."></script>
<script src="./"></script>
</head>
<body>
<img src="" />
<script type="text/javascript">
var getor = function() {
(("J-logo"),
function() {
var aaa = (this);
var orp = (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>The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.