Проблемы с загрузкой строки Base64 на холст

Question

Я пытаюсь загрузить строку 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>

Я загружаю данные из своей базы данных с помощью вызова ajax.

Если I alert() data var, отображается закодированная строка Base64.Так что на самом деле все идет не так, как надо ... Я просто все время получаю пустой холст.

Кто-нибудь знает, что я здесь не так делаю?Большое спасибо!

Answer 1

Попробуйте нарисовать изображение после события загрузки изображения:

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

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

У src должен быть полный URL-адрес данных, а не просто набор данных base64, поэтому проверьте еще раз. Пример (из Википедия ):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Answer 2

если ваши данные base64 data-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>