javascript - 将内容绘制到 Canvas 上

Question

如何在不使用像 html2canvas 这样的插件的情况下将下面的内容绘制到 Canvas 上？

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 作为变量发送到 Canvas 对象。这是非法的。实际上打印屏幕某人对页面的更改并将该图像发送到服务器会非常容易。如果不动态执行此操作(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>