如何使用具有透明背景的画布获取 CSS 样式元素的 png 图像？
[英]How to get png image of a CSS styled element using canvas with transparent background?
问题描述
I want to use CSS to style an element on a webpage and then to use that element as a static png.
我想使用 CSS 为网页上的元素设置样式，然后将该元素用作静态 png。 Is it possible to draw html node on eg.是否可以在例如上绘制 html 节点。 canvas and save such image with transparency to a file?画布并将这样的透明图像保存到文件中？
I want to find a way to take already existing HTML with CSS and render it to PNG file keeping transparency.我想找到一种方法来使用 CSS 获取现有的 HTML 并将其呈现为保持透明度的 PNG 文件。
3 个解决方案
解决方案1
10 已采纳 2013-02-19 18:40:45
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.首先，出于非常好的安全原因，浏览器不允许 HTML 元素的同页图像。 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 输入表单并将其转换为图像并将图像发送给小偷——不好！
Therefore, IE simply block same page HTML element imaging--period.因此，IE 只是简单地阻止同一页面的 HTML 元素成像——周期。
Chrome and Firefox might still 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". Chrome 和 Firefox可能仍然有一个功能（错误？！）允许您将 HTML 元素转换为图像，如下所示： 1. 使用“foreignObject”将 HTML 元素嵌入到 SVG 元素中。 2. Draw the SVG element into a Canvas element. 2. 将SVG 元素绘制成Canvas 元素。 3. Use canvas.toDataURL('image/png') to get an encoded string representing the png image. 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).由于看起来您可以控制 HTML 的样式，因此您可能会通过使用“无头”HTML 生成器（如 PhantomJs.org (phantomjs.org)）来获得完整的解决方案。 You can use Phantomjs to generate and style the HTML element.您可以使用 Phantomjs 生成 HTML 元素并为其设置样式。 PhantomJs then has a rasterizer you can use to convert that element into an image.然后 PhantomJs 有一个光栅化器，您可以使用它将该元素转换为图像。 Plus, If you can serve up a web page that contains only the styled HTML you need, then this 1 line of PhantomJs code will get you a png of that page:另外，如果您可以提供一个仅包含您需要的样式化 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>
解决方案2
1 2020-05-24 16:00:02
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)
解决方案3
0 2013-02-19 15:17:34
Yes it is possible to save a HTML element as image (PNG file).是的，可以将 HTML 元素保存为图像（PNG 文件）。 See看
- Capture HTML Canvas as gif/jpg/png/pdf? 将 HTML Canvas 捕获为 gif/jpg/png/pdf？
- how to save canvas as png image? 如何将画布保存为png图像？
- HTML5 Save canvas to PNG HTML5 将画布保存为 PNG
- Drawing PNG to a canvas element -- not showing transparency 将 PNG 绘制到画布元素 - 不显示透明度
- http://asserttrue.blogspot.de/2011/12/in-yesterdays-post-i-showed-how-to.html http://asserttrue.blogspot.de/2011/12/in-yesterdays-post-i-showed-how-to.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.