将内容绘制到画布上 [英] Draw content to canvas

问题描述

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

How is it possible to draw the below on to canvas without using a plugin like 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);
}

推荐答案

您不能将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>

这篇关于将内容绘制到画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！