從HTML創建base64字符串

我需要從HTML頁面中的特定DIV製作截圖。我試圖用這個庫 - http://html2canvas.hertzen.com/從HTML創建base64字符串

html2canvas($(".element"), { 
    onrendered: function(canvas) { 
     console.log(canvas.toDataURL('image/jpeg')); 
    } 
});

但它也有一些CSS的東西（文字陰影爲例）問題和一些文本沒有看起來很不錯。而且圖片看起來有點模糊。

有沒有其他解決方案？

我的DIV包含背景圖片和文字。我考慮過使用PHP GD庫打開該背景圖片並在其上放置文本，但是又出現了文字陰影，我不知道該怎麼做。

這使得文字陰影的CSS是這樣的：

text-shadow: 0px 1px 0px rgba(0,0,0,0.2);

來源

2013-07-25 DoubleT

當你說圖片「看起來有點模糊」 - 你將它轉換爲JPEG而不指定質量。你嘗試過'canvas.toDataURL（'image/jpeg'，1）;'？ - 質量參數範圍從0到1，不確定默認值是多少，但它會接近0.8（有損）。嘗試了 – Emissary

HTML5畫布對文本陰影http://www.html5rocks.com/en/tutorials/canvas/texteffects/

庫支持你使用可能只是不正確地支持它，或者它不搜索CSS。

如果您共享DIV標記和CSS，則可能會達到硬編碼（特定）解決方案。

另一種方式去使用像http://browsershots.org

屏幕截圖Web服務，您將創建一個最小的HTML文件，該文件只包含您想要的CSS和DIV並保存（與PHP）到您的網頁目錄。然後，您會將該網址傳遞給網絡服務，並獲得圖像（屏幕截圖）作爲迴應。

來源

2013-07-25 12:36:13

也許我會嘗試在畫布上自己重新創建DIV，然後將其解析爲.toDataURL（）; – DoubleT

我終於讓它有點不同了。我做了自定義畫布，並填充了我從AJAX獲得的數據。畫布支持所有陰影和東西。 $（'＃bigCard'）。html（$（''））; var canvas = $（「＃anniversary」）[0]; var context = canvas。的getContext（ '2D'）; var base_image = new Image（）; base_image.src ='禮物/ img/bigcard/bigCard100.png'; context.drawImage（base_image，0，0）; //在這裏我把所有的文字在圖片上 – DoubleT

@ user1199899 - 很高興你有一個解決方案 –

我在幾個月前做了這樣的事情。我用這個庫：

http://www.nihilogic.dk/labs/canvas2image/

它易於使用，並做了工作。我希望它有幫助。

來源

2013-07-25 12:24:28 David

html2canvas並不真正採用實際的屏幕截圖，而是使用畫布重新創建了html元素的外觀。這就是爲什麼它不正確（陰影等）。

的模糊是最有可能是由於您在保存圖像爲JPEG，嘗試改爲爲png：

canvas.toDataURL('image/png')

來源

2013-07-25 12:31:17 Strille

，仍然很糟糕。 – DoubleT

從HTML創建base64字符串

回答

相關問題