Canvasに描画した画像をjQuery.ajaxでサーバーに保存する : JavaScript

Tweet

Pocket

Canvas画像に表示されているデータをサーバーに保存する(PNG画像)。

クライアント側の処理 JavaScript

jQuery(function($) {

    // body部パラメーター
    var data = {};
    // Canvasのデータをbase64でエンコードした文字列を取得
    var canvasData = $('canvas').get(0).toDataURL();

    // 不要な情報を取り除く
    canvasData = canvasData.replace(/^data:image\/png;base64,/, '');

    data.image = canvasData;

    $.ajax({
        url: 'example.php',
        type: 'POST',
        success: function() {
            // 成功時の処理
        },
        error(jqXHR, textStatus, errorThrown) {
            // 失敗時の処理
        },
        data: data,
        dataType: 'json'
    });

});

PHP example.php

<?php
    $imageData = $_POST['image'];
    $filename = 'example.png';
    $fp = fopen(, 'w');
    fwrite($fp,base64_decode($imageData));
    fclose($fp);

» Gist