Question

我想知道如何保存用我发现的画布绘制脚本绘制的画布。我需要将画布保存为.png。

Answer 1

您可以使用canvas对象的toDataURL方法并将其发布/放在服务器上 - 使用form或ajax。返回的字符串是图像的基本64位编码版本。

更多信息：https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

我在示例中使用jQuery。 $("#canvas_element_id")[0]与document.getElementById("canvas_element_id")相同。

function save() {
    var image_data = $("#canvas_element_id")[0].getDataURL();

    $.ajax({
        type: "post",
        url: "/url/to/save/script.php",
        data: {
            img: image_data
            // pass anything else you want as JSON
        },
        dataType: "json",
        success: function(res) {
            // display status message - success or failure
        }
    });
}

在服务器端（/url/to/save/script.php）：

$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$img = base64_decode($img);

// now $img contains image binary data (can be saved on disk) - save it, manipulate it... etc.
// You can use fopen, fwrite or their equivalent to save in file

它的PHP因为我已经在那里完成了，但其他地方的机制是相同的...... ASP.NET，Python等。

尝试使用绘制脚本保存画布

1 个答案: