使用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轉換爲圖像

回答

相關問題