こんにちは!RubyとRailsを独学で勉強している者です。
今回はJavaScriptに関して質問があります。
RailsのWebアプリケーションを開発しておりますが、写真をアップロードする際にプレビュー表示を実装致しました。
その時に、iPhoneなどから撮った写真が横になるのを防ぐ方法を考えております。
以下のサイトの内容と全く同じことがしたいと思い、以下のサイトの通りに実装したのですが、JavaScriptが上手く動きません。
リンク内容
実装したコードは以下の通りです。(ライブラリはインストールしております。)
<script src="js/load-image.all.min.js"></script>
javascript
1document.querySelector('input[type="file"]').addEventListener('change', function() { 2 var file = this.files[0]; 3 loadImage.parseMetaData(file, (data) => { 4 var options = { 5 canvas: true 6 }; 7 if (data.exif) { 8 options.orientation = data.exif.get('Orientation'); 9 } 10 loadImage(file, (canvas) => { 11 var dataUri = canvas.toDataURL('image/jpeg'); 12 // 画像を作成 13 var img = new Image(); 14 img.src = dataUri; 15 document.body.appendChild(img); 16 }, options); 17 }); 18 } 19});
ちなみにサーバー側では以下のようにして写真が横になるのを防いでおります。
picture_uploader.rb def fix_exif_rotation manipulate! do |img| img.auto_orient img = yield(img) if block_given? img end end
上の設定により、DBに保存後は正しい向きで写真が表示されます。
しかし、DBに保存する前のプレビュー画面では写真が横になってしまいます。
是非、アドバイスなどよろしくお願い致します。
あなたの回答
tips
プレビュー