ウェブ上に画像をアップして、プレビューできるページを現在作成中です。
アップした画像のアスペクト比によって、横長の場合はクラス(tsf2)をつける、という処理を行なっております。
PC上では添付しているソースで問題なかったのですが、iphone上で画像をアップした際、縦長画像にもクラスが付与されている事に気づき、調べてみると、元画像の「Orientation値」が正しく所得できていない為と分かり...
「Exif.js」というjavascriptで対応している記事をいくつか見つけました。
ですが、いくつかの参考サイトの内容を反映しても中々うまくいきません。自分のソースはcanvasは使ってないのでまんま参考にする事はできなかったのですが..。
試したExif.jsソースはどこまで正しいのか分からず、以下のコードには明記しませんでした。
もしかしたらExif.jsを使わずとも実現できればと思うのですが、いかがでしょうか。
アスペクト比によってのクラス処理をiphoneやどのデバイスにも同じように反映させたいと思っております。
お助けいただければ幸いです。
/* 画像アップロード */ $('#myfile').change(function(e){ //ファイルオブジェクトを取得する var file = e.target.files[0]; var image = new Image(); var reader = new FileReader(); //画像でない場合は処理終了 if(file.type.indexOf("image") < 0){ alert("画像ファイルを指定してください。"); return false; } //アップロードした画像を設定する reader.onload = (function(file){ return function(e){ $("#image").attr("src", e.target.result); image.src=reader.result; image.onload=function(){ //画像サイズ var pnw = image.naturalWidth; var pnh = image.naturalHeight; if (pnh < pnw) { $(fcf).addClass("tsf2"); if($(fco).hasClass('tsf')){ }else { $(fco).addClass('tsf'); } }else { $(fco).removeClass('tsf'); $(fcf).removeClass("tsf2"); } } }; })(file); reader.readAsDataURL(file); });
あなたの回答
tips
プレビュー