Javascript 为什么从我的画布下载的图像没有文本覆盖？

要求：

用户可以键入覆盖在图像顶部的文本

用户可以下载带有覆盖的图像

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

href

设置为画布的dataURL

调查结果：

我可以在画布上看到覆盖在图像上的文本

如果我在画布上单击鼠标右键并下载图像，我可以很好地看到文本覆盖

如果我点击链接，我会看到原始图像，而没有文本覆盖

我错过了什么

以下是片段：

var imgURL='1〕https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg';
函数loadCanvas（dataURL）{
var canGreeting=document.getElementById（'canGreeting'）；
var context=canGreeting.getContext（'2d'）；
//从数据url加载图像
var imageObj=新图像（）；
imageObj.crossOrigin='匿名'；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
context.font=“20px无衬线”；
context.fillStyle=“#FFFFFF”；
var arrayOfLines=$（'#txtGreetingText'）.val（）.split（'\n'）；
变量y=50；
var i=0；
$（arrayOfLines）.each（函数（）{
背景。填充文本（arrayOfLines[i]，50，y）；
i++；
y+=30；
});
};
imageObj.src=dataURL；
lnkDownload.download=“card.jpg”；
lnkDownload.href=imageObj.src；
}
$（文档）.ready（函数（）{
加载画布（imgURL）；
$（“#txtGreetingText”）。在（“键下”，函数（e）{
加载画布（imgURL）；
});
});
textarea{
宽度：420px；
高度：200px；
}





下载此卡
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;

@我很高兴能改进这个问题。请您评论一下需要改进的地方好吗？谢谢！一旦系统允许，我将在4分钟内接受答案。您传递给toDataURL的参数无效。无论如何，它将使用默认的png编码，但您不能设置它，我不知道您认为它是什么
；base64