Javascript 在数据库中使用画布存储和显示图像

我尝试将画布的图像保存到数据库中。 二进制代码在那里，但问题是显示器

所以基本上我有一个定制页面，你可以在那里设计蛋糕。 它还不在画布中，只使用了css。 这是进行自定义的代码（显示）：

显示蛋糕

所以在它之后，我有一个预览按钮，在那里我使用画布将显示卡转换成图像

以下是我的代码：

<script type="text/javascript"> // gets the binary code of the canvas to save in the database

var canvas1 = document.getElementById('preview_image');
var contextSource = canvas1.getContext('2d');
var canvasall = document.getElementById('preview_image');
var context = canvasall.getContext('2d');
context.drawImage(canvas1, 0, 0);
var base64="";
$(function () { 
$("#submitBtn").bind("click", function() {
base64 = $('#preview_image')[0].toDataURL();
$("#show_canvas").attr("src", base64);
$("#show_canvas").show();
});
});
</script>

//获取要保存在数据库中的画布的二进制代码
var canvas1=document.getElementById（'preview_image'）；
var contextSource=canvas1.getContext（'2d'）；
var canvasall=document.getElementById（'preview_image'）；
var context=canvasall.getContext（'2d'）；
drawImage（canvas1,0,0）；
var base64=“”；
$（函数（）{
$（“#submitBtn”）.bind（“单击”，函数（）{
base64=$（“#预览_图像”）[0].toDataURL（）；
$（“显示画布”）.attr（“src”，base64）；
$（“#显示画布”）.show（）；
});
});

这就是html：

<div id="savecanvas"> 
<canvas id="preview_image" width="600" height="400" style="margin: 0 auto;"></canvas></div>

设计完成后，新生成的蛋糕图像将存储在我的数据库中

这是php $savecanvas=str_replace（“”，“+”，$_POST['canvas']）； 它工作正常

希望有人能帮我。

---

谢谢你

问题是什么？是否要将image base64字符串转换为图像文件？它已转换，但问题是它不会显示。它只显示“裂纹图像”。我想知道我的代码或更改中是否遗漏了某些内容。必须在base64之后使用字符串。检查这里：这里是在线转换器，您可以检查base64编码的字符串是否正确？

<div id="savecanvas"> 
<canvas id="preview_image" width="600" height="400" style="margin: 0 auto;"></canvas></div>