Question

考虑每边两个盒子，每个盒子有5个条目，左边的盒子我们有动物名字，如狗，猫，老虎，大象，猴子。右边将有牛奶，山羊，椰子，骨头，香蕉。

现在使用canvas element我需要映射这两个框元素并将结果保存在Database中，我还需要在下次再次检索它。

我该如何实现这个？

提前致谢..

Answer 1

如果要将画布保存到数据库，则需要将画布转换为Base64字符串，然后将此字符串保存到数据库中，如下所示：

<input type="text" name="mybase64" />

<script type="text/javascript">
    function saveClicked() {
        var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/jpeg");
        $("input[name=\"mybase64\"]").val(dataURL);
    }
</script>

然后，您将 mybase64 发布到将要收到的任何网页服务/代码页面，并将此字符串写入您的存储媒体。要将图像重绘到画布，您将从数据库中获取base64字符串并将其写入画布，如下所示：

function drawCanvas(myBase64String) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = myBase64String;
    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}

您的问题的主要答案是，如果您想将画布存储到数据库中，则必须以base64格式完成。

如何在HTML5中操作canvas元素？

1 个答案: