Chcę użyć CSS do stylu elementu na stronie internetowej, a następnie użyć tego elementu jako statycznego png. Czy możliwe jest narysowanie html na np. płótno i zapisać taki obraz z przezroczystością do pliku?Jak uzyskać obraz png elementu CSS w stylu używając płótna z przezroczystym tłem?
Chcę znaleźć sposób na pobranie już istniejącego HTML z CSS i renderowanie go do pliku PNG zachowując przezroczystość.
oszczędzania elementy HTML do zdjęć wymaga skomplikowanej odpowiedź!
Po pierwsze, ze względów bezpieczeństwa, przeglądarki nie pozwalają na obrazowanie elementów HTML na tej samej stronie. Wyobraźmy sobie na przykład złośliwy skrypt, który pobiera formularz wejściowy HTML zawierający bankową nazwę użytkownika + hasło i konwertuje je na obraz i wysyła obraz do złodzieja - nie jest to dobre!
Dlatego IE po prostu blokuje obrazowanie elementu strony HTML - okres.
Chrome i Firefox potęga jeszcze fabularny (błąd ?!), który pozwala włączyć elementy HTML do zdjęć tak: 1. osadzenie elementu HTML do elementu SVG przy użyciu „foreignObject”. 2. Narysuj element SVG w elemencie Canvas. 3. Użyj canvas.toDataURL ("image/png"), aby uzyskać zakodowany ciąg reprezentujący obraz PNG.
Ponieważ wygląda na to, że masz kontrolę nad stylizowaniem kodu HTML, możesz mieć pełne rozwiązanie, używając "bezgłowego" generatora HTML, takiego jak PhantomJs.org (phantomjs.org). Możesz użyć Phantomjs do wygenerowania i stylizacji elementu HTML. PhantomJs ma następnie rasterizer, którego możesz użyć do przekonwertowania tego elementu na obraz. Plus, jeśli można służyć stronę internetową zawierającą tylko stylizowany HTML trzeba, to 1 linia kodu PhantomJs będzie Ci png tej strony:
phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png
Kod Chrome/Firefox znaleźć tutaj: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
a wygląda to tak:
<!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>
Dziękuję bardzo za fantastyczną odpowiedź. PhantomJS to coś, czego szukałem - wpadłem na pomysł wykorzystania webkita do renderowania tych elementów za pomocą css i naprawdę się cieszę, że ktoś już to zrobił;) Niestety są problemy z renderowaniem cieni, co jest dla mnie bardzo problematyczne, ale mam nadzieję rozwiązać ten problem z facetami PhantomJs.Używanie svg-trick nie obsługuje w ogóle cieni - przynajmniej przy użyciu chrome. –
Nie widzę, jak argument bezpieczeństwa zawiera wodę, ponieważ złośliwy skrypt może wysłać wszystkie wartości formularzy do złodzieja. Włączenie go do obrazu jest niepotrzebne i byłoby niewygodne. – towr
@ towr W czasie, IE był pełen błędów "przepełnienie bufora" - i płótno było jednym punktem dostępu do wykorzystania tej luki. Ale ogólnie rzecz biorąc, pomyśl o wszystkich swoich prywatnych i delikatnych rzeczach, które przeglądasz w przeglądarce, a potem pomyśl o tym, że ktoś może spojrzeć przez ramię i zobaczyć te rzeczy. – markE
Tak, można zapisać element HTML jako obraz (plik PNG). Zobacz
Dziękuję powtac, przechwytywanie płótna nie jest tutaj głównym problemem. Problem polega na renderowaniu elementów dom na płótnie. –
ja zakładając, że już wie, jak uratować znacznika canvas HTML5 (który posiada przezroczyste piksele) w postaci pliku PNG, i mamy nadzieję zrobić coś porównywalne za pomocą zwykłego HTML i CSS (savi ng renderowanego kontenera HTML, z przezroczystością, jako plik PNG). Czy to jest poprawne? –
Niestety, nie widziałem twojego pytania. Zaktualizuję pytanie. –