javascript 如何使用具有透明背景的画布获取 CSS 样式元素的 png 图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14959367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get png image of a CSS styled element using canvas with transparent background?
提问by ?ukasz
I want to use CSS to style an element on a webpage and then to use that element as a static png. Is it possible to draw html node on eg. canvas and save such image with transparency to a file?
我想使用 CSS 为网页上的元素设置样式，然后将该元素用作静态 png。是否可以在例如上绘制 html 节点。画布并将这样的透明图像保存到文件中？
I want to find a way to take already existing HTML with CSS and render it to PNG file keeping transparency.
我想找到一种使用 CSS 获取现有 HTML 并将其呈现为 PNG 文件并保持透明度的方法。
回答by markE
Saving HTML elements to images requires a Complicated Answer!
将 HTML 元素保存到图像需要一个复杂的答案！
First, for very good security reasons, browsers do not to allow same-page imaging of HTML elements. Imagine for example a malicious script that takes the HTML input form containing your banking username+password and converts it to an image and sends the image to a thief—not good!
首先，出于非常好的安全原因，浏览器不允许 HTML 元素的同页图像。例如，想象一个恶意脚本，它采用包含您的银行用户名+密码的 HTML 输入表单并将其转换为图像并将图像发送给小偷——不好！
Therefore, IE simply block same page HTML element imaging--period.
因此，IE 只是简单地阻止同一页面的 HTML 元素成像——周期。
Chrome and Firefox mightstill have a feature (bug?!) that allows you to turn HTML elements into images like this: 1. Embed the HTML element into an SVG element using "foreignObject". 2. Draw the SVG element into a Canvas element. 3. Use canvas.toDataURL(‘image/png') to get an encoded string representing the png image.
Chrome 和 Firefox可能仍然有一个功能（错误？！）允许您将 HTML 元素转换为图像，如下所示： 1. 使用“foreignObject”将 HTML 元素嵌入到 SVG 元素中。2. 将SVG元素绘制成Canvas元素。3. 使用 canvas.toDataURL('image/png') 获取表示 png 图像的编码字符串。
Since it looks like you are in control of styling the HTML, you might have a full solution by using a “headless” HTML generator like PhantomJs.org (phantomjs.org). You can use Phantomjs to generate and style the HTML element. PhantomJs then has a rasterizer you can use to convert that element into an image. Plus, If you can serve up a web page that contains onlythe styled HTML you need, then this 1 line of PhantomJs code will get you a png of that page:
由于看起来您可以控制 HTML 的样式，因此您可能会通过使用“无头”HTML 生成器（如 PhantomJs.org (phantomjs.org)）来获得完整的解决方案。您可以使用 Phantomjs 生成 HTML 元素并为其设置样式。然后 PhantomJs 有一个光栅化器，您可以使用它将该元素转换为图像。另外，如果您可以提供一个仅包含您需要的样式化 HTML 的网页，那么这 1 行 PhantomJs 代码将为您提供该页面的 png：
phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png
The Chrome/Firefox code is found here: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
Chrome/Firefox 代码可在此处找到：https: //developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
And looks like this:
看起来像这样：
<!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>
回答by powtac
Yes it is possible to save a HTML element as image (PNG file). See
是的，可以将 HTML 元素保存为图像（PNG 文件）。看
回答by PEZO
Just found an easy way via Safari.
刚刚通过 Safari 找到了一个简单的方法。
Right click on element, Inspect Element, then in the Inspector right click on the element node you want to export and pick Capture Screenshot. This to me resolves transparency. Safari Version 13.1 (14609.1.20.111.8)
右键单击元素，检查元素，然后在检查器中右键单击要导出的元素节点并选择捕获屏幕截图。这对我来说解决了透明度。Safari 版本 13.1 (14609.1.20.111.8)
