This can be done with a <canvas>.
A <canvas> tag creates a matrix of pixels of the given (width, height:
pixels) dimensions.
You could "sign" in it by drawing while tracking the mouse movements.
And, the drawing can be converted to an image ( .png or .jpg ) by
the .toDataUrl() method.
HTH,
--Jorge.
I've been working on something similar, but so far it only works in
FF. Opera 9, Safari 3 and IE (using excanvas) it does not work. No
errors, just nothing get drawn. Maybe someone can look and tell me
what's wrong.
The Test button renders the test code (from the Mozilla canvas site)
but the mouse will only draw no the canvas in FF.
<html>
<head>
<title>Signature Test</title>
<!-- Canvas implementation for IE -->
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript">
/** Initialize canvas, assigning event handlers. */
function init() {
var canvas = document.getElementById("signature");
canvas.started = false;
canvas.onmousedown = function(event) {
var ctx = this.getContext("2d");
var pos = getMousePositionInElement(this, event);
ctx.beginPath(pos.x, pos.y);
this.started = true;
}
canvas.onmouseup = function(event) {
if (this.started) {
var ctx = this.getContext("2d");
var pos = getMousePositionInElement(this, event);
ctx.stroke();
ctx.closePath();
this.started = false;
}
}
canvas.onmousemove = function(event) {
if (this.started) {
var ctx = this.getContext("2d");
var pos = getMousePositionInElement(this, event);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
}
}
/** Retrieves elements position on the screen. */
function getElementPosition(element) {
var posX = element.offsetLeft;
var posY = element.offsetTop;
try {
while(element.offsetParent){
posX += element.offsetParent.offsetLeft;
posY += element.offsetParent.offsetTop;
if(element == document..getElementsByTagName('body')[0]){
break
}
else{
element = element.offsetParent;
}
}
}
catch(e) {
alert(e.message);
}
var dims = new Array(0);
dims['x'] = posX;
dims['y'] = posY;
return dims;
}
/** Retrieves the current mouse location relative to the bounds of
the given element. */
function getMousePositionInElement(element, e) {
var elementPosition = getElementPosition(element);
var mousePosition = getMousePosition(e);
var x = mousePosition.x - elementPosition.x;
var y = mousePosition.y - elementPosition.y;
var position = new Array();
position['x'] = x;
position['y'] = y;
return position;
}
/** Gets the mouse location in reference to the page. */
function getMousePosition(e) {
var x = (window.event) ? window.event.clientX : e.pageX;
var y = (window.event) ? window.event.clientY : e.pageY;
var mousePosition = new Array();
mousePosition['x'] = x;
mousePosition['y'] = y;
return mousePosition;
}
function test() {
var canvas = document.getElementById('signature');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(5, 5, 25, 25);
ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 25, 25);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.moveTo(120,50);
ctx.lineTo(150,70);
ctx.lineTo(150,50);
ctx.quadraticCurveTo(150, 150, 80, 80);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.rect(180,180,80,80);
ctx.rect(200,200,80,80);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();
ctx.save();
ctx.translate(150, 0);
ctx.fillRect(0,0,150,150);
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.fillRect(45,45,60,60);
ctx.fillRect(60,60,30,30);
ctx.restore();
ctx.save();
ctx.translate(10, 140);
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.2;
for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
ctx.fill();
}
ctx.restore();
ctx.beginPath();
ctx.arc(200, 200, 20, 0, Math.PI*2, true);
ctx.stroke();
ctx.save();
ctx.globalAlpha = 1.0;
//ctx.translate(75,75);
for (i=1;i<6;i++){ // Loop through rings (from inside toout)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.rect(0,i*12.5,5,5);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
}
</script>
</head>
<body onload="init();">
<div style="width: 500px; height: 150px; border: 1px solid
black;">
<canvas id="signature" width="498" height="148"></canvas>
</div>
<input type="button" value="Test" onclick="test();"/>
</body>
</html>
Any help would be appreciated.- Hide quoted text -
- Show quoted text -