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

Question

要求:

1. 用户可以输入文本，将其叠加在图像之上。
2. 用户可以下载带有叠加层的图像。

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

调查结果:

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

我错过了什么？

这是片段:

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 属性应指向 Canvas 源的 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;