モバイルWebブラウザでinput [type = 'file']を使用して写真をキャプチャした後、キャンバスに正しい方向で写真を描画する方法は？
私は、訪問者がhtml5 input [type = file]要素を使用して写真をキャプチャできるシンプルなWebアプリをモバイルで作成しています。次に、プレビューのためにウェブ上に表示し、訪問者は他の目的のためにサーバーに写真をアップロードすることを選択できます（例：FBにアップロード）
IPhoneを使用して写真を撮り、垂直に保持すると、写真の向きに問題があります。写真はタグ内で正しい向きになっています。ただし、drawImage（）メソッドを使用してキャンバスに描画しようとすると、90度回転して描画されます。
私は4方向で写真を撮ろうとしましたが、そのうちの1つだけがキャンバスに正しい画像を描くことができます。
まあ、私はこの問題を解決するために正しい方向を取得するのに混乱しています...助けてくれてありがとう...
ここに私のコードがあり、主にMDNからコピーします
<div class="container">
<h1>Camera API</h1>
<section class="main-content">
<p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
<p>
<form method="post" enctype="multipart/form-data" action="index.php">
<input type="file" id="take-picture" name="image" accept="image/*">
<input type="hidden" name="action" value="submit">
<input type="submit" >
</form>
</p>
<h2>Preview:</h2>
<div style="width:100%;max-width:320px;">
<img src="about:blank" alt="" id="show-picture" width="100%">
</div>
<p id="error"></p>
<canvas id="c" width="640" height="480"></canvas>
</section>
</div>
<script>
(function () {
var takePicture = document.querySelector("#take-picture"),
showPicture = document.querySelector("#show-picture");
if (takePicture && showPicture) {
// Set events
takePicture.onchange = function (event) {
showPicture.onload = function(){
var canvas = document.querySelector("#c");
var ctx = canvas.getContext("2d");
ctx.drawImage(showPicture,0,0,showPicture.width,showPicture.height);
}
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create ObjectURL
var imgURL = URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.src = imgURL;
// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
catch (e) {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);
}
catch (e) {
// Display error message
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();
</script>
Exifデータを読み取り、exif.Orientationが次のいずれかであるかどうかを確認する必要があります。
fileReader.onloadend = function() {
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
switch(exif.Orientation){
case 8:
ctx.rotate(90*Math.PI/180);
break;
case 3:
ctx.rotate(180*Math.PI/180);
break;
case 6:
ctx.rotate(-90*Math.PI/180);
break;
}
};
ベンの素晴らしい答えは私を正しい方向に向けましたが、実際の回転が間違っていると言えば（少なくとも私にとっては）、考えられるすべてのケースをカバーしているわけではありません。以下の解決策は私のために働いた。 JavaScript-Load-Imageライブラリ （ this great SO question ）で見つけたものに基づいています。）また、Canvasコンテキストは、回転時に左上隅から始まるため、中心に変換する必要がありました）。
fileReader.onloadend = function() {
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
switch(exif.Orientation){
case 2:
// horizontal flip
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
break;
case 3:
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
break;
case 4:
// vertical flip
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
break;
case 5:
// vertical flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
// 90° rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -canvas.height);
break;
case 7:
// horizontal flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(canvas.width, -canvas.height);
ctx.scale(-1, 1);
break;
case 8:
// 90° rotate left
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-canvas.width, 0);
break;
}
};
exif.js をプロジェクトに追加してから：
EXIF.getData(file,function() {
var orientation = EXIF.getTag(this,"Orientation");
var can = document.createElement("canvas");
var ctx = can.getContext('2d');
var thisImage = new Image;
thisImage.onload = function() {
can.width = thisImage.width;
can.height = thisImage.height;
ctx.save();
var width = can.width; var styleWidth = can.style.width;
var height = can.height; var styleHeight = can.style.height;
if (orientation) {
if (orientation > 4) {
can.width = height; can.style.width = styleHeight;
can.height = width; can.style.height = styleWidth;
}
switch (orientation) {
case 2: ctx.translate(width, 0); ctx.scale(-1,1); break;
case 3: ctx.translate(width,height); ctx.rotate(Math.PI); break;
case 4: ctx.translate(0,height); ctx.scale(1,-1); break;
case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(1,-1); break;
case 6: ctx.rotate(0.5 * Math.PI); ctx.translate(0,-height); break;
case 7: ctx.rotate(0.5 * Math.PI); ctx.translate(width,-height); ctx.scale(-1,1); break;
case 8: ctx.rotate(-0.5 * Math.PI); ctx.translate(-width,0); break;
}
}
ctx.drawImage(thisImage,0,0);
ctx.restore();
var dataURL = can.toDataURL();
// at this point you can save the image away to your back-end using 'dataURL'
}
// now trigger the onload function by setting the src to your HTML5 file object (called 'file' here)
thisImage.src = URL.createObjectURL(file);
});
（移動と回転を使用した）方向ブロックは https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js などからコピーされます私はそれがよく証明されていると思います。それは確かに私にとって完璧に機能しましたが、他のアプローチは機能しませんでした。
Orientationタグだけが必要な場合は、 exif.js を使用します。
EXIF.getData(file, function () {
alert(this.exifdata.Orientation);
});
私のテストでは、iOSカメラは1,3,6または8のみを返します。
あなたの答えに基づいて、iPhoneの写真を正しい方向に自動回転する機能を作成しました。
input.files [0]とオプションの最大幅または高さを渡すだけで、フォーム送信に使用されるblobが出力されます。
https://github.com/gonnavis/iphone_photo_rotation_adjust