如何将html元素保存为png

Question

不是重复的，因为我需要转换为 html 画布，而不是来自一个

---

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

我需要能够在 png 中捕获 <div> 的内容

我尝试了一些 chrome 扩展，但不幸的是没有一个可以工作

            <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可以帮到你。

来自官方网站：

此脚本允许您对网页或部分内容进行“截图” 它，直接在用户浏览器上。截图基于 DOM 因此可能不是 100% 准确的真实表示，因为它 不做实际截图，而是根据截图构建 页面上可用的信息。

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

点击here查看一些实例。