Canvasの中身を、formとしてPOSTしたい

Question

HTMLのフォームにファイルアップロード機能がありますが、canvasで描いたものをformの他の要素と一緒にPOSTで送信することはできないでしょうか。

調べてみると、「他の要素とは別にAjaxで送信する」「Data URIやBase64に変換してアップロードする」というような手法はあったのですが、できることならサーバ側に手を入れず、通常の<input type="file" />を受け取るのと同様に処理できればいいなと考えています。

Comments

[orange0190]

input type="file"のみですか?hiddenではダメということでしょうか。

[maisumakun]

どんな要素でも、サーバ側でmultipart/form-dataとして受け取れれば大丈夫です。

Answer 1

手抜き実装ですが、こんな感じでしょうか。

multipart/form-dataのファイルとして受け取りたいなら、canvasの画像をBlobオブジェクトに変換し、FormDataオブジェクトに追加したうえでAjax送信すれば実現できます。
また、FormDataオブジェクトをフォームの要素を指定して生成すれば、「他のform要素と一緒に」送信できます。

ただし、BlobオブジェクトやFormDataオブジェクトに対応しているのは比較的新しいブラウザだけです。
具体的には…

• Internet Explorer 10 以上
• Google Chrome 20 以上
• Safari 6 以上
• Firefox 13 以上
• Opera 12.1 以上

以上のブラウザが対応しています。
そして、これより前のブラウザなどでは対応していません。

対応していないブラウザでは、他の回答にあるようにData URIやBase64に変換してアップロードするしか方法は無いと思います。

<canvas id="canvas-id" width="100" height="100"></canvas>

<form action="/upload" method="post" id="form-id">
  <input type="submit">
</form>

/**
 * HTMLCanvasElement.toBlobの互換関数。
 * toBlobメソッドとほぼ同等の動作を行う。
 * 対応していない場合、コールバック関数の引数にはnullが返される。
 *
 * @param {Node} canvas canvas要素のDOMノード
 * @param {function((Blob|null))} callback コールバック関数。第一引数に、生成したBlobオブジェクト、またはnullが渡される
 * @param {string=} type 画像形式の文字列
 * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
 */
function canvasToBlob(canvas, callback, type) {
    if (!type) {
        type = 'image/png';
    }

    if (canvas.toBlob) {
        canvas.toBlob(callback, type);
    } else if (canvas.toDataURL && window.Uint8Array && window.Blob && window.atob) {
        var binStr = atob(canvas.toDataURL(type).replace(/^[^,]*,/, '')),
        len = binStr.length,
        arr = new Uint8Array(len);

        for (var i = 0; i < len; i++) {
            arr[i] = binStr.charCodeAt(i);
        }

        callback(new Blob([arr], { type: type }));
    } else {
        callback(null);
    }
}

/**
 * canvas画像の送信処理
 *
 * @param {Element} formElem フォームのDOMノード
 */
function send(formElem) {
    var canvasElem = document.getElementById('canvas-id');

    if (window.FormData) {
        /**
         * FormDataオブジェクトに対応している場合、
         * canvas要素の画像をBlobオブジェクトに変換し、
         * ファイルとして送信することを試みる
         */
        canvasToBlob(canvasElem, function (canvasBlob) {
            if (canvasBlob) {
                /**
                 * canvas要素の画像をBlobオブジェクトとして出力できた場合、
                 * FormDataオブジェクトにファイルとして追加し、送信
                 */

                /**
                 * FormDataオブジェクトを生成
                 */
                var fd = new FormData(formElem);
                /**
                 * Blobオブジェクトを追加。
                 * これにより、サーバ側ではcanvas-imageパラメータから
                 * 画像ファイルとして取り込める
                 */
                fd.append('canvas-image', canvasBlob);

                /**
                 * XMLHttpRequestオブジェクトを生成
                 */
                var xhr = new XMLHttpRequest();

                // -------------------------
                // Ajax通信完了時の処理などを記述…
                // -------------------------

                /**
                 * Ajax通信の送信先・送信形式を指定
                 * この例では、送信先としてフォームのaction属性値を使用
                 */
                xhr.open('POST', formElem.action, true);

                /**
                 * FormDataオブジェクトをAjax送信
                 */
                xhr.send(fd);
            } else {
                /**
                 * canvas要素の画像をBlobオブジェクトとして出力できなかった場合、
                 * 送信できなかった事をアラート
                 */
                alert('canvasの内容を送信できませんでした。\nお使いのブラウザは、Blobオブジェクトの生成に必要な機能に対応していません。');
            }
        }, 'image/png');
    } else {
        /**
         * FormDataオブジェクトに対応していない場合、
         * 送信できない事をアラート
         */
        alert('canvasの内容を送信できませんでした。\nお使いのブラウザは、FormDataオブジェクトに対応していません。');
    }
}

/**
 * フォームが送信される時に実行する処理
 */
document.getElementById('form-id').addEventListener('submit', function (e) {
    /**
     * フォームの要素を取得
     */
    var formElem = this;

    /**
     * フォームの送信をキャンセル
     */
    e.preventDefault();

    /**
     * フォームをAjax送信
     */
    send(formElem);
}, false);

Answer 2

<canvas id="canvas"></canvas>
<form id="form">
<inupt type="text"/>
<input type="submit" id="submit_btn">
</form>

上記のようなものだと仮定してお答えします。
以下のようにしてみてはいかがでしょうか。

var canvas = document.getElementById("canvas");
document.getElementById("submit_btn").addEventListener(
    "submit", submitForm, false
);

function submitForm(event){
    event.preventDefaulst();
    var form = document.getElementById("form");
    var base64 = canvas.toDataURL();
    var newInput = document.createElement("input");  //input要素作成
    newInput.type="hidden";
    newInupt.name = "canvas";
    newInput.value=base64;  //値を設定
    form.appendChild(newInput);  //formにinupt要素を追加

    form.submit(); //送信
}

動作未検証ですので、参考程度にしてください。

Answer 3

var base64= this.canvas.toDataURL('image/png');

参考
http://qiita.com/0829/items/a8c98c8f53b2e821ac94

Comments

[maisumakun]

えっと、「他のform要素と一緒に」行う方法ではなさそうなのですが……

[nanndemoiikara]

すみませんでした。。。
質問の意図を正しく理解しておりませんでした。
無視して下さい。

[nanndemoiikara]

こちらinput[type="hidden"]にbase64の文字列をpostして処理してはだめでしょうか？

[sounisi5011]

参考ページの「Blob版」にて、FormDataオブジェクトによる送信を行っています。
FormDataオブジェクトを生成する際、第一引数にform要素を指定することで、フォーム内の入力コントロールの値がFormDataオブジェクトに設定されます。
http://hakuhin.jp/js/form_data.html

以降は、参考ページに書いてあるとおり実装すればOKです。
参考ページの例では、<input type="file" name="image">にファイルを選択して送信した時と同じデータをサーバ側で扱うことが出来ます。
なお、FormDataオブジェクトはAjaxで送信するものなので、form要素にsubmitイベントを設定し、フォームの送信をキャンセルする必要があります。
また、FormDataオブジェクトに対応していないブラウザではこの方法は利用できません。

[nanndemoiikara]

sounisi5011様
回答頂きありがとうございます。
勉強になります。