1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| var aplicacionweb = aplicacionweb || {};
aplicacionweb.savePNGs = (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('canvas');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// request complete
if (xhr.readyState == 4) {
window.open("signature/"+xhr.responseText,'_blank');
}
}
xhr.open('POST','error.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 aplicacionweb.savePNGs().init();
}; |
Partager