Сохранить холст с фоновым изображением и текстовым содержимым как изображение

Question

Как сохранить холст с фоновыми данными и текстовым содержимым как изображение.

Я пытался toDataUrl, но он возвращает мне только пустой холст.

<canvas id="canvas" width="578" height="250" crossOrigin="Anonymous"></canvas>
<a id="link_save" href="https://google.com/" target="_blank">SAVE</a>

<script>

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
  }

var canvas = document.getElementById('canvas');
var image = new Image();
image.src = './img/bg.jpg';
var base = canvas.toDataURL();
console.log(base);
image.onload = function () {
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
context.drawImage(image, 10, 0, 300, 200); // resizes image to 300px wide, 200px high


  var maxWidth = 400;
  var lineHeight = 25;
  var x = (canvas.width - maxWidth) / 2;
  var y = 60;
  var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';

  context.font = '16pt Calibri';
  context.fillStyle = '#333';

  wrapText(context, text, x, y, maxWidth, lineHeight);
};

</script>

Я попытался сохранить холст, но возвращает только пустой холст, но не с контентом.

Answer 1

Вы звоните canvas.toDataUrl() до загрузки изображения.

Поместите код в конец onload события

image.onload = function () {

    // Do stuff...

    var base = canvas.toDataURL();
    console.log(base);
}

Еще один взлом: после того, как вы закончите манипулировать ... просто right click в браузере на холсте и сохраните как .png;)