Speichern von HTML-Elementen, um Bilder mit einer komplizierten Antwort erfordert!
Erstens, aus sehr guten Sicherheitsgründen erlauben Browser keine gleichseitige Imaging von HTML-Elementen. Stellen Sie sich zum Beispiel ein bösartiges Skript vor, das das HTML-Eingabeformular mit Ihrem Banking-Benutzernamen + Passwort annimmt und es in ein Bild umwandelt und das Bild an einen Dieb sendet - nicht gut!
Daher IE einfach Seite HTML-Element Bildgebung - Zeitraum zu blockieren.
Chrome und Firefox Macht haben noch eine Funktion (Bug ?!), die Sie HTML-Elemente in Bilder wie diese drehen erlaubt: 1. einbetten das HTML-Element in ein SVG-Element mit „foreign“. 2. Zeichnen Sie das SVG-Element in ein Canvas-Element. 3. Verwenden Sie canvas.toDataURL ('image/png'), um eine codierte Zeichenfolge zu erhalten, die das PNG-Bild darstellt.
Da es so aussieht, als hätten Sie die Kontrolle über das Formatieren des HTML, haben Sie möglicherweise eine vollständige Lösung, indem Sie einen "kopflosen" HTML-Generator wie PhantomJs.org (phantomjs.org) verwenden. Sie können Phantomjs zum Generieren und Stylen des HTML-Elements verwenden. PhantomJs verfügt dann über einen Rasterizer, mit dem Sie dieses Element in ein Bild konvertieren können. Plus, wenn Sie eine Webseite dienen kann, die enthält nur der Stil HTML Sie benötigen, dann ist diese 1 Zeile von PhantomJS Code erhalten Sie eine png dieser Seite:
phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png
Der Chrome/Firefox-Code ist https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
und sieht wie folgt aus: hier
<!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>
ich nehme an, Sie wissen bereits, wie ein HTML5-Canvas-Tag speichern als PNG-Datei (das transparente Pixel hat), und hoffen, etwas zu tun vergleichbar mit reinem HTML und CSS (savi ng des gerenderten HTML-Containers mit Transparenz als PNG-Datei). Ist das korrekt? –
Entschuldigung, ich habe deine Frage nicht gesehen. Ich werde die Frage aktualisieren. –