为什么我的画布上的图像在没有文本覆盖的情况下被下载？

Question

要求：

1. 用户可以在图像顶部输入作为叠加层的文本。
2. 用户可以下载带有叠加层的图像。

为此，我将图像绘制到画布上，填充文本，然后将链接的 href 设置为画布的 dataURL。

调查结果：

1. 我可以很好地看到画布中图像上的文本叠加。
2. 如果我在画布上单击鼠标右键并下载图像，我可以看到文本覆盖就好了。
3. 如果我点击链接，我会看到没有文本覆盖的原始图像。

我错过了什么？

这是sn-p：

var imgURL = 'https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg';

function loadCanvas(dataURL) {
  var canGreeting = document.getElementById('canGreeting');
  var context = canGreeting.getContext('2d');

  // load image from data url
  var imageObj = new Image();
  imageObj.crossOrigin = 'anonymous';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.font = "20px sans-serif";
    context.fillStyle = "#FFFFFF";
    var arrayOfLines = $('#txtGreetingText').val().split('\n');
    var y = 50;
    var i = 0;
    $(arrayOfLines).each(function() {
      context.fillText(arrayOfLines[i], 50, y);
      i++;
      y += 30;
    });
  };
  imageObj.src = dataURL;
  lnkDownload.download = "card.jpg";
  lnkDownload.href = imageObj.src;
}

$(document).ready(function() {
  loadCanvas(imgURL);
  $("#txtGreetingText").on("keydown", function(e) {
    loadCanvas(imgURL);
  });
});

textarea {
  width: 420px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea name="txtGreetingText" id="txtGreetingText"></textarea>
<br/>
<canvas id="canGreeting" width="480" height="480"></canvas>
<br/>
<a id="lnkDownload">Download this card</a>

Answer 1

href 属性应该指向画布源的 base64 编码图像。这样做：

$(arrayOfLines).each(function() {
  context.fillText(arrayOfLines[i], 50, y);
  i++;
  y += 30;
});
// udpate link to image
// Grab base64 encoded URL
var url = canGreeting.toDataURL("image/png;base64;");
lnkDownload.href = url;