[英]Text background not working with html2canvas
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. 我正在尝试使用Html2Canvas从Div生成图片,但是效果不佳,问题是文本的背景。 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. 我有一个文本背景样式,它可以很好地显示文本,但是如果单击To Image ,则
html2canvas
生成带有黑色文本和错误背景的图片。
How I can do to generate a correct picture using html2canvas
? 如何使用
html2canvas
生成正确的图片?
尝试将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.