Mam taki kod na rysowanie oparty o js i teraz pytanie jak wygenerowac z tego obrazek jpg/png
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-2" />
<meta name="Author" content="lockoom" />
<meta name="Authoring_tool" content="CS Pajączek 2000 PRO
v4.8.1" />
<title></title>
<style type="text/css">
<!--
td {
overflow: hidden;
font-size: 0px;
color: white;
/* tutaj wpisz wysokosc i szerokosc pojedynczej komorki tabeli */
height: 10px;
width: 10px
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
// tu podaj liczbe wierszy i kolumn tabeli oraz domyslny kolor olowka i papieru
rows = 20;
cols = 20;
pencilColor = "#000000";
paperColor = "#ffffff";
// kilka zmiennych pomocniczych
var cells = rows * cols;
var doc = window.document;
var el = doc.all ? doc.all : doc.getElementsByTagName("*");
// f. ustawiajaca zdarzenie onMouseOver dla komorek tabeli oraz kolor
"papieru"
function init(){
draw = false;
el["paper"].style.background = paperColor;
for (i = 0; i < cells; i++){
n = "cell" + i;
el[n].onmouseover = function(){
if(draw) this.style.background = pencilColor;
}
el[n].onclick = function(){
if(draw){
draw = false;
}
else{
draw = true;
this.style.background = pencilColor;
}
}
}
}
// f. czyszczaca papier
function clr(){
for (i = 0; i < cells; i++){
n = "cell" + i;
el[n].style.background = paperColor;
}
}
// -->
</script>
</head>
<body onLoad="init();">
<b>Lewy klik rozpoczyna i kończy rysowanie.</b>
<table border="1" cellpadding="0"
cellspacing="0" id="paper">
<script type="text/javascript"
language="JavaScript">
<!--
// ten skrypcik rysuje tabele na podstawie podanej ilosci kolumn i wierszy
for(i = 0, n = 0; i < rows; i++){
doc.write("<tr>");
for(j = 0; j < cols; j++, n++){
doc.write("<td id='cell", n, "'>.</td>");
}
doc.write("</tr>");
}
// -->
</script>
</table>
Wybierz kolor pisaka:
<select onchange="pencilColor = this.value"
name="color">
<option value="#000000"
selected="selected">Czarny</option>
<option value="#ffffff">Biały</option>
<option value="#ff0000">Czerwony</option>
<option value="#008000">Zielony</option>
<option value="#0000ff">Niebieski</option>
<option value="#ffff00">Żółty</option>
<option value="#00ff00">Jasnozielony</option>
<option value="#00ffff">Turkusowy</option>
</select> <br>
Wybierz kolor papieru:
<select onchange="paperColor = this.value; clr()"
name="color">
<option value="#000000">Czarny</option>
<option value="#ffffff"
selected="selected">Biały</option>
<option value="#ff0000">Czerwony</option>
<option value="#008000">Zielony</option>
<option value="#0000ff">Niebieski</option>
<option value="#ffff00">Żółty</option>
<option value="#00ff00">Jasnozielony</option>
<option value="#00ffff">Turkusowy</option>
</select> <br>
<input type="button" value="Wyczyść"
onClick="clr();">
</body>
</html>
Znalazlem taka funkcje do zapisu oparta o js, tylko teraz nie wiem jak to polaczyc.
<script>
function uploadEx() {
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL("image/png");
document.getElementById('hidden_data').value = dataURL;
var fd = new FormData(document.forms["form1"]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'wykonaj.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
alert('Succesfully uploaded');
}
};
xhr.onload = function() {
};
xhr.send(fd);
};
</script>
oraz plik wykonaj
<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
Dodatkowo mialem prawdopodobnie uzyc czegos takiego jak pobieranie kolumn i wierszy do czego mam taka pentle:
var result = [];
for(var i = 0, rows = table.rows; i < rows.length; ++i)
{
var row = rows[i];
result[i] = [];
for(var j = 0, cells = row.getElementsByTagName('td'); j < cells.length; ++i)
{
var cell = cells[j];
result[i][j] = getComputedStyle(cell)['background-color'];
}
}
Niestety nie bardzo umiem js, a potrzebna mi taka rzecz.
Bede wdzieczny jesli ktos pomoze mi ktos to skleic w calosc lub wskaze droge jak to zrobic. Jesli na internecie sa jakies turoiale jak wykonac taka czynnosc to tez bede wdzieczny.(nie chodzi tu o kursy js)
dodanie znaczników <code class="javascript"> i <code class="php">
- @furious programming