Question

能够将常规元素临时转换为canvas非常有用。例如，假设我有一个我要翻转的样式div。我想动态创建一个画布，将HTMLElement“渲染”到画布中，隐藏原始元素并为画布设置动画。

可以吗？

Answer 1

有一个图书馆尝试做你说的话。

查看此示例并获取代码

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

从html中读取DOM并将其渲染到画布上，但在某些情况下会失败，但通常可以正常工作。

Answer 2

抱歉，浏览器不会将HTML呈现到画布中。

如果可以，这将是一个潜在的安全风险，因为HTML可以包含来自第三方网站的内容（特别是图像和iframe）。如果canvas可以将HTML内容转换为图像，然后您阅读图像数据，则可能会从其他网站中提取特权内容。

要从HTML获取画布，您必须使用drawImage和fillText从头开始编写自己的HTML渲染器，这是一项潜在的巨大任务。有one such attempt here但它有点狡猾，离完成还有很长的路要走。（它甚至尝试从头开始解析HTML / CSS，我认为这很疯狂！从应用了样式的真实DOM节点开始更容易，并使用getComputedStyle和部件的相对位置读取样式使用offsetTop et al。）

Answer 3

建立在natevw引用的Mozdev帖子之上我已经开始了一个小项目，在Firefox，Chrome和＆amp ;;苹果浏览器。例如，您可以这样做：

rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' 
                     + '<img src="local_img.png"/>', canvas);

源代码和更广泛的示例是here。

Answer 4

在 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图像呈现为画布元素。但是，以这种方式对SVG图像中包含的内容有很大的限制。 （有关详细信息，请参阅“安全性”部分。）

Answer 5

您可以使用dom-to-image库（我是维护者）以下是解决问题的方法：

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

And here is jsfiddle

Answer 6

没有这样的事，抱歉。

虽然规范说明：

2D上下文API的未来版本可以提供一种方法来渲染使用CSS渲染的文档片段，直接到画布。

可能会尽可能接近。

很多人都想要ctx.drawArbitraryHTML/Element种交易，但没有像这样的内置。

唯一的例外是Mozilla的独占drawWindow，它将DOM窗口内容的快照绘制到画布中。此功能仅适用于使用Chrome（仅限本地）权限运行的代码。普通的HTML页面不允许这样做。因此，您可以使用它来编写像this one does这样的FireFox扩展，但就是这样。

Answer 7

您可以免费转换，您可以使用CSS3 Transitions来翻转<div>和<ol>以及您想要的任何HTML标记。以下是一些有源代码解释的演示，可以查看和学习：http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

Answer 8

动画DOM元素的最简单的解决方案是使用CSS过渡/动画，但我认为你已经知道了，并且你尝试使用canvas来做CSS不允许你做的事情。那么CSS custom filters呢？如果您知道如何编写着色器，则可以以任何可想象的方式转换元素。其他一些link并且不要忘记查看CSS filter lab 注意：您可能认为浏览器支持不好。

Answer 9

下一个代码可用于2种模式，模式1将html代码保存到图像，模式2将html代码保存到画布。

此代码适用于库：uksort

*＆＃34; id_div＆＃34;是要转换的元素html的id。

**＆＃34; canvas_out＆＃34;是包含画布的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();   
    }

使用示例：

 <html>
 <head>
 </script src="/dom-to-image.js"></script>
 </head> 
 <body>
 <div id="container">
   All content that want to transform
  </div>
  <button onclick="Guardardiv('container');">Convert<button> 

 <!-- if use mode 2 -->
 <div id="canvas_out"></div>
 </html>

评论该工作。 Comenten si les sirvio：）

Answer 10

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

如何将HTML元素转换为canvas元素？

10 个答案: