無法將我的div innerHTML繪製到畫布

這是我的fiddle example。
在我的代碼中，我有三個div，第一個有可拖動和可調整大小的文本框，第二個div像預覽一樣。
我試圖將此預覽div的innerHTML轉換爲使用HTML 5畫布的圖像。
我發現this示例，只是這樣嘗試。
如果發生resizeEnd，我會致電drawImage函數。
但我可以爲我的預覽div的innerHTML製作圖像。
我的代碼有什麼問題？
我該如何解決這個問題？無法將我的div innerHTML繪製到畫布

HTML

First<br/> 

<div id="container"> 
    <div id="resizable" class="ui-widget-content">This is text Line 1<br/> 
    This is text Line 1<br/> 

    </div> 
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" /> 
</div> 

<br/>Second<br/> 

<div id="previewContainer"> 
    <div id="previewText" xmlns='http://www.w3.org/1999/xhtml' class="ui-widget-content2">This is text Line 1<br/> 
    This is text Line 1<br/> 
</div> 
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" /> 
</div> 

<br/> 
<canvas id="myCanvas" width="400" height="150" style="border:1px solid #d3d3d3;">

的Javascript

var DEF_HEIGHT = 100; // the #resizable default height 
var $preview = $('#previewText'); 

$("#resizable").resizable({ 
    containment: 'parent', 
    handles: "se", 
    aspectRatio: true, 
    resize: function (event, ui) { 
     var curHeight = (ui.size.height/DEF_HEIGHT) * 100; 
     $(this).css('font-size', curHeight + '%'); 
    }, 
    stop: function (event, ui) { 
     $preview.css({width: this.style.width, height: this.style.height, fontSize:this.style.fontSize}); 

     var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

     var data = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='150'>" + 
      "<foreignObject width='100%' height='100%'>" +    
document.getElementById('previewText').innerHTML +    
      "</foreignObject>" + 
      "</svg>"; 

     var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 
     img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
}; 
img.src = url; 

     // var img = new Image(); 
//img.src = document.getElementById('previewText').innerHTML; 
     // ctx.drawImage(img, 0, 0); 
    } 
}) 
.draggable({ 
    containment: 'parent', 
    start: function() {}, 
    drag: function() {}, 
    stop: function (e, ui) { 
     $preview.css($(this).position()); 
    } 
});

來源

2014-02-24 zey

出於某種原因，<br/>標籤似乎打破代碼。如果連接錯誤處理程序和打印你會看到例如網址：到地址欄，你可以讀取錯誤消息

img.onerror = function() {console.log(url)}; 

> blob:ffad7714-9640-46f4-b726-f056a93e5e8b

粘貼：

XML Parsing Error: mismatched tag. Expected: </br>. Location: 
blob:ffad7714-9640-46f4-b726-f056a93e5e8b Line Number 5, Column 7: 
</div></foreignObject></svg> 
------^

如果您刪除這些br標籤與p標籤替換它們，將工作：
Modified fiddle

我不能連鎖行業e 爲什麼（我已經看了好幾遍，嘗試過各種組合，即使不是自閉版本，但除非我錯過了某件事似乎是個問題）。

你雖然可以提高代碼：確保報價是相同的 - 例如見的xmlns定義在這裏（如要合併的字符串）：

<div id="..." xmlns='...' class="..."> 
     ^^ ^^ ^^

，如果你打算包括XML命名空間規範在div（你必須）你需要使用outerHTML而不是innerHTML。

document.getElementById('previewText').outerHTML

這就是說：SVG還有許多其他限制。任何外部引用（如圖像或引用外部圖像的css）都可能會阻止您繪製SVG。在畫布上使用SVG時，所有內容都必須內聯。

來源

2014-02-24 19:01:20 K3N

無法將我的div innerHTML繪製到畫布

回答

相關問題