Canvas の基本あれこれ

めっちゃ基本的なことをまとめる。

やりたいこと

やりたいことは次。

ローカルファイルを Canvas に画像読み込み
Canvas でユーザが任意に画像を編集

わたし、ここよわいですね、やっぱり。ここはかいてないですう。
Canvas の画像をサーバへ送信

あと、https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js これつこうてます。

ローカルファイルを Canvas に画像読み込み

ローカルファイルを Canvas に読み込むまで。手順としては次が必要。

ローカルファイルを画像として JavaScript 上に読み込む
- 『Reading local files in JavaScript - HTML5 Rocks』
- 『JavaScriptからローカルファイルの画像を表示する - ほげほげ（仮）』
JavaScript 上に読み込んだ画像を Canvas に描画
- 『HTML5 + JavaScriptで画像処理 (エッジ検出) - 御手洗特急途中下車』

結果、次のコード。

html:

<input type="file" id="files" name="files[]" multiple/>
<canvas id="myCanvas">canvasに対応したブラウザーで実行してください</canvas>

javascript:

<script>
    var handleFileSelect = function (evt) {
        var files = evt.target.files; // FileList object
        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var fileName = f.name;
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    $('#list').empty();
                    var local_file_uri = e.target.result;
                    $img = $('<img src="' + local_file_uri +
                            '" title="' + escape(theFile.name) + '"/>');
                    $img.bind('load', function (e) {
                        var _canvasW = e.target.width;
                        var _canvasH = e.target.height;
                        var canvas = document.getElementById("myCanvas");
                        canvas.width = e.target.width;
                        canvas.height = e.target.height;
                        var context = canvas.getContext("2d");
                        var imgObj = new Image(_canvasW, _canvasH);
                        imgObj.src = local_file_uri;
                        context.drawImage(imgObj, 0, 0);
                    });
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }
    $('#files').bind('change', handleFileSelect);
</script>

Canvas の画像をサーバへ送信

Canvas のデータをサーバへ送信、保存するやり方。Same-Originポリシーあたりの制限があるので注意。ローカルファイルをユーザが自分のオペレーションで Canvas に読み込んでる場合はサーバに送信できまする。

html:

<input type="button" id="send" value="ファイル送信"/>

javascript:

var sendImage = function (evt) {
    var canvas = document.getElementById("myCanvas");
    var data = canvas.toDataURL();
    data = data.replace('data:image/png;base64,', '');
    $('<form/>', {action: '/upload_image', method: 'post'})
            .append($('<input/>', {type: 'hidden', name: 'image', value: data}))
            .appendTo(document.body)
            .submit();
};
$('#send').bind('click', sendImage);

わたしの場合、非同期通信じゃなかったので同期的にページ遷移するコードにしました。

server(python):

@app.route('/upload_image', methods=['POST'])
def upload_image():
    image = base64.b64decode(request.form['image'])
    #image_name = request.form['image_name']
    filename = './static/upload_files/%d%s' % (int(time()), 'test.png')
    output = open(filename, 'wb')
    output.write(image)
    output.close()

ファイル名のところ超ダサいんですけどｗ

ファイル名は Javascript の File.name プロパティに設定されています。こいつを参照してサーバに POST すればOK。var fileName = f.name この部分すね。

zonote

HTML5 Canvas の基本あれこれ

Canvas の基本あれこれ

やりたいこと

ローカルファイルを Canvas に画像読み込み

Canvas の画像をサーバへ送信