JavaScriptで画像をリサイズする方法（canvas）

お世話になっております。

Monacaでアプリを開発しており、読み込んだ画像をリサイズする処理で困っています。

別サイトで申し訳ないですが、こちら（Stackoverflow）の質問への回答にアップされていたコード（こちら）をもとに、色々と試してみたところ、リサイズ後の画像が表示されていないことに気付きました。

そもそも、上記のデモサイトでもリサイズ後の画像は読み込めていませんでした。

各functionが処理されるタイミングに問題があるような気がしたので、色々と書き換えたりもしましたが、結局うまくいきませんでした。

よろしくお願いします。

追記（上記のデモサイトから引用させていただきました）

HTML/JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>JS Bin</title>
6</head>
7<body>
8  <input type="file" onchange="onInputChanged(event)">
9  <hr>オリジナルサイズ:<br>
10  <img id="previewLarge">
11  <hr>縮小サイズ:<br>
12  <img id="previewSmall">
13  
14  <script>
15    function onInputChanged(e) {
16      var file = e.target.files && e.target.files[0];
17      if (file != null) {
18        var reader = new FileReader();
19        reader.onload = onImageLoad;
20        reader.readAsDataURL(file);
21      }
22    }
23    function onImageLoad(e) {
24      var largeData = e.target.result;
25      var smallData = makeSmall(largeData);
26      previewLarge.src = largeData;
27      previewSmall.src = smallData;
28    }
29    
30    // 画像データ(DataURL)を縮小して返す
31    function makeSmall(data) {
32      // 画像データの縦横サイズを取得する
33      var image = document.createElement('img');
34      image.src = data;
35      var width = image.naturalWidth;
36      var height = image.naturalHeight;
37
38      // 縮小する。今回は縦横それぞれ1/2
39      var canvas = document.createElement('canvas');
40      canvas.width = width / 2;
41      canvas.height = height / 2;
42      canvas.getContext("2d").drawImage(image, 0, 0, width / 2, height / 2);
43      return canvas.toDataURL();
44    }
45  </script>
46</body>
47</html>

defghi1977

2017/11/26 08:31

実際のコードが無いと回答できません.

行動規範の内容に同意します

回答1件

ベストアンサー

img要素に画像を読み込ませる前にloadイベントに関数を登録するようにします.

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>JS Bin</title>
6</head>
7<body>
8  <input type="file" onchange="onInputChanged(event)">
9  <hr>オリジナルサイズ:<br>
10  <img id="previewLarge">
11  <hr>縮小サイズ:<br>
12  <img id="previewSmall">
13
14  <script>
15    function onInputChanged(e) {
16      var file = e.target.files && e.target.files[0];
17      if(file === null){return;}
18      URL.revokeObjectURL(previewLarge.src);
19      previewLarge.src = URL.createObjectURL(file);
20    }
21    previewLarge.onload = function(e){
22      // 画像データの縦横サイズを取得する
23      var image = previewLarge;
24      var width = image.naturalWidth;
25      var height = image.naturalHeight;
26
27      // 縮小する。今回は縦横それぞれ1/2
28      var canvas = document.createElement('canvas');
29      canvas.width = width / 2;
30      canvas.height = height / 2;
31      canvas.getContext("2d").drawImage(image, 0, 0, width / 2, height / 2);
32      previewSmall.src = canvas.toDataURL();
33    }
34  </script>
35</body>
36</html>
37