【问题标题】:How to save a html element as a png如何将html元素保存为png
【发布时间】:2016-08-17 21:56:25
【问题描述】:

不是重复的,因为我需要转换为 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>

【问题讨论】:

标签: javascript html css png


【解决方案1】:

html2canvas可以帮到你。

来自官方网站:

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

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

点击here查看一些实例。

【讨论】:

  • 这可以完成基本工作,但是当我将它与 Google Charts 一起使用时,我会收到图像的消息升级版本。我正在寻找的是一种可以剪辑元素并将它们变成画布的剪辑工具。
猜你喜欢
  • 2011-06-07
  • 1970-01-01
  • 2011-11-27
  • 2014-07-30
  • 1970-01-01
  • 2018-01-04
  • 1970-01-01
  • 2012-07-11
  • 2019-11-11
相关资源
最近更新 更多