主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: Generates rotated jpeg with exif "Rotation" value

                
tags: JavaScript
Exif has "Rotation" value. Many photo viewers check it to show image. I wrote that to get rotated jpeg and remove exif "Rotation" value on client-side JavaScript.

To try, download two files below and put them same directory and open .html.
150421.html
piexif.js

Rotated image samples: https://github.com/recurser/exif-orientation-examples

********************* screen shot
1504211832136.jpg
*********************

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>generates rotated jpeg</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="piexif.js"></script>
</head>
<body>
<div>JPEG FILES ONLY<br>You can choose multiple files<br>
<input type="file" id="files" name="files[]" multiple /><br>
</div>
<div id="preview"></div>
<script>
function postJpeg (binStr) {
var array = [];
for (var p=0; p<data.length; p++) {
array[p] = data.charCodeAt(p);
}
var u8array = new Uint8Array(array);

var req = new XMLHttpRequest();
req.open("POST", "/jpeg", false);
req.setRequestHeader('Content-Type', 'image/jpeg');
req.send(u8array.buffer);
}


function previewJpeg(evt) {
var files = evt.target.files;
var previewDiv = $("#preview");
for (var i=0; i<files.length; i++) {
var file = files[i];
if (!file.type.match('image/jpeg.*')) {
continue;
}

var reader = new FileReader();
reader.onload = function(e) {
var exif = piexif.load(e.target.result);
var image = new Image();
image.onload = function () {
var orientation = exif["0th"][piexif.ImageIFD.Orientation];

var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
ctx.save();
if (orientation == 2) {
x = -canvas.width;
ctx.scale(-1, 1);
} else if (orientation == 3) {
x = -canvas.width;
y = -canvas.height;
ctx.scale(-1, -1);
} else if (orientation == 3) {
x = -canvas.width;
y = -canvas.height;
ctx.scale(-1, -1);
} else if (orientation == 4) {
y = -canvas.height;
ctx.scale(1, -1);
} else if (orientation == 5) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
y = -canvas.width;
ctx.scale(1, -1);
} else if (orientation == 6) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
} else if (orientation == 7) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
ctx.scale(-1, 1);
} else if (orientation == 8) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
y = -canvas.width;
ctx.scale(-1, -1);
}
ctx.drawImage(image, x, y);
ctx.restore();

var dataURL = canvas.toDataURL("image/jpeg", 1.0);
var jpegBinary = atob(dataURL.split(",")[1]);

// restore exif(remove orientation value)
// if (typeof orientation !== "undefined") {
// delete exif["0th"]["Orientation"];
// }
// var exifbytes = piexif.dump(exif);
// jpegBinary = piexif.insert(exifbytes, jpegBinary);

var div = $("<div></div>");
div.append(canvas);
var button = $("<button>post this image</button>");
button.click(function () {
//post(jpegBinary);
console.log("post jpeg");
});

previewDiv.prepend(div).prepend(button);
};
image.src = e.target.result;
};

reader.readAsDataURL(file);
}
}

document.getElementById("files").onchange = previewJpeg;
</script>
</body>
</html>


https://github.com/hMatoba/piexifjs
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。