7

我想使用 CSS 为网页上的元素设置样式，然后将该元素用作静态 png。是否可以在例如上绘制 html 节点。画布并将此类具有透明度的图像保存到文件中？

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

4

3 回答 3

10

将 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 的网页，那么这 1 行 PhantomJs 代码将为您提供该页面的 png：

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>
于 2013-02-19T18:40:45.417 回答
2

刚刚通过 Safari 找到了一个简单的方法。

右键单击元素，检查元素，然后在检查器中右键单击要导出的元素节点并选择捕获屏幕截图。这对我来说解决了透明度问题。Safari 版本 13.1 (14609.1.20.111.8)

在此处输入图像描述

于 2020-05-24T16:00:02.157 回答