爲什麼我的畫布上的圖像沒有文字疊加而下載？

Question

要求：

1. 用戶可以鍵入在雲上的圖像上重疊的文本。
2. 用戶可以使用疊加下載圖像。

爲此，我將圖像繪製到畫布上，填充文本，然後將鏈接的href設置爲畫布的dataURL。

發現：

1. 我能看到圖像上的文本覆蓋在畫布就好了。
2. 如果我右鍵單擊畫布並下載圖像，我可以看到文本覆蓋很好。
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

屬性應指向編碼的畫布源的圖像的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;