I need to be able to create a javascript based drawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
15  4004 
On Jun 4, 4:59*am, javelin <jmevalen...@gmail.comwrote:
I need to be able to create a javascript based drawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
This can be done with a <canvas>.
A <canvastag 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.
< http://developer.apple.com/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozilla.org/en/docs/Canvas_tutorial>
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
HTH,
--Jorge.
On Jun 4, 4:49*am, Jorge <jo...@jorgechamorro.comwrote:
On Jun 4, 4:59*am, javelin <jmevalen...@gmail.comwrote:
I need to be able to create a javascript based drawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
This can be done with a <canvas>.
A <canvastag 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.
<http://developer.apple.com/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozilla.org/en/docs/Canvas_tutorial>
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
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 to out)
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.
On Jun 4, 4:37*pm, Tom Cole <tco...@gmail.comwrote:
On Jun 4, 4:49*am, Jorge <jo...@jorgechamorro.comwrote:
On Jun 4, 4:59*am, javelin <jmevalen...@gmail.comwrote:
I need to be able to create a javascript based drawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
This can be done with a <canvas>.
A <canvastag 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.
<http://developer.apple.com/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozilla.org/en/docs/Canvas_tutorial>
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
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 -
javelin -
You can save the image data by including a hidden element in your form
and set it's value to the result of canvas.toDataURL() and store it in
your database. Then to later display this image, you merely have to
set the src of an img tag to this string. It will then show the
original image.
On Jun 4, 3:37*pm, Tom Cole <tco...@gmail.comwrote:
On Jun 4, 4:49*am, Jorge <jo...@jorgechamorro.comwrote:
On Jun 4, 4:59*am, javelin <jmevalen...@gmail.comwrote:
I need to be able to create a javascript baseddrawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
This can be done with a <canvas>.
A <canvastag creates a matrix of pixels of the given (width, height:
pixels) dimensions.
You could "sign" in it bydrawingwhile tracking the mouse movements.
And, thedrawingcan be converted to an image ( .png or .jpg ) by
the .toDataUrl() method.
<http://developer.apple.com/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozilla.org/en/docs/Canvas_tutorial>
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
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 -
I've seen similar problems with other demos I've downloaded. What's up
with that? I thought IE could do anything <sarcasm>. I definitely need
this to work in IE, though.
On Jun 4, 3:37*pm, Tom Cole <tco...@gmail.comwrote:
On Jun 4, 4:49*am, Jorge <jo...@jorgechamorro.comwrote:
On Jun 4, 4:59*am, javelin <jmevalen...@gmail.comwrote:
I need to be able to create a javascript baseddrawing/signature box,
and be able to save it. Can someone refer me to a script that will
allow this, or even a 3rd party package for sale? It can't be Java or
ActiveX.
Thank you.
This can be done with a <canvas>.
A <canvastag creates a matrix of pixels of the given (width, height:
pixels) dimensions.
You could "sign" in it bydrawingwhile tracking the mouse movements.
And, thedrawingcan be converted to an image ( .png or .jpg ) by
the .toDataUrl() method.
<http://developer.apple.com/documenta...ons/Reference/
SafariJSRef/Classes/Canvas.html>
<http://developer.mozilla.org/en/docs/Canvas_tutorial>
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
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 -
Tom, I found this site: http://www.tim-jarrett.com/labs_java...whiteboard.php
It shows a sample that works for me in IE7. I had to download all of
the JS files, but it works. However, the pixels are rather large. It
doesn't appear to use the canvas you mention either, so I don't know
how this will work for you (or me, for that matter). Let me know if
you can make heads or tale of this.
J
On Jun 5, 6:10*pm, Tom Cole <tco...@gmail.comwrote:
>
I don't think it's my code, or it wouldn't work in FF either. Maybe
it's just a matter of waiting for Opera and Safari to catch up with
their implementations of canvas. I'm pretty certain that the excanvas
(Google's attempt at providing a canvas tag) specifically says that it
does not handle some of the methods I need for dynamic writing.
This (simpler version) works in Safari and FF, but not in Opera... :-(
<html><head><style>body { margin: 0px; }</style><script>
window.onresize= function () {
var w= window, c= w.canvas;
if (c) {
c.height= w.innerHeight;
c.width= w.innerWidth;
}
};
window.onload= function () {
var c, d= document, w= window, t;
t= "All the window is a single, big canvas.\n";
t+= "Just click anywhere and start drawing.\n"
alert(t+"Resize the window to erase.");
d.body.appendChild(w.canvas= d.createElement("canvas"));
w.canvas.on= false;
c= w.canvas.getContext("2d");
w.onresize();
w.canvas.onmousedown = function(e) {
c.beginPath(); c.moveTo(e.clientX, e.clientY);
this.on= true;
};
w.canvas.onmouseup = function(e) { this.on= false };
w.canvas.onmousemove = function(e) {
if (this.on) {
c.lineTo(e.clientX, e.clientY); c.stroke();
}
};
};
</script></head><body></body></html>
--Jorge.
On Jun 5, 6:10*pm, Tom Cole <tco...@gmail.comwrote:
(...) Maybe
it's just a matter of waiting for Opera and Safari to catch up (..)
Hey, Apple *invented* this canvas thingy...
--Jorge.
On Jun 5, 1:22*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jun 5, 6:10*pm, Tom Cole <tco...@gmail.comwrote:
(...) Maybe
it's just a matter of waiting for Opera and Safari to catch up (..)
Hey, Apple *invented* this canvas thingy...
--Jorge.
Darn it! Is that why it doesn't work?!?
Well the link I sent Tom works in IE, but I can't figure out how to
get it to work without referring to the prototype on the author's
site. Refering to the one I downloaded doesn't work, for some reason.
In general, it looks like a great solution, if I could get that to
work.
On Jun 5, 8:49*pm, javelin <jmevalen...@gmail.comwrote:
Darn it! Is that why it doesn't work?!?
Ja-ja-ja.
Change line # 14 :
ctx.beginPath(pos.x, pos.y);
to:
ctx.beginPath(); ctx.moveTo(pos.x, pos.y);
--Jorge.
On Jun 5, 2:22*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jun 5, 6:10*pm, Tom Cole <tco...@gmail.comwrote:
(...) Maybe
it's just a matter of waiting for Opera and Safari to catch up (..)
Hey, Apple *invented* this canvas thingy...
--Jorge.
So my whole problem was this:
code was:
ctx.beginPatb(pos.x, pos.y);
code should have been:
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Thanks for your help!
On Jun 5, 9:05*pm, Tom Cole <tco...@gmail.comwrote:
>
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Yes, it works :
<html><head><script>
window.onload= function () {
var b, c;
c= document.createElement("canvas");
c.height= c.width= 10;
b= c.getContext('2d');
alert(c.toDataURL('image/png'));
alert(c.toDataURL('image/jpeg'));
};
</script></head><body></body></html>
--Jorge.
On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.comwrote:
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Yes, it does :
<html><head><script>
window.onload= function () {
var b, c;
c= document.createElement("canvas");
c.height= c.width= 10;
b= c.getContext('2d');
alert(c.toDataURL('image/png'));
alert(c.toDataURL('image/jpeg'));
};
</script></head><body></body></html>
--Jorge.
On Jun 5, 3:29*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.comwrote:
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Yes, it does :
<html><head><script>
window.onload= function () {
* var b, c;
* c= document.createElement("canvas");
* c.height= c.width= 10;
* b= c.getContext('2d');
* alert(c.toDataURL('image/png'));
* alert(c.toDataURL('image/jpeg'));};
</script></head><body></body></html>
--Jorge.
Awesome. I get the following in the developer /web inspector:
"Value undefined (result of expression cavas.toDataURL) is not an
object."
It references this line:
var dataURL = canvas.toDataURL("image/png");
--alert(dataURL);
On Jun 6, 8:20*am, Tom Cole <tco...@gmail.comwrote:
On Jun 5, 3:29*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.comwrote:
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Yes, it does :
<html><head><script>
window.onload= function () {
* var b, c;
* c= document.createElement("canvas");
* c.height= c.width= 10;
* b= c.getContext('2d');
* alert(c.toDataURL('image/png'));
* alert(c.toDataURL('image/jpeg'));};
</script></head><body></body></html>
--Jorge.
Awesome. I get the following in the developer /web inspector:
"Value undefined (result of expression cavas.toDataURL) is not an
object."
It references this line:
* * var dataURL = canvas.toDataURL("image/png");
--alert(dataURL);- Hide quoted text -
- Show quoted text -
BTW..using Safari for Windows Version 3.1.1 (525.17).
On Jun 6, 8:21*am, Tom Cole <tco...@gmail.comwrote:
On Jun 6, 8:20*am, Tom Cole <tco...@gmail.comwrote:
On Jun 5, 3:29*pm, Jorge <jo...@jorgechamorro.comwrote:
On Jun 5, 9:05 pm, Tom Cole <tco...@gmail.comwrote:
Cool. Now it works. In Opera and FF I can get the image data for
remote storage, in Safari I cannot. It does not appear to support
toDataURL().
Yes, it does :
<html><head><script>
window.onload= function () {
* var b, c;
* c= document.createElement("canvas");
* c.height= c.width= 10;
* b= c.getContext('2d');
* alert(c.toDataURL('image/png'));
* alert(c.toDataURL('image/jpeg'));};
</script></head><body></body></html>
--Jorge.
Awesome. I get the following in the developer /web inspector:
"Value undefined (result of expression cavas.toDataURL) is not an
object."
It references this line:
* * var dataURL = canvas.toDataURL("image/png");
--alert(dataURL);- Hide quoted text -
- Show quoted text -
BTW..using Safari for Windows Version 3.1.1 (525.17).- Hide quoted text -
- Show quoted text -
Addendum: Safari for windows with the Acid3 WebKit works. Thanks. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: SS KANAGAL |
last post by:
Hello,
I am drawing a bar graph in an aspx page using
System.Drawing namespace .
Now I want to provide drill down facility for the graph
i.e. on click of a bar in the graph it should get me yet...
|
by: the_grove_man |
last post by:
I purchased a book titled "Pro ASP.NET 2.0" to get up to speed on web
stuff because I ususally do Windows Form Applications.. But in the
first chapters I was reading this week it brought to mind...
|
by: jvs_desg |
last post by:
Hi All,
I need to select some area on an image.
But if used a freehand kind of drawing tool that would require lots of
memory to store so many coordinates.
Please help me in writing a script...
|
by: Todos |
last post by:
Hello,
Im working with an ultrasonic device and I need to draw a real time wave signal (like an oscilloscope) on a windows form application, I've finished that part but the drawing is to slow, when...
|
by: saravanatmm |
last post by:
I need javascript code for validate the email address.
Email address field cannot allowed the capital letters, special characters except '@' symbol.
But can allowed the small letters, numeric...
|
by: goldenv |
last post by:
Hi all,
I have worked an open source javascript + html page that has the
potential to replace your existing browser home page. If you are
interested in trying it out, or learning more about it, it...
|
by: Dutchmarshalls |
last post by:
Hi All,
I'm using a Pay Pal form script, but locally tested in Dreamweaver with a browser it will do exactly what I'm aspect it to do. Only when I'm uploaded the file on the server it will give...
|
by: Venturini |
last post by:
I am trying to put together a web page where the customer makes choices of products and is then given a total. I am extremely new to Javascript and have managed to get as far as I have from web...
|
by: Abdul Qadir |
last post by:
Hi,
I am using Javascript for Excel Export from classic ASP.
In my excel i have many Date columns that i need to store based on the regional settings.
The application also allow us to set the...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
| |
