Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]html2canvas zapis obrazka do pliku
Forum PHP.pl > Forum > Przedszkole
lekosm2
Witam, używam classy html2canvas aktualnie mój kod wygląda tak:
  1. <div id="target">Tutaj kod strony</div>
  2.  
  3. <script type="text/javascript" src="dist/html2canvas.js"></script>
  4. <script type="text/javascript">
  5. //window.takeScreenShot = function() {
  6. var widthDiv = document.getElementById("target").offsetWidth;
  7. var heightDiv = document.getElementById("target").offsetHeight;
  8.  
  9. html2canvas(document.getElementById("target"), {
  10. onrendered: function (canvas) {
  11. document.body.appendChild(canvas);
  12. },
  13. width: widthDiv,
  14. height: heightDiv,
  15. allowTaint: true,
  16. letterRendering: true
  17. });
  18. //}
  19. </script>


Chciałbym zrobić, tak by obrazek nie wyświetlał się na dole strony, a zapisywał na serwerze jako obrazek pod nazwą "screen.png". W jaki sposób mogę to zrobić?
Tomplus
Poczytaj o AJAX, przesyłaniu danych do pliku PHP, bo m.in. dzięki PHP przesłany string możesz zapisać jako plik na serwerze. Java Script działa po stronie przeglądarki, więc nie może nic zapisywać na serwerze.
lekosm2
Zrobiłem tak, ale generuje mi biały obraz..
  1. <script type="text/javascript">
  2. //window.takeScreenShot = function() {
  3. var widthDiv = document.getElementById("target").offsetWidth;
  4. var heightDiv = document.getElementById("target").offsetHeight;
  5.  
  6. html2canvas(document.getElementById("target"), {
  7. onrendered: function (canvas) {
  8. //document.body.appendChild(canvas);
  9.  
  10. var img = canvas.toDataURL("image/png");
  11.  
  12. var output = img.replace(/^data:image\/(png|jpg);base64,/, "");
  13.  
  14. var Parameters = "image=" + output;
  15. $.ajax({
  16. type: "POST",
  17. url: "save.php",
  18. data: Parameters,
  19. success : function(data)
  20. {
  21. console.log(data);
  22. }
  23. }).done(function() {
  24. });
  25. },
  26. width: widthDiv,
  27. height: heightDiv,
  28. allowTaint: true,
  29. letterRendering: true
  30. });
  31. //}
  32. </script>


Plik save.php
  1. <?php
  2. $image = $_POST['image'];
  3.  
  4. $name = time();
  5.  
  6. $decoded = base64_decode($image);
  7.  
  8. file_put_contents('image.png', $decoded, LOCK_EX);
  9.  
  10.  
  11. echo $name;
  12. ?>


Powie mi ktoś, gdzie jest błąd?
Niree
No ale coś masz w tym pliku, czy nic się nie wrzuca? Nadałeś chmody w ogóle?
lekosm2
Tworzy się plik graficzny ale ma białe tło nic poza tym.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.