將div及其關聯元素轉換爲canvas jquery？

有沒有什麼辦法可以將HTML Div及其相關元素轉換爲畫布並將畫布轉換爲圖像使用Jquery？我已經看了下面的網站，它只會轉換整個HTML頁面並呈現給body.Can任何人都可以幫我找到它。將div及其關聯元素轉換爲canvas jquery？

來源

2013-10-11 SurajBalakrishnan

您可以通過SVG及其foreignObject將HTML呈現到畫布中。這是有限的，你不能以任何方式渲染圖像或外部來源（你需要提取它們並在以後單獨渲染）。

ONLINE DEMO HERE

結果：

demo

讓我們定義一些HTML我們要顯示：

<div id="html"> 
    <div style="border:2px dotted #f73;font:12px sans-serif"> 
     <em>This</em> is 
     <span style="color:#00f;border:1px solid #777;padding:0 4px">HTML</span> 
     drawn into <strong>canvas</strong> 
    </div> 
</div>

現在我們可以建立一個內聯SVG和添加此html使用html ID第一div標籤：

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
      "<foreignObject width='100%' height='100%'>" + 
      "<div xmlns='http://www.w3.org/1999/xhtml'>" + 

      /// extract the html content of div 
      document.getElementById('html').innerHTML + 

      "</div>" + 
      "</foreignObject>" + 
      "</svg>";

下一步是建立一個Blob對象，所以我們可以參考SVG作爲URL，我們繪製爲圖像用帆布使用：

var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 

/// create an url that we can use for the image tag 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 

    /// now we can draw the "html" to canvas. 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
}; 
img.src = url;

您可以將其封裝到一個函數中，該函數將id和canvas作爲參數並處理外部內容和圖像。

來源

2013-10-11 07:50:39 K3N

謝謝@Cryptoburner。但是，它在IE中不起作用。有沒有其他方式在IE中做到這一點？ –

對不起，瀏覽器不會將HTML呈現到畫布中。

如果可以，這可能會帶來潛在的安全風險，因爲HTML可能包含來自第三方網站的內容（尤其是圖片和iframe）。如果canvas可以將HTML內容轉換爲圖像，然後讀取圖像數據，則可能會從其他網站提取特權內容。

要從HTML獲取畫布，您必須使用drawImage和fillText從頭開始編寫自己的HTML渲染器，這是一項潛在的巨大任務。有one such attempt here，但它有點狡猾，還有很長的路要走。（它甚至試圖從頭開始分析HTML/CSS，我認爲這很瘋狂！從應用了樣式的真實DOM節點開始，並且使用getComputedStyle及其部分的相對位置使用offsetTop來讀取樣式）

來源

2013-10-11 07:19:20 codebreaker

請參考鏈接http://html2canvas.hertzen.com/，它呈現整個HTML到畫布。爲什麼我們不能將特定的div轉換爲canvas？ – SurajBalakrishnan

你的問題是將div html元素轉換爲canvas，我已經回覆了它，並且我不確定你提供的鏈接及其支持性質。 – codebreaker

你沒有任何意義。如果我有權訪問DOM樹，我可以讀取任何特權數據。你制定了這個理由。 – Offenso

將div及其關聯元素轉換爲canvas jquery？

回答

相關問題