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

Question

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

Łuk*_*asz 6 javascript html5 canvas

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

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

Answer 1

mar*_*rkE 9

将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代码将为您提供该页面的png:

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	11751 次
最近记录：	13 年，3 月前