Html 将Base64字符串加载到画布时出现问题

我正在尝试将Base64字符串从数据库加载到画布

我通过反向方法获得了这个字符串：在画布上绘制后将其保存到数据库中。现在我想把它重新加载到另一个画布上。我在网上和StackOverflow上的其他地方尝试了这段代码，但似乎不起作用

<script type="text/javascript">
  $(document).ready(function(){
    var canvas = document.getElementById("loading_canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();

    $.post('doodles/load', function(data) {
      image.src = data;
    });
    ctx.drawImage(image, 0, 0);
  });
</script>

$（文档）.ready（函数（）{
var canvas=document.getElementById（“加载画布”）；
var ctx=canvas.getContext（“2d”）；
var image=新图像（）；
$.post（'涂鸦/加载'，函数（数据）{
image.src=数据；
});
ctx.drawImage（图像，0,0）；
});

我使用ajax调用从数据库加载数据

如果I

alert（）

datavar，它将显示编码的Base64字符串。所以这并不是真的出了问题。。我总是得到一张空画布

---

有人知道我做错了什么吗？非常感谢

尝试在图像加载事件后绘制图像：

var image = new Image();
image.onload = function () {
    ctx.drawImage(image, 0, 0);
}

$.post('doodles/load', function(data) {
    image.src = data;
});

src

需要一个完整的数据URL，而不仅仅是一堆base64数据，所以也要仔细检查。 示例（来自）：

如果您的数据是base64数据uri您应该只向上移动一行，并且一切正常

<script type="text/javascript">
  $(document).ready(function(){
      var canvas = document.getElementById("loading_canvas");
      var ctx = canvas.getContext("2d");

      var image = new Image();

      $.post('doodles/load', function(data) {
      image.src = data;
      ctx.drawImage(image, 0, 0);
    });
  });
</script>

$（文档）.ready（函数（）{
var canvas=document.getElementById（“加载画布”）；
var ctx=canvas.getContext（“2d”）；
var image=新图像（）；
$.post（'涂鸦/加载'，函数（数据）{
image.src=数据；
ctx.drawImage（图像，0,0）；
});
});

您能将数据变量记录到console.log中并准确地给出字符串吗？当它不应该的时候，它周围有引号吗？让我一到家就这样做，我的火车刚刚到达我的车站；D

<script type="text/javascript">
  $(document).ready(function(){
      var canvas = document.getElementById("loading_canvas");
      var ctx = canvas.getContext("2d");

      var image = new Image();

      $.post('doodles/load', function(data) {
      image.src = data;
      ctx.drawImage(image, 0, 0);
    });
  });
</script>