JavaScriptはどうやってモバイル端末で写真の回転を処理しますか?
本論文の例では、jsモバイル端末で撮影した画像の回転の具体的なコードを共有します。
第一歩:exif-jsを導入する
第一歩:exif-jsを導入する
<script src="https://cdn.jsdelivr.net/npm/[email protected]/exif.min.js"></script>
ステップ2:
/**
* ( )
* fileObj.file
* fileObj.resolution image/jpeg image/webp , 0 1 。
* fileObj.fileType ,1 file ,2 blob ,3 base64
* fileObj.fileName , picture.jpeg
* fileObj.callback
*/
function handleImageFile(fileObj) {
//
fileObj.fileName = fileObj.hasOwnProperty("fileName") ? "images/" + fileObj.fileName : "images/picture.jpeg";
//
var fType = fileObj.file.type;
if (fType.indexOf("image") === -1) return fileObj.callback({
status: 500,
message: " ",
data: null
});
if (!EXIF) return fileObj.callback({
status: 500,
message: "EXIF ",
data: null
});
if (fileObj.file) {
// ,
EXIF.getData(fileObj.file, function () {
var orientation = EXIF.getTag(this, 'Orientation');
var oReader = new FileReader();
oReader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var resultFile = null;
var ua = navigator.userAgent;
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
// android
var isAdr = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1;
// ios
var isIOS = ua.indexOf("iPhone") > -1 || ua.indexOf("iOS") > -1;
// ios Android
if (isIOS || isAdr) {
// 1,
if (orientation && orientation !== "" && orientation !== 1) {
switch (orientation) {
case 6: // ( )90
rotateImg(this, "left", canvas);
break;
case 8: // ( )90
rotateImg(this, "right90", canvas);
break;
case 3: // 180 ,
rotateImg(this, "right180", canvas);
break;
}
}
resultFile = canvas.toDataURL("image/jpeg", fileObj.resolution);
} else {
resultFile = canvas.toDataURL("image/jpeg", fileObj.resolution);
}
switch (fileObj.fileType) {
case 1:
case 2:
fileObj.callback({
status: 200,
message: "success",
data: dataURLtoFile(resultFile, fileObj.fileType, fileObj.fileName)
});
break;
case 3:
fileObj.callback({
status: 200,
message: "success",
data: resultFile
});
break;
default:
break;
}
};
};
oReader.readAsDataURL(fileObj.file);
});
} else {
return fileObj.callback({
status: 500,
message: " ",
data: null
});
}
/**
*
*/
function rotateImg(img, direction, canvas) {
if (img === null) return;
// , 4
var minStep = 0;
var maxStep = 3;
// img img ,
var width = img.width;
var height = img.height;
var step = 2;
if (step === null) step = minStep;
if (direction === "right90") {
step++;
step > maxStep && (step = minStep);
} else if(direction === "right180") {
step = 2;
} else {
step--;
step < minStep && (step = maxStep);
}
//
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, width, height);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
}
}
/**
* type:1 file ,2 blob
*/
function dataURLtoFile(dataurl, type, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
if (type === 1) { // file
return new File([u8arr], filename, {
type: mime
});
} else { // blob
return new Blob([u8arr], {
type: mime
});
}
}
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。