Text background not working with html2canvas

Question

I am trying to generate a picture from my Div using Html2Canvas but it is not working fine, The problem is the background on my text. You can see that here:

 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> 

I have a text background style and it shows fine the text, but if You click on To Image , html2canvas generate a picture with a black text and wrong background.

How I can do to generate a correct picture using html2canvas ?

Answer 1

尝试将CS​​S用作内联，然后可以使用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>