回答編集履歴
3
JsDocの誤りを修正
answer
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
* 対応していない場合、コールバック関数の引数にはnullが返される。
|
|
33
33
|
*
|
|
34
34
|
* @param {Node} canvas canvas要素のDOMノード
|
|
35
|
-
* @param {function(Blob|null)} callback コールバック関数。第一引数に、生成したBlobオブジェクト、またはnullが渡される
|
|
35
|
+
* @param {function((Blob|null))} callback コールバック関数。第一引数に、生成したBlobオブジェクト、またはnullが渡される
|
|
36
36
|
* @param {string=} type 画像形式の文字列
|
|
37
37
|
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
|
|
38
38
|
*/
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
/**
|
|
62
62
|
* canvas画像の送信処理
|
|
63
63
|
*
|
|
64
|
-
* @param {
|
|
64
|
+
* @param {Element} formElem フォームのDOMノード
|
|
65
65
|
*/
|
|
66
66
|
function send(formElem) {
|
|
67
67
|
var canvasElem = document.getElementById('canvas-id');
|
2
断定的に記述していた箇所を修正
answer
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
以上のブラウザが対応しています。
|
|
16
16
|
そして、これより前のブラウザなどでは対応していません。
|
|
17
17
|
|
|
18
|
-
対応していないブラウザでは、他の回答にあるようにData URIやBase64に変換してアップロードするしか方法は
|
|
18
|
+
対応していないブラウザでは、他の回答にあるようにData URIやBase64に変換してアップロードするしか方法は無いと思います。
|
|
19
19
|
|
|
20
20
|
```HTML
|
|
21
21
|
<canvas id="canvas-id" width="100" height="100"></canvas>
|
1
「他のform要素と一緒に」の要件について追記。対応しているブラウザの一覧を追加。
answer
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
手抜き実装ですが、こんな感じでしょうか。
|
|
2
2
|
|
|
3
3
|
`multipart/form-data`のファイルとして受け取りたいなら、canvasの画像をBlobオブジェクトに変換し、FormDataオブジェクトに追加したうえでAjax送信すれば実現できます。
|
|
4
|
+
また、FormDataオブジェクトをフォームの要素を指定して生成すれば、「他のform要素と一緒に」送信できます。
|
|
4
5
|
|
|
5
|
-
ただし、BlobオブジェクトやFormDataオブジェクトに対応し
|
|
6
|
+
ただし、BlobオブジェクトやFormDataオブジェクトに対応しているのは比較的新しいブラウザだけです。
|
|
6
|
-
|
|
7
|
+
具体的には…
|
|
7
8
|
|
|
9
|
+
- Internet Explorer 10 以上
|
|
10
|
+
- Google Chrome 20 以上
|
|
11
|
+
- Safari 6 以上
|
|
12
|
+
- Firefox 13 以上
|
|
13
|
+
- Opera 12.1 以上
|
|
14
|
+
|
|
15
|
+
以上のブラウザが対応しています。
|
|
16
|
+
そして、これより前のブラウザなどでは対応していません。
|
|
17
|
+
|
|
8
18
|
対応していないブラウザでは、他の回答にあるようにData URIやBase64に変換してアップロードするしか方法はありません。
|
|
9
19
|
|
|
10
20
|
```HTML
|