使用javascript将HTML转换为图像

-1

我使用html2canvas将div转换为image。这是工作
罚款期望在谷歌字体效果这里是图像，你可以看到它是如何删除
从文字的影响。使用javascript将HTML转换为图像

这里是我使用这里面一个代码。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Welcome to canvas to HTML</title> 

    <link rel="stylesheet" type="text/css" 
      href="https://fonts.googleapis.com/css?family=Anton 
       &effect=ice"> 

    <script src="jquery-3.1.0.min.js"></script> 
    <script src="html2canvas.js"></script> 
    <script src="main.js"></script> 
    </head> 
<body> 
<div id="canvas"> 
    <span class="font-effect-ice" style="font-family: Anton; font-size:50px">This is some text.</span> 
</div> 
<button onclick="generateImage()">Click</button> 

<div id="img-out"></div> 

</body> 
</html>

以下是javascript代码。

function generateImage(){ 

var imageContainer = $('#canvas'); 

html2canvas(imageContainer, { 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      document.body.appendChild(canvas); 

      // Convert and download as image 
      $("#img-out").append(canvas); 
      // Clean up 
      //document.body.removeChild(canvas); 
     } 
});  

}

任何人都可以告诉我为什么这不起作用。

来源

2016-09-24 Azeem Haider

我已经试验了代码。我相信这是因为冰效果实际上是使用-webkit-mask-image叠加在文本上的图像。

这意味着它不完全是文字的一部分，而是文字顶部的图像。 HTML2canvas使用canvas div内的内容，而不是上面的任何图像。

来源

2016-09-25 15:49:36 asamolion

'HtmlToCanvas'无法转换图像。谢谢。 –

使用javascript将HTML转换为图像

回答

相关问题