test/xjalt/WebRoot/dist/js/sign/esign.js

(function (root, doc, factory) {
    if (typeof define === "function" && define.amd) {
        define( ["jquery"], function ($) {
            return factory($);
        });
    } else {
        factory(root.jQuery);
    }
}(this, document, function($) {
    $.fn.esign = function(canvasEdit, sign_show, sign_clear, sign_ok) {
    	var domMap = domInit(canvasEdit, sign_show, sign_clear, sign_ok);
        var canvas = domMap.canvasEdit[0];
        if (typeof document.ontouchstart != "undefined") {      
            canvas.addEventListener('touchmove', onMouseMove, false);
            canvas.addEventListener('touchstart', onMouseDown, false);
            canvas.addEventListener('touchend', onMouseUp, false);
        } else {      
            canvas.addEventListener('mousemove', onMouseMove, false);
            canvas.addEventListener('mousedown', onMouseDown, false);
            canvas.addEventListener('mouseup', onMouseUp, false);
            canvas.addEventListener('mouseleave', onMouseUp, false);
        }
        var context = canvas.getContext('2d');
        var linex = new Array();
        var liney = new Array();
        var linen = new Array();
        var lastX = 1;
        var lastY = 30;
        var flag = 0;

        domMap.sign_ok.on("click",function(){
            preview();
            rewrite();
        });

        domMap.sign_clear.click(function(){
            clearImg();
            rewrite();
        });

        function domInit(canvasEdit, sign_show, sign_clear, sign_ok){
            var domMap = {};

            if(!canvasEdit){
                domMap.canvasEdit = $("#canvasEdit");
            } else{
                domMap.canvasEdit = $("#" + canvasEdit);
            }

            if(!sign_show){
                domMap.sign_show = $("#sign_show");
            } else{
                domMap.sign_show = $("#" + sign_show);
            }

            if(!sign_clear){
                domMap.sign_clear = $("#sign_clear");
            } else{
                domMap.sign_clear = $("#" + sign_clear);
            }

            if(!sign_ok){
                domMap.sign_ok = $("#sign_ok");
            } else{
                domMap.sign_ok = $("#" + sign_ok);
            }

            return domMap;
        }

        function getCanvasPos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            var x, y;
            if (evt.targetTouches) {
                x = evt.targetTouches[0].clientX;
                y = evt.targetTouches[0].clientY;
            } else {
                x = evt.clientX;
                y = evt.clientY;
            }
            return {
                x: (x - rect.left) * (canvas.width / rect.width),
                y: (y - rect.top) * (canvas.height / rect.height)
            }
        }

        function onMouseMove(evt)
        {
            var x = getCanvasPos(canvas, evt).x,
                y = getCanvasPos(canvas, evt).y;

            if (flag == 1) {
                linex.push(x);
                liney.push(y);
                linen.push(1);
                context.save();
                context.translate(context.canvas.width / 2, context.canvas.height / 2);
                context.translate(-context.canvas.width / 2 , -context.canvas.height/2);
                context.beginPath();
                context.lineWidth = 2;
                for (var i = 1; i < linex.length; i++) {
                    lastX = linex[i];
                    lastY = liney[i];
                    if (linen[i] == 0)
                        context.moveTo(lastX, lastY);
                    else
                        context.lineTo(lastX, lastY);
                }
                context.shadowBlur = 10;
                context.stroke();
                context.restore();
            }
            evt.preventDefault();
        }

        function onMouseDown(evt) {
            var x = getCanvasPos(canvas, evt).x,
                y = getCanvasPos(canvas, evt).y;
            flag = 1;
            linex.push(x);
            liney.push(y);
            linen.push(0);
        }

        function onMouseUp() {
            flag = 0;
        }

        function rewrite(){
            linex = new Array();
            liney = new Array();
            linen = new Array();
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

        function clearImg(){
            domMap.sign_show[0].innerHTML = "";
        }

        function preview(){
            var show = domMap.sign_show[0];
            show.innerHTML = "";
            show.appendChild(convertCanvasToImage(canvas));
            $("#sign_dir").val(canvas.toDataURL("i/png"));
        }

        function convertCanvasToImage(canvas){
            var image = new Image();
            image.width = 80;
            image.height = 50;
            image.src = canvas.toDataURL("i/png");
            return image;
        }
    };
    return $.fn.esign;
}));