將具有背景圖像和文本內容的畫布另存為圖像

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;）