3
터치 스크린에서 서명을 캡처하여 이미지로 저장하는 스크립트가 있습니다. 그런 다음 이미지를 MySQL로 제출하는 방법을 알 수 없습니다. 이미지에 이름 태그를 추가하여이를 변수로 사용해야합니까, 아니면 id 태그를 변수로 사용할 수 있습니까? 서버의 폴더에 이미지를 업로드하고 MySQL의 이미지 경로를 저장하는 방법을 알고 있습니다.이 이미지를 저장하는 방법을 모르겠습니다. 은 여기 내 jsFiddle캡처 한 이미지를 MySQL에 저장하는 방법
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="signature/todataurl.js"></script>
<script src="signature/signature.js"></script>
</head>
<body>
<center>
<div id="canvas">
<canvas class="roundCorners" id="newSignature"
style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac; left: 0px; top: 0px;" height="124" width="524"></canvas>
</div>
<script>
signatureCapture();
</script>
<br/><br/>
<button type="button" onclick="signatureSave()">
Save signature
</button>
<button type="button" onclick="signatureClear()">
Clear signature
</button>
<br/>
Saved Image
<br/>
<img id="saveSignature" alt="Saved image png"/>
</center>
</body>
</html>
입니다 그리고 자바 스크립트 :
function signatureCapture() {
var canvas = document.getElementById("newSignature");
var context = canvas.getContext("2d");
canvas.width = 276;
canvas.height = 180;
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.5;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
{ //functions
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x)/2,
y : (xyLast.y + xy.y)/2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x)/3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y)/3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);
}
function signatureSave() {
var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png");
document.getElementById("saveSignature").src = dataURL;
};
function signatureClear() {
var canvas = document.getElementById("newSignature");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
}
여기에 todataurl.js 코드 :
Number.prototype.toUInt=function(){ return this<0?this+4294967296:this; };
Number.prototype.bytes32=function(){ return [(this>>>24)&0xff,(this>>>16)&0xff,(this>>>8)&0xff,this&0xff]; };
Number.prototype.bytes32sw=function(){ return [this&0xff,(this>>>8)&0xff,(this>>>16)&0xff,(this>>>24)&0xff]; };
Number.prototype.bytes16=function(){ return [(this>>>8)&0xff,this&0xff]; };
Number.prototype.bytes16sw=function(){ return [this&0xff,(this>>>8)&0xff]; };
Array.prototype.adler32=function(start,len){
switch(arguments.length){ case 0:start=0; case 1:len=this.length-start; }
var a=1,b=0;
for(var i=0;i<len;i++){
a = (a+this[start+i])%65521; b = (b+a)%65521;
}
return ((b << 16) | a).toUInt();
};
Array.prototype.crc32=function(start,len){
switch(arguments.length){ case 0:start=0; case 1:len=this.length-start; }
var table=arguments.callee.crctable;
if(!table){
table=[];
var c;
for (var n = 0; n < 256; n++) {
c = n;
for (var k = 0; k < 8; k++)
c = c & 1?0xedb88320^(c >>> 1):c >>> 1;
table[n] = c.toUInt();
}
arguments.callee.crctable=table;
}
var c = 0xffffffff;
for (var i = 0; i < len; i++)
c = table[(c^this[start+i]) & 0xff]^(c>>>8);
return (c^0xffffffff).toUInt();
};
(function(){
var toDataURL=function(){
var imageData=Array.prototype.slice.call(this.getContext("2d").getImageData(0,0,this.width,this.height).data);
var w=this.width;
var h=this.height;
var stream=[
0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a,
0x00,0x00,0x00,0x0d,0x49,0x48,0x44,0x52
];
Array.prototype.push.apply(stream, w.bytes32());
Array.prototype.push.apply(stream, h.bytes32());
stream.push(0x08,0x06,0x00,0x00,0x00);
Array.prototype.push.apply(stream, stream.crc32(12,17).bytes32());
var len=h*(w*4+1);
for(var y=0;y<h;y++)
imageData.splice(y*(w*4+1),0,0);
var blocks=Math.ceil(len/32768);
Array.prototype.push.apply(stream, (len+5*blocks+6).bytes32());
var crcStart=stream.length;
var crcLen=(len+5*blocks+6+4);
stream.push(0x49,0x44,0x41,0x54,0x78,0x01);
for(var i=0;i<blocks;i++){
var blockLen=Math.min(32768,len-(i*32768));
stream.push(i==(blocks-1)?0x01:0x00);
Array.prototype.push.apply(stream, blockLen.bytes16sw());
Array.prototype.push.apply(stream, (~blockLen).bytes16sw());
var id=imageData.slice(i*32768,i*32768+blockLen);
Array.prototype.push.apply(stream, id);
}
Array.prototype.push.apply(stream, imageData.adler32().bytes32());
Array.prototype.push.apply(stream, stream.crc32(crcStart, crcLen).bytes32());
stream.push(0x00,0x00,0x00,0x00,0x49,0x45,0x4e,0x44);
Array.prototype.push.apply(stream, stream.crc32(stream.length-4, 4).bytes32());
return "data:image/png;base64,"+btoa(String.fromCharCode.apply(null,stream));
};
var tdu=HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL=function(type){
var res=tdu.apply(this,arguments);
if(res.substr(0,6)=="data:,"){
HTMLCanvasElement.prototype.toDataURL=toDataURL;
return this.toDataURL();
}else{
HTMLCanvasElement.prototype.toDataURL=tdu;
return res;
}
}
})();
이것은 내가 제안한 것입니다 : 이미지를 서버의 일부 디렉토리에 업로드하고 임의의 이름을 지정하고 mySql 테이블에 이미지 경로를 저장하십시오. 그렇지 않으면 테이블에 이미지 데이터를 저장하면 테이블 크기가 커집니다. 더 많은 전문가가 이에 대해 언급 할 수 있습니다. – sachinjain024
@blunderboy 내 질문을 읽어 보셨습니까? 나는 이미지를 서버에 업로드하고 데이터베이스의 이미지 경로를 저장하는 방법을 알고 있다고 말하면서, 그게 내가 가지고있는 문제가 아냐! – user2447848