Tengo un formulario html5, con un sitio donde dibujar que me baje de una web.
La idea, es pasar estos datos a javascript, de hay a php y subirlos a mysql.
os pongo los archivos a ver si me podeis ayudar.
Gracias
El html es este
Código:
el javascript<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MobileOptimized" content="width" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h3>Introducir Aceite y Filtros</h3>
<?php if ($status == "ok") { ?>
<p class="confirm">Registro guardado correctamente</p>
<?php } ?>
<form method="post" id="frEmpresa" >
<label for="nombre">Cliente</label>
<input type="number" id="nombre" name="nombre" />
<br />
<label for="direccion">Aceite</label>
<input type="number" id="aceite" name="aceite" />
<br />
<label for="filtro">Filtros</label>
<input type="number" id="filtro" name="filtro" />
</br>
<canvas id="canvas" width="300" height="200"></canvas>
<div class="gui">
<input type="color" id="color" value="#FF9200">
<button id="bt-clear">CLEAR</button>
<button id="bt-save">SAVE</button>
</div>
<script src= "script/guardando-pngs.js"></script>
</body>
</html>
Código:
y el PHPvar tiemposcambian = tiemposcambian || {};
tiemposcambian.GuardandoPNGs = (function() {
var mousePressed = false;
var lastX, lastY;
var ctx;
function init() {
// init canvas
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
resetCanvas();
// button events
document.getElementById('bt-save').onmouseup = sendToServer;
document.getElementById('bt-clear').onmouseup = resetCanvas;
// canvas events
canvas.onmousedown = function(e) {
draw(e.layerX, e.layerY);
mousePressed = true;
};
canvas.onmousemove = function(e) {
if (mousePressed) {
draw(e.layerX, e.layerY);
}
};
canvas.onmouseup = function(e) {
mousePressed = false;
};
canvas.onmouseleave = function(e) {
mousePressed = false;
};
}
function draw(x, y) {
if (mousePressed) {
ctx.beginPath();
ctx.strokeStyle = document.getElementById('color').value;
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function sendToServer() {
var data = canvas.toDataURL('image/png');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// request complete
if (xhr.readyState == 4) {
}
}
xhr.open('POST','http://127.0.0.1/imagen/snapshot.php',true);
xhr.setRequestHeader('Content-Type', 'application/upload');
xhr.send(data);
}
function resetCanvas() {
// just repaint canvas white
ctx.fillStyle = '#EEEEEE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return {
'init': init
};
});
window.onload = function() {
new tiemposcambian.GuardandoPNGs().init();
};
Código:
La cuestion es, como paso ahora los datos de los input del formulario al PHP para poder subirlos a mysql // read input stream
$data = file_get_contents("php://input");
// filtering and decoding code adapted from
// http://stackoverflow.com/questions/11843115/uploading-canvas-context-as-image-using-ajax-and-php?lq=1
// Filter out the headers (data:,) part.
$filteredData=substr($data, strpos($data, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);
// store in server
$fic_name = 'snapshot'.date("His").'.png';
$fp = fopen('./snapshots/'.$fic_name, 'wb');
$ok = fwrite( $fp, $decodedData);
fclose( $fp );
