teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

訂正

2017/12/04 08:56

投稿

退会済みユーザー
answer CHANGED
@@ -4,6 +4,8 @@
4
4
  var size = document.getElementById("id1").files[0].size;
5
5
  ```
6
6
 
7
+ という感じ。(id1 は input type="file" 要素の id とした場合)
8
+
7
9
  **【追伸】**
8
10
 
9
11
  サイズというのはファイルのバイト数ではなくて画像の縦横のサイズ px だったでしょうか? であれば勘違いしてました。スミマセン。
@@ -34,6 +36,4 @@
34
36
  完全なソースは以下の記事を見てください。
35
37
 
36
38
  canvas の画像をアップロード
37
- [http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx](http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx)
39
+ [http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx](http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx)
38
-
39
- という感じ。(id1 は input type="file" 要素の id とした場合)

1

追伸

2017/12/04 08:56

投稿

退会済みユーザー
answer CHANGED
@@ -4,4 +4,36 @@
4
4
  var size = document.getElementById("id1").files[0].size;
5
5
  ```
6
6
 
7
+ **【追伸】**
8
+
9
+ サイズというのはファイルのバイト数ではなくて画像の縦横のサイズ px だったでしょうか? であれば勘違いしてました。スミマセン。
10
+
11
+ その場合は image オブジェクトを使って可能だと思います。以下のような感じです(あくまで感じ)
12
+
13
+ ```
14
+ var image = new Image();
15
+ image.onload = DrawImageOnCanvas;
16
+
17
+ fileReader = new FileReader();
18
+ fileReader.onloadend = function () {
19
+ image.src = fileReader.result;
20
+ };
21
+
22
+ // 上で定義した image オブジェクトの src 属性に Data url
23
+ // が設定されると発生する onload イベントのリスナ。ここ
24
+ // で image 要素から画像のサイズを取得できる。
25
+ function DrawImageOnCanvas( )
26
+ {
27
+ // オリジナル画像のサイズ
28
+ var w = image.width;
29
+ var h = image.height;
30
+ // ・・・中略・・・
31
+ }
32
+ ```
33
+
34
+ 完全なソースは以下の記事を見てください。
35
+
36
+ canvas の画像をアップロード
37
+ [http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx](http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx)
38
+
7
39
  という感じ。(id1 は input type="file" 要素の id とした場合)