テキストの背景がhtml2canvasで動作しない

Question

私のDivからHtml2Canvasを使用して画像を生成しようとしていますが、問題なく動作しています。あなたはここにいることを見ることができます：

window.takeScreenShot = function() { 
 
    html2canvas(document.getElementById("est1"), { 
 
    onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
    }, 
 
    width: 320, 
 
    height: 220 
 
    }); 
 
}

#example4 { 
 
    display: block; 
 
    font-size: 60px; 
 
    color: rgb(0, 0, 0); 
 
    font-family: Arial; 
 
    background: -webkit-linear-gradient(top, rgb(213, 11, 27), rgb(28, 79, 145)); 
 
    -webkit-text-stroke-width: 0px; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div id="est1" style="display: block;"> 
 
    <h3 id="example4" data-text="Test" class="tt">Test</h3> 
 
</div> 
 
<button onclick="takeScreenShot()">to image</button>

私はテキストの背景のスタイルを持っており、それがテキストを微示しているが、あなたは画像へをクリックした場合、html2canvas黒のテキストと画像を生成します間違った背景。

html2canvasを使用して正しい画像を生成する方法を教えてください。

Answer 1

インラインとしてCSSを使用し、正しい画像をhtml2canvasを使用して生成することができます。

<h3 data-text="Test" class="tt" style="display: block; font-size: 60px;color: rgb(0, 0, 0); font-family: Arial;background: -webkit-linear-gradient(top, rgb(213, 11, 27), rgb(28, 79, 145));-webkit-text-stroke-width: 0px; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Test</h3>