先日、画像を縮小して表示するページを作成してこのブログで紹介しました(JavaScriptで縮小画像の作成 | while(isプログラマ))。
ただ、このページからiPadやiPod touchで開いたうえで、ファイルの選択から『写真を撮る』を選び、縦向き(縦長)にして写真を撮ってみると、縮小した写真は横向きに表示されてしまいました。これは、写真が標準で縦表示になっているわけではなく、Exif情報のOrientation(向き情報)によって縦方向の写真となっているためにおこります。HTML5のcanvasではどうやらExif情報を考慮してくれないようで、そのため縦に撮った写真が横に表示されてしまったというわけです(それどころか、Orientationによって縦表示とされている写真をimgタグで普通に表示させても、PCのブラウザからは横表示になってしまうという)。
ただ、これでは少し困るのでOrientationを見たうえで実際の方向通りにcanvasに描画する方法はないものかと思って探してみたところ、『JavaScript Load Image』というJavaScriptライブラリを見つけました。相変わらず英語は苦手なので全部わかったわけではないのですが、どうもExif情報を見るライブラリらしく、Exif情報を見たうえで画像をcanvasに表示することができるライブラリだそう。サンプルを使ってみると確かにOrientationで縦向きとなっている画像が、縦向きになってcanvasに描画されました。これはすごいよさそうです。
というわけで、上記ライブラリを用いたうえで、先日の画像縮小ページのJavaScript部分を下記のように変更してみました。
var captureForm = document.querySelector('#inputFile');
// ファイルを選んだ時の処理
captureForm.addEventListener('change', function() {
var file = this.files[0],
image = new Image(),
reader = new FileReader(),
reduceFlag = document.querySelector('input[name="reduceFlag"]:checked') ? +document.querySelector('input[name="reduceFlag"]:checked').value : 0;
size = +document.querySelector('#imageSize' + reduceFlag).value;
if (file.type.match(/image.*/)) {
reader.onloadend = function() {
image.onload = function() {
var width = 0;
var options = {canvas:true};
var currentFile = file;
console.log("size:");
console.log(size);
// Orientationの設定
loadImage.parseMetaData(currentFile, function (data) {
if(reduceFlag == 1){ // ラジオボタンで指定した値
width = size;
}
if (data.exif) {
options.orientation = data.exif.get('Orientation');
for( key in data.exif.map){
var value = data.exif[data.exif.map[key]];
if(value){
console.log(key + ':' + data.exif[data.exif.map[key]]); // Exif情報の出力
}
}
if(reduceFlag != 1){ // ラジオボタンで指定した値
console.log("reduceFlag:" + reduceFlag);
if(options.orientation >= 5){
width = image.height * (size/100);
}else{
width = image.width * (size/100);
}
}
}
options.maxWidth = width;
});
loadImage(
currentFile,
function (canvas) {
document.querySelector('body').appendChild(canvas); // canvasの表示
},
options // Options
);
}
image.src = reader.result;
}
reader.readAsDataURL(file);
}
}, false);
以下、実行サンプル。
画像を縮小して表示
Base64形式のURI Dataの画像をいれても画像は表示されるようなのですが、Exif情報が取得できませんでした(そのため、わざわざ画像をロードしたうえで、その幅を取得している)。
Exif情報が取得できた場合、開発者ツールのコンソール画面に一覧して表示するようにしてみました。PCにExif情報のついた写真がある場合はそれをアップしてみて確認してください。Exif情報と一言でいっても、いろんな情報があるものですね。自分でも試してみましたが、ほとんどundefinedでした(表示している一覧はundefinedとなった情報は省いています)。
コメント