Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML][JavaScript]Zapis do pliku rysunku
Forum PHP.pl > Forum > Przedszkole
viamarimar
14.03.2015, 18:34:18
Potrzebuje informacji jak przerbic ten skrypt zeby stworzony obrazek zapisywac do obrazka np .jpg Bede bardzo wdzieczny jesli ktos mi z tym pomze:

[PHP] pobierz, plaintext 
  1.     <?xml version="1.0" encoding="iso-8859-2"?>
  2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.     <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.     <meta http-equiv="Content-type" content="text/html;
  7.     charset=iso-8859-2" />
  8.     <meta name="Author" content="lockoom" />
  9.     <meta name="Authoring_tool" content="CS Pajączek 2000 PRO
  10.     v4.8.1" />
  11.     <title></title>
  12.     <style type="text/css">
  13.     <!--
  14.     td {
  15.        overflow: hidden;
  16.        font-size: 0px;
  17.        color: white;
  18.        /* tutaj wpisz wysokosc i szerokosc pojedynczej komorki tabeli */
  19.        height: 10px;
  20.        width: 10px
  21.     }
  22.     -->
  23.     </style>
  24.     <script type="text/javascript" language="JavaScript">
  25.     <!--
  26.     // tu podaj liczbe wierszy i kolumn tabeli oraz domyslny kolor olowka i papieru
  27.     rows = 20;
  28.     cols = 20;
  29.     pencilColor = "#000000";
  30.     paperColor = "#ffffff";
  31.  
  32.     // kilka zmiennych pomocniczych
  33.     cells = rows * cols;
  34.     doc = window.document;
  35.     el = doc.all ? doc.all : doc.getElementsByTagName("*");
  36.  
  37.     // f. ustawiajaca zdarzenie onMouseOver dla komorek tabeli oraz kolor
  38.     "papieru"
  39.     function init(){
  40.        draw = false;
  41.        el["paper"].style.background = paperColor;
  42.        for (i = 0; i < cells; i++){
  43.           n = "cell" + i;
  44.           el[n].onmouseover = function(){
  45.              if(draw) this.style.background = pencilColor;
  46.           }
  47.           el[n].onclick = function(){
  48.        if(draw){
  49.                 draw = false;
  50.        }
  51.        else{
  52.            draw = true;
  53.                 this.style.background = pencilColor;
  54.        }
  55.           }
  56.        }
  57.     }
  58.  
  59.     // f. czyszczaca papier
  60.     function clr(){
  61.        for (i = 0; i < cells; i++){
  62.           n = "cell" + i;
  63.           el[n].style.background = paperColor;
  64.        }
  65.     }
  66.     // -->
  67.     </script>
  68.     </head>
  69.     <body onLoad="init();">
  70.  
  71.     <b>Lewy klik rozpoczyna i kończy rysowanie.</b>
  72.        <table border="1" cellpadding="0"
  73.     cellspacing="0" id="paper">
  74.           <script type="text/javascript"
  75.     language="JavaScript">
  76.           <!--
  77.              // ten skrypcik rysuje tabele na podstawie podanej ilosci kolumn i wierszy
  78.              for(i = 0, n = 0; i < rows; i++){
  79.                 doc.write("<tr>");
  80.                 for(j = 0; j < cols; j++, n++){
  81.                    doc.write("<td id='cell", n, "'>.</td>");
  82.                 }
  83.                 doc.write("</tr>");
  84.              }
  85.           // -->
  86.           </script>
  87.  
  88.        </table>
  89.        Wybierz kolor pisaka:
  90.        <select onchange="pencilColor = this.value"
  91.     name="color">
  92.           <option value="#000000"
  93.     selected="selected">Czarny</option>
  94.           <option value="#ffffff">Biały</option>
  95.           <option value="#ff0000">Czerwony</option>
  96.           <option value="#008000">Zielony</option>
  97.           <option value="#0000ff">Niebieski</option>
  98.           <option value="#ffff00">Żółty</option>
  99.           <option value="#00ff00">Jasnozielony</option>
  100.           <option value="#00ffff">Turkusowy</option>
  101.        </select> <br>
  102.        Wybierz kolor papieru:
  103.        <select onchange="paperColor = this.value; clr()"
  104.     name="color">
  105.           <option value="#000000">Czarny</option>
  106.           <option value="#ffffff"
  107.     selected="selected">Biały</option>
  108.           <option value="#ff0000">Czerwony</option>
  109.           <option value="#008000">Zielony</option>
  110.           <option value="#0000ff">Niebieski</option>
  111.           <option value="#ffff00">Żółty</option>
  112.           <option value="#00ff00">Jasnozielony</option>
  113.           <option value="#00ffff">Turkusowy</option>
  114.        </select> <br>
  115.        <input type="button" value="Wyczyść"
  116.     onClick="clr();">
  117.     </body>
  118.     </html>
[PHP] pobierz, plaintext
com
15.03.2015, 23:47:08
AJAX i zapis w php
Tuminure
16.03.2015, 13:09:43
html2canvas wystarczy, jeżeli obrazek ma być generowany tylko dla użytkownika i nie ma być wysyłany na serwer.

Choć osobiście to przerobiłbym całe to rysowanie na canvas i byłoby znacznie prościej wink.gif.
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.