Question

我想使用CSS来设置网页上的元素样式，然后将该元素用作静态png。是否可以在例如上绘制html节点。画布并以透明的方式保存这样的图像吗？

我想找到一种方法来使用CSS获取现有的HTML并将其呈现为保持透明度的PNG文件。

Answer 1

将HTML元素保存到图像需要复杂的答案！

首先，出于非常好的安全原因，浏览器不允许对HTML元素进行同页成像。想象一下，例如一个恶意脚本，它接收包含您的银行用户名+密码的HTML输入表单，并将其转换为图像并将图像发送给小偷 - 不好！

因此，IE只是阻止同一页面的HTML元素成像 - 句号。

Chrome和Firefox 可能仍有一项功能（错误？！），可让您将HTML元素转换为如下图像： 1.使用“foreignObject”将HTML元素嵌入到SVG元素中。 2.将SVG元素绘制到Canvas元素中。 3.使用canvas.toDataURL（'image / png'）获取表示png图像的编码字符串。

由于您可以控制HTML的样式，因此您可以通过使用像PhantomJs.org（phantomjs.org）这样的“无头”HTML生成器来获得完整的解决方案。您可以使用Phantomjs生成HTML元素并设置其样式。 PhantomJs然后有一个光栅化器，你可以用它将该元素转换成图像。另外，如果您可以提供一个包含仅所需样式化HTML的网页，那么这一行PhantomJs代码将为您提供该页面的一个页面：

phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png

Chrome / Firefox代码位于：https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

看起来像这样：

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

Answer 2

只是通过Safari找到了一种简单的方法。

右键单击元素，检查元素，然后在检查器中右键单击要导出的元素节点，然后选择“捕获截图”。这对我来说解决了透明性。 Safari版本13.1（14609.1.20.111.8）

Answer 3

是的，可以将HTML元素保存为图像（PNG文件）。参见

如何使用透明背景的画布获取CSS样式元素的png图像？

3 个答案: