将内容绘制到画布上

问题描述：

如何在不使用html2canvas之类的插件的情况下将以下内容绘制到画布上?

How is it possible to draw the below on to canvas without using a plugin like html2canvas?

<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);
}

答

您不能将HTML作为变量发送到画布对象.这是非法的.实际打印屏幕某人对页面的更改并将该图像发送到服务器要容易得多.无需动态地执行 (HTML> var)，您就可以使用 foreignObject

You cannot send a HTML as variable to the canvas object. It's illegal. It would be than easy to actually print-screen someone's changes to the page and send that image to the server. Without doing it dynamically (HTML>var) you can instead use 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>

相关推荐