將內容繪制到畫布上

Question

不使用html2canvas這樣的插件，如何在畫布上繪制以下內容？

的jsfiddle

<div id="test">
    asadasd <br />
    fsdf<br />
    sdfsd<br />
    sdfsdfsdf<br />
</div>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"></canvas>

JS：

function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("test");
    ctx.drawImage(img,10,10);
}

Answer 1

您不能將HTML作為變量發送到畫布對象。 是非法的 實際打印某人對頁面的更改，然后將該圖像發送到服務器，要容易得多。 無需動態地執行操作 （HTML> var），您可以改為使用foreignObject ^{* Docs} 。

 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); 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" id="test" style="font-size:16px; background:gold;">'+ 'asadasd <br />' + 'fsdf<br />' + 'sdfsd<br />' + 'sdfsdfsdf<br />' + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; 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; 

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