Voglio usare CSS per disegnare un elemento in una pagina web e quindi usare quell'elemento come un png statico. È possibile disegnare il nodo html su es. tela e salvare tale immagine con trasparenza in un file?Come ottenere l'immagine png di un elemento in stile CSS utilizzando la tela con sfondo trasparente?
Desidero trovare un modo per prendere l'HTML già esistente con CSS e renderlo in file PNG mantenendo la trasparenza.
Salvataggio elementi HTML per le immagini richiede una risposta complicata!
Innanzitutto, per ragioni di sicurezza molto buone, i browser non consentono l'imaging della stessa pagina di elementi HTML. Immagina ad esempio uno script dannoso che prende il modulo di input HTML contenente il tuo nome utente + password bancario e lo converte in un'immagine e invia l'immagine a un ladro - non va bene!
Pertanto, IE semplicemente blocca la stessa immagine HTML elemento di imaging - periodo.
Chrome e Firefox forza hanno ancora una funzione (bug ?!), che permette di trasformare gli elementi HTML in immagini come questa: 1. Inserire l'elemento HTML in un elemento SVG usando "foreignObject". 2. Disegnare l'elemento SVG in un elemento Canvas. 3. Usa canvas.toDataURL ('image/png') per ottenere una stringa codificata che rappresenta l'immagine png.
Poiché sembra che tu abbia il controllo dello stile dell'HTML, potresti avere una soluzione completa utilizzando un generatore HTML "senza testa" come PhantomJs.org (phantomjs.org). È possibile utilizzare Phantomjs per generare e modificare l'elemento HTML. PhantomJs ha quindi un rasterizzatore che puoi usare per convertire quell'elemento in un'immagine. Inoltre, se si può servire una pagina web che contiene solo il codice HTML in stile avete bisogno, quindi 1 riga di codice PhantomJs otterrà un png di quella pagina:
phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png
Il codice di Chrome/Firefox è trovato qui: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
e si presenta come questo:
<!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>
Grazie mille per la tua fantastica risposta. PhantomJS è qualcosa che stavo cercando - ho avuto l'idea di usare il webkit per rendere questi elementi con css e sono davvero felice che qualcuno lo abbia già fatto;) Purtroppo ci sono problemi con il rendering delle ombre, il che è molto problematico per me, ma spero per risolvere questo problema con i ragazzi di PhantomJs.L'uso del trucco svg non supporta affatto le ombre, almeno utilizzando Chrome. –
Non vedo come l'argomento sicurezza tenga in considerazione, dal momento che uno script dannoso può semplicemente inviare tutti i valori del modulo a un ladro. Trasformarlo prima in un'immagine non è necessario e sarebbe scomodo. – towr
@towr Al momento, IE era pieno di vulnerabilità di "buffer overflow" - e canvas era un punto di accesso per sfruttare questa vulnerabilità. Ma in generale, pensa a tutte le tue cose private e sensibili che vedi nel tuo browser e poi pensa a qualcuno che è in grado di guardare oltre le tue spalle e vedere anche quelle cose. – markE
Sì, è possibile salvare un elemento HTML come immagine (file PNG). Vedi
Grazie a powtac, catturare la tela non è un problema centrale qui. Il problema è il rendering di elementi dom su tela. –
che sto supponendo che si sa già come salvare un tag canvas HTML5 (che ha pixel trasparenti) come file PNG, e sperano di fare qualcosa comparabile usando semplici HTML e CSS (savi ng il contenitore HTML reso, con trasparenza, come file PNG). È corretto? –
Scusa, non ho visto la tua domanda. Aggiornerò la domanda –