前提・実現したいこと
画像をアップロードする際に、JSを使ってリサイズしてからアップロードしたいと思っています。
検索してみると、下記のコードで実装することができました。
ただ、id=previewLarge
をdisplay:none
にして画面上に表示されないようにしていますが、
他によい書き方はあるのでしょうか?
id=previewLarge
を使わなくても、リサイズした画像のみが画面上に表示されるようにしたいです。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画像のリサイズ</title> </head> <style> #previewLarge { display: none; } </style> <body> <input type="file" onchange="onInputChanged(event)"> <img id="previewLarge"> <img id="previewSmall"> <script> function onInputChanged(e) { var file = e.target.files && e.target.files[0]; if(file === null){return;} URL.revokeObjectURL(previewLarge.src); previewLarge.src = URL.createObjectURL(file); } previewLarge.onload = function(e){ // 画像データの縦横サイズを取得する var image = previewLarge; var width = image.naturalWidth; var height = image.naturalHeight; // 縮小する。今回は縦横それぞれ1/5 var canvas = document.createElement('canvas'); canvas.width = width / 5; canvas.height = height / 5; canvas.getContext("2d").drawImage(image, 0, 0, width / 5, height / 5); previewSmall.src = canvas.toDataURL(); } </script> </body> </html>
補足情報(FW/ツールのバージョンなど)
色々なサイトから探して上記のコードを見つけました。
実際やりたいことは、リサイズした画像のみを画面に表示したいです。
そのため、リサイズ前の画像をcssで非表示にしてみました。
ただ他に良い方法が教えていただきたいです。
初心者のためJavaScriptも理解が低いです。
初歩的なことで恐縮ですが、お教えいただけますと幸いです。
どうぞよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/05/10 05:43
2019/05/10 06:39
退会済みユーザー
2019/05/10 06:49