如何将 html 元素保存为 png

Question

不是重复的，因为我需要转换成 html canvas，而不是从一个

我正在开发一个在屏幕上显示一些元素的网站。

我需要能够在 png

中捕获 <div> 的内容

我已经尝试了一些 chrome 扩展，但 none 不幸地工作了

            <style type="text/css">
            * {
                margin: 0px 0px;
                padding: 0px 0px;
            }
            #box {
                background: #FFFF00;
                width: 100px;
                height: 50px;
            }
            </style>
            <div id="box">
            This is my box :)
            </box>

Answer 1

html2canvas可以帮到你。

来自官网：

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

html2canvas(document.getElementById('box'), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 400,
  height: 400
});

单击 here 查看一些实例。

如何将 html 元素保存为 png

How to save a html element as a png

html

javascript

css

png