テキストオーバーレイなしでキャンバスの画像がダウンロードされるのはなぜですか？

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;