Question

我有一个脚本可以在触摸屏上捕获签名并将其保存为图像，我无法弄清楚如何将该图像提交给MySQL。我是否需要将名称标签添加到图像并将其用作变量，还是可以将id标签用作变量？我知道如何将图像上传到服务器上的文件夹并保存MySQL中的图像路径，我只是不确定如何保存此图像！这是我的 jsFiddle

 <!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>

JavaScript：

    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;

                        }

        }



})();

Answer 1

使用AJAX提交从画布获得的图像数据：

$.ajax(url, {
    type: "POST",
    data: canvas.toDataURL("image/png"),
    success: function (data, status, jqxhr) {...},
    error: function (jqxhr, status, error) {...}
});

如何将捕获的签名图像保存到MySQL

1 个答案: