如何把html转换成canvas,html5-如何将HTML元素转换为canvas元素？
html5-如何将HTML元素转换为canvas元素？
能够将常规元素临时转换为canvas，这将非常有用。例如，说我有一个要翻转的样式div。 我想动态创建画布，将HTMLElement“渲染”到画布中，隐藏原始元素并为画布设置动画。
能做到吗
davemyron asked 2020-02-13T23:10:01Z
10个解决方案
49 votes
有一个图书馆尝试您所说的话。
查看此示例并获取代码
[http://hertzen.com/experiments/jsfeedback/]
[http://html2canvas.hertzen.com/]
从html读取DOM并将其呈现到画布上，虽然在某些情况下会失败，但是在一般情况下还是可行的。
Aristos answered 2020-02-13T23:10:57Z
17 votes
抱歉，浏览器无法将HTML渲染到画布中。
如果可能的话，这将带来潜在的安全风险，因为HTML可能包含来自第三方站点的内容(尤其是图像和iframe)。 如果drawImage可以将HTML内容转换为图像，然后读取图像数据，则有可能从其他站点提取特权内容。
要从HTML获得画布，您必须使用drawImage和fillText从头开始编写自己的HTML渲染器，这是一项潜在的巨大任务。 这里有这样的尝试，但是它有点狡猾，距离完成还有很长的路要走。 (它甚至尝试从头开始解析HTML / CSS，我认为这很疯狂！从具有样式的真实DOM节点开始，并使用getComputedStyle读取样式以及使用getComputedStyle读取其部分的相对位置会更容易 等)。
bobince answered 2020-02-13T23:10:19Z
8 votes
在natevw引用的Mozdev帖子的基础上，我启动了一个小项目，以在Firefox，Chrome和Safari中将HTML渲染到画布上。 因此，例如，您可以简单地执行以下操作：
rasterizeHTML.drawHTML('This is HTML'
+ '', canvas);
源代码和更广泛的示例在这里。
cburgmer answered 2020-02-13T23:11:21Z
7 votes
看看有关MDN的本教程：[https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas](已归档)
替代链接(2019)：[https://reference.codeproject.com/book/dom/canvas_api/drawing_dom_objects_into_a_canvas]
它使用临时SVG图像将HTML内容作为“外部元素”包含在内，然后将所述SVG图像渲染为canvas元素。 但是，以这种方式可以包含在SVG映像中的内容受到很大限制。 (有关详细信息，请参见“安全性”部分。)
natevw answered 2020-02-13T23:11:51Z
6 votes
您可以使用dom到图像库(我是维护者)。
这是解决问题的方法：
var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');
var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
domtoimage.toPng(node).then(function (pngDataUrl) {
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
context.translate(canvas.width, 0);
context.scale(-1, 1);
context.drawImage(img, 0, 0);
parent.removeChild(node);
parent.appendChild(canvas);
};
img.src = pngDataUrl;
});
这是jsfiddle
tsayen answered 2020-02-13T23:12:19Z
5 votes
没有这样的事情，对不起。
虽然规范指出：
未来版本的2D上下文API可能会提供一种将使用CSS渲染的文档片段直接渲染到画布的方法。
可能会接近您。
很多人都想要drawWindow这种交易，但是却没有内置的东西。
唯一的例外是Mozilla独有的drawWindow，该工具将DOM窗口的内容快照绘制到画布中。 此功能仅适用于以Chrome(“仅限本地”)权限运行的代码。 在普通的HTML页面中是不允许的。 因此，您可以像使用它那样使用它来编写FireFox扩展，仅此而已。
Simon Sarris answered 2020-02-13T23:13:02Z
3 votes
您可以自己进行转换，可以使用CSS3转换来翻转
- 以及所需的任何HTML标记。 以下是一些带有源代码的演示示例，供您了解和学习：[http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/]
Jürgen Messing answered 2020-02-13T23:13:23Z
0 votes
动画DOM元素最简单的方法是使用CSS过渡/动画，但是我想您已经知道了，并且您尝试使用canvas来做CSS不允许您做的事情。 那么CSS自定义过滤器呢？ 如果您知道如何编写着色器，则可以以任何可以想象的方式变换元素。 还有一些其他链接，请不要忘记检查CSS过滤器实验室。
注意：您可能会想到浏览器支持不好。
olanod answered 2020-02-13T23:13:48Z
0 votes
下一个代码可以在2种模式下使用，模式1将html代码保存到图像，模式2将html代码保存到画布。
此代码可与库一起使用：[https://github.com/tsayen/dom-to-image]
*“ id_div”是您要转换的元素html的ID。
**“ canvas_out”是将包含画布的div的ID 因此，请尝试此代码。：
function Guardardiv(id_div){
var mode = 2 // default 1 (save to image), mode 2 = save to canvas
console.log("Process start");
var node = document.getElementById(id_div);
// get the div that will contain the canvas
var canvas_out = document.getElementById('canvas_out');
var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;
domtoimage.toPng(node).then(function (pngDataUrl) {
var img = new Image();
img.onload = function () {
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
};
if (mode == 1){ // save to image
downloadURI(pngDataUrl, "salida.png");
}else if (mode == 2){ // save to canvas
img.src = pngDataUrl;
canvas_out.appendChild(img);
}
console.log("Process finish");
});
}
因此，如果要保存到图像，只需添加以下功能：
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}
使用示例：
All content that want to transform
Convert
评论是否可行。Comenten si ssirvio :)
Luis Villadiego answered 2020-02-13T23:14:34Z
-1 votes
function convert() {
dom = document.getElementById('divname');
var script,
$this = this,
options = this.options,
runH2c = function(){
try {
var canvas = window.html2canvas([ document.getElementById('divname') ], {
onrendered: function( canvas ) {
window.open(canvas.toDataURL());
}
});
} catch( e ) {
$this.h2cDone = true;
log("Error in html2canvas: " + e.message);
}
};
if ( window.html2canvas === undefined && script === undefined ) {
} else {.
// html2canvas already loaded, just run it then
runH2c();
}
}
Seo Gregory answered 2020-02-13T23:14:49Z