尝试将画布数据保存到服务器

时间:2013-06-03 09:50:44

标签: php jquery canvas

我正在尝试保存创建并放置在画布中的图像,我有以下内容:

HTML:

<canvas id="example" class="test" style="width:600px;" data-id="0"></canvas>
<form name="saveForm" method="post">
    <input id="save" type="submit" value="save">
    <input type="hidden" id="imgData" name="imgData" value="">
</form>

Jquery的:

$(document).on("click", "#save", function() {
    document.getElementById('imgData').value = canvas.toDataURL('image/png');
    document.forms["saveForm"].submit();
});

PHP:

if($_POST['imgData']){
    // echo "here"; die; // tried this but not firing so no data getting to hidden field
    $upload_dir = '/home/mydir/public_html/pages/test/imgEdit/';
    $img = $_POST['imgData'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = $upload_dir."image_name.png";
    $success = file_put_contents($file, $data);
}

但它根本不起作用,没有任何事情发生,检查员也没有错误。显然,从PHP中的echo测试来看,图像数据不会在jquery点击时填充隐藏字段。

我错过了什么?

0 个答案:

没有答案