質問編集履歴

2 書式の改善

退会済みユーザー

退会済みユーザー

2019/05/09 16:21  投稿

画像のアップロード時にリサイズをする
JavaScriptを使用してアップロード時に画像をリサイズをする
### 前提・実現したいこと
画像をアップロードする際に、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で非表示にしてみました
ただ、他によい書き方があれば教えていただきたいです。
実際やりたいことは、リサイズした画像のみを画面に表示したいです。
そのため、リサイズ前の画像をcssで非表示にしてみました。
ただ他に良い方法が教えていただきたいです。
初心者のためJavaScriptも理解が低いです。
初歩的なことで恐縮ですが、お教えいただけますと幸いです。
どうぞよろしくお願いします。
  • JavaScript

    31585 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    19965 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    13968 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 誤字

退会済みユーザー

退会済みユーザー

2019/05/09 16:18  投稿

画像のアップロード時にリサイズをする
### 前提・実現したいこと
画像をアップロードする際に、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

    31585 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    19965 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    13968 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る