如何使用透明背景的画布获得CSS样式元素的png图像？ [英] How to get png image of a CSS styled element using canvas with transparent background?
问题描述
我想使用CSS为网页上的元素设计样式，然后将该元素用作静态png。是否可能在eg上绘制html节点。
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已经存在的HTML，并将其渲染为PNG文件以保持透明度。
I want to find a way to take already existing HTML with CSS and render it to PNG file keeping transparency.
推荐答案
将HTML元素保存到图像需要复杂的答案！
Saving HTML elements to images requires a Complicated Answer!
为了非常好的安全原因，浏览器不允许HTML元素的同页成像。想象一下，例如一个恶意脚本，它接受包含您的银行用户名+密码的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!
因此，IE只是简单地阻止相同页面的HTML元素成像 - 周期。
Therefore, IE simply block same page HTML element imaging--period.
Chrome和Firefox 可能仍然有一个功能允许您将HTML元素转换为如下所示的图像：
1.使用foreignObject将HTML元素嵌入到SVG元素中。
2.将SVG元素绘制到Canvas元素中。
3.使用canvas.toDataURL（'image / png'）获取表示png图像的编码字符串。
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". 2. Draw the SVG element into a Canvas element. 3. Use canvas.toDataURL(‘image/png’) to get an encoded string representing the png image.
由于它看起来像是在控制的样式化HTML，你可能有一个完整的解决方案，通过使用无头的HTML生成器，如PhantomJs.org（phantomjs.org）。您可以使用Phantomjs生成HTML样式的元素。 PhantomJs然后有一个光栅化器，你可以使用将该元素转换为图像。此外，如果您可以投放一个包含仅所需样式的HTML的网页，那么这一行PhantomJs代码将为您提供一个页面：
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 only the styled HTML you need, then this 1 line of PhantomJs code will get you a png of that page:
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
The Chrome/Firefox code is found here: 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>
这篇关于如何使用透明背景的画布获得CSS样式元素的png图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
