考虑如果每边有两个盒子,每个盒子都有 5 个条目,左边的盒子有动物的名字,比如狗、猫、老虎、大象、猴子。右边会有牛奶、山羊、椰子、骨头、香蕉。
现在使用canvas element
我需要映射这 2 个框元素并将结果保存在中,Database
并且下次我还需要再次检索它。
我如何实现这个?
提前致谢..
考虑如果每边有两个盒子,每个盒子都有 5 个条目,左边的盒子有动物的名字,比如狗、猫、老虎、大象、猴子。右边会有牛奶、山羊、椰子、骨头、香蕉。
现在使用canvas element
我需要映射这 2 个框元素并将结果保存在中,Database
并且下次我还需要再次检索它。
我如何实现这个?
提前致谢..
如果要将画布保存到数据库,则需要将画布转换为 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发布到将接收的任何 Web 服务/代码隐藏页面,并将此字符串写入您的存储介质。要将图像重绘到画布,您将从数据库中获取 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 格式完成。