如何使用具有透明背景的畫布獲取png圖像的CSS樣式元素？

我想使用CSS來設計網頁上的元素，然後將該元素用作靜態PNG。是否有可能在例如。畫布和保存這樣的圖像透明度文件？如何使用具有透明背景的畫布獲取png圖像的CSS樣式元素？

我想找到一種方法來將CSS與現有的HTML一起呈現給PNG文件並保持透明。

2013-02-19 Łukasz

我假設你已經知道如何保存一個HTML5 canvas標籤（即具有透明像素）爲PNG文件，並希望做一些事情使用純HTML和CSS（savi將呈現的HTML容器與透明度一起作爲PNG文件）。那是對的嗎？ – 2013-02-19 15:27:39

對不起，我沒有看到你的問題。我會更新問題。 – 2013-02-20 01:19:02

保存HTML元素的圖像需要一個複雜的答案！

首先，出於非常好的安全性原因，瀏覽器不允許HTML元素的同頁成像。想象一下，例如一個惡意腳本，它將HTML輸入表單包含您的銀行用戶名和密碼，並將其轉換爲圖像並將圖像發送給小偷 - 這不太好！

因此，IE只是屏蔽同一頁面HTML元素的圖像 - 期間。

Chrome和Firefox 威力仍然有一個功能（錯誤？！），它允許你把HTML元素融入到這樣的圖片： 1.嵌入HTML元素到使用「foreignObject」 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-19 18:40:45 markE

非常感謝你的精彩回答。 PhantomJS是我正在尋找的東西 - 我有一個想法，使用WebKit呈現這些元素與CSS，我真的很高興有人已經這樣做;）不幸的是有渲染陰影的問題，這是非常成問題的，但我希望用PhantomJs傢伙解決這個問題。使用svg技巧根本不支持陰影 - 至少使用chrome。 – 2013-02-20 01:13:48

我不明白安全性參數如何保持水分，因爲惡意腳本可以將所有表單值發送給小偷。首先將其轉化爲圖像是不必要的，並且會很不方便。 – towr 2015-12-02 08:43:17

@towr當時，IE瀏覽器充斥着「緩衝區溢出」漏洞 - 並且canvas是利用此漏洞的一個接入點。但是總的來說，想想你在瀏覽器中看到的所有私人敏感的東西，然後想到有人能夠看到你的肩膀，並看到這些東西。 – markE 2015-12-02 15:03:46

是的，可以將HTML元素保存爲圖像（PNG文件）。見

來源

2013-02-19 15:17:34 powtac

謝謝powtac，捕捉畫布不是這裏的核心問題。問題是在畫布上渲染DOM元素。 – 2013-02-20 01:17:42

如何使用具有透明背景的畫布獲取png圖像的CSS樣式元素？

回答

相關問題