需要基于JavaScript的绘图/签名框 [英] Need JavaScript based drawing/signature box
问题描述
我需要能够创建一个基于javascript的绘图/签名框，
并能够保存它。有人可以给我推荐一个脚本，它将允许这个，甚至第三方包装出售吗？它不能是Java或
ActiveX。
谢谢。
6月4日，4：59 * am，javelin< jmevalen ... @ gmail.comwrote：
我需要能够创建一个基于javascript的绘图/签名框，
并能够保存它。有人可以给我推荐一个脚本，它将允许这个，甚至第三方包装出售吗？它不能是Java或
ActiveX。
谢谢。
这可以使用< canvas>来完成。
A< canvastag创建给定的像素矩阵（宽度，身高：
像素）尺寸。
你可以签署通过在跟踪鼠标移动的同时进行绘制。
并且，绘图可以通过
转换为图像（.png或.jpg）.toDataUrl（）方法。
< 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。
6月4日凌晨4点49分，Jorge< ; jo ... @ jorgechamorro.comwrote：
6月4日，4：59 * am，javelin< jmevalen ... @ gmail.comwrote：
我需要能够创建一个基于javascript的绘图/签名框，
并能够保存它。有人可以给我推荐一个脚本，它将允许这个，甚至第三方包装出售吗？它不能是Java或
ActiveX。
谢谢。
这可以使用< canvas>来完成。
A< canvastag创建给定的像素矩阵（宽度，身高：
像素）尺寸。
你可以签署通过在跟踪鼠标移动的同时进行绘制。
并且，绘图可以通过
转换为图像（.png或.jpg）.toDataUrl（）方法。
< 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，
- 乔治。
我一直在做类似的事情，但到目前为止它只适用于
FF。 Opera 9，Safari 3和IE（使用excanvas）它不起作用。没有
错误，没有任何结果。也许有人可以看看并告诉我
什么是错的。
测试按钮呈现测试代码（来自Mozilla画布网站）
但是鼠标只会在FF中画出画布。
< html>
< head>
< title>签名测试< / title>
<！ - IE的Canvas实现 - >
< script type =" text / JavaScript的" src =" excanvas.js">< / script>
< script type =" text / javascript">
/ **初始化画布，分配事件处理程序。 * /
函数init（）{
var canvas = document.getElementById（" signature"）;
canvas.started = false;
canvas.onmousedown = function（event）{
var ctx = this.getContext（" 2d"）;
var pos = getMousePositionInElement （这个，事件）;
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（）;
}
}
}
/ **检索屏幕上的元素位置。 * /
函数getElementPosition（element）{
var posX = element.offsetLeft;
var posY = element.offsetTop;
尝试{
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 =新数组（0）;
dims [''x''] = posX;
dims [''y''] = posY;
返回dims;
}
/ **检索相对于给定元素
边界的当前鼠标位置。 * /
函数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;
返回位置;
}
/ **获取引用页面的鼠标位置。 * /
函数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;
返回mousePosition;
}
函数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 ++）{//循环（从内到外）
ctx .save（）;
ctx.fillStyle =''rgb（''+（51 * i）+''，''+（255-51 * i）+''，255）' ';
for（j = 0; j< i * 6; j ++）{//绘制单个点
ctx.rotate（Math.PI * 2 /（i * 6））;
ctx.beginPath（）;
ctx.rect（0，i * 12.5,5,5）;
ctx.fill（）;
}
ctx.rest ore（）;
}
ctx.restore（）;
}
< / script>
< / head>
< body onload =" init（）;">
< div style =" width：500px;身高：150px; border：1px solid
black;">
< canvas id =" signature"宽度= QUOT; 498" height =" 148">< / canvas>
< / div>
< input type =" button"值= QUOT;试验" onclick =" test（）;" />
< / body>
< / html>
任何帮助将不胜感激。
6月4日，4：37 * pm，Tom Cole< tco ... @ gmail.comwrote：
< blockquote class =post_quotes>
6月4日，4：49 * am，Jorge< jo ... @ jorgechamorro.comwrote：
6月4日，4：59 * am，javelin< jmevalen ... @ gmail.comwrote：
我需要能够创建一个基于javascript的绘图/签名框，
并能够保存它。有人可以给我推荐一个脚本，它将允许这个，甚至第三方包装出售吗？它不能是Java或
ActiveX。
谢谢。
这可以通过< canvas>来完成。
A< canvastag创建一个矩阵给定（宽度，高度：
像素）尺寸的像素。
你可以签署通过在跟踪鼠标移动的同时进行绘制。
并且，绘图可以通过
转换为图像（.png或.jpg）.toDataUrl（）方法。
< 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/#的帆布>
HTH，
--Jorge。
我一直在做类似的事情，但到目前为止它只适用于
FF。 Opera 9，Safari 3和IE（使用excanvas）它不起作用。没有
错误，没有任何结果。也许有人可以看看并告诉我
什么是错的。
测试按钮呈现测试代码（来自Mozilla画布网站）
但鼠标只会在FF中画出画布。
< html>
*< head>
* *< title>签名测试< / title>
* *<！ - IE的Canvas实现 - >
* *< ; script type =" text / javascript" src =" excanvas.js">< / script>
* *< script type =" text / javascript">
* * / * *初始化画布，分配事件处理程序。 * /
* * 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.onmousemov e = function（event）{
* * * * * * * * if（this.started）* {
* * * * * * * * * * * * var ctx = this.getContext（" 2d"）;
* * * * * * * * * * * * var pos = getMousePositionInElement（this，event）;
* * * * * * * * * * * * ctx.lineTo（pos.x，pos.y）;
* * * * * * * * * * * * ctx.stroke （）;
* * * * * * * *}
* * * *}
* *}
* * / **检索屏幕上的元素位置。 * /
* * function getElementPosition（element）{
* * * * var posX = element.offsetLeft;
* * * * var posY = element.offsetTop;
* * * *试试{
* * * * * * * * while（element.offsetParent）{
* * * * * * * * * * * * posX + = element.offsetParent.offsetLeft;
* * * * * * * * * * * * posY + = element.offsetParent.offsetTop ;
* * * * * * * * * * * * if（element == document..getElementsByTagName（''body''）[0]）{
* * * * * * * * * * * * * * * *休息
* * * * * * * * * * * *}
* * * * * * * * * * * * else {
* * * * * * * * * * * * * * * * element = element.offsetParent;
* * * * * * * * * * * *}
* * * * * * * *}
* * * *}
* * * * catch（e）{
* * * * * * * * * alert（e.message）;
* * * *}
* * * * var dims = new Array（0）;
* * * * dims [''x''] = posX;
* * * * dims [''y ''] = posY;
* * * *返回dims;
* *}
* * / **检索当前鼠标位置相对于给定元素
的界限。 * /
* * 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;
* * * *返回位置;
* *}
* * / **获取引用页面的鼠标位置。 * /
* * 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;
* * * *返回mousePosition;
* *}
* * function test（）{
* * * * var canvas = document.getElementById（''signature''）;
* * * * var ctx = canvas.getContext（'''2''）;
* * * * 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.P I * 2，true）;
* * * * ctx.stroke（）;
* * * * ctx.save（）;
* * * * ctx.globalAlpha = 1.0;
* * * * //ctx.translate(75,75）;
* * * * for（i = 1; i< 6; i ++）{//循环通过环（从内到外）
* * * * * * * ctx.save（）;
* * * * * * * ctx.fillStyle =''rgb（''+（51 * i）+''，''+（255-51 * i）+''，255）'';
* * * * * * * for（j = 0; j< i * 6; j ++）{//绘制单个点
* * * * * * * * * 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;身高：150px; border：1px solid
black;">
* * *< canvas id =" signature"宽度= QUOT; 498" height =" 148">< / canvas>
* *< / div>
* *< input type =" button"值= QUOT;试验" onclick =" test（）;" />
*< / body>
< / html>
任何帮助将不胜感激.-隐藏引用的文字 -
- 显示引用的文字 -
javelin -
您可以通过在表单中包含隐藏元素来保存图像数据
并将其值设置为canvas.toDataURL（）和store的结果它在
你的数据库。然后为了以后显示这个图像，你只需要将
设置为该字符串的img标签的src。然后它将显示
原始图像。
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.
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.
这篇关于需要基于JavaScript的绘图/签名框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
