https://municity5.com/municity5/resources/sign.js

1function draw(data) {
2    var canvas = data.el;
3    var ctx = canvas.getContext("2d");
4
5    ctx.beginPath();
6    ctx.moveTo(data.x0, data.y0);
7    ctx.lineTo(data.x1, data.y1);
8    ctx.stroke();
9}
10
11function getCursorXY(evt, element) {
12    var rect = element.getBoundingClientRect();
13    var scrollTop = document.documentElement.scrollTop?
14                    document.documentElement.scrollTop:document.body.scrollTop;
15    var scrollLeft = document.documentElement.scrollLeft?                   
16                    document.documentElement.scrollLeft:document.body.scrollLeft;
17    var elementLeft = rect.left+scrollLeft;  
18    var elementTop = rect.top+scrollTop;
19
20    x = evt.pageX-elementLeft;
21    y = evt.pageY-elementTop;
22
23    return {x:x, y:y};
24}
25
26function onSignOn(inData){    
27    var doc_url = null,
28        canvas_id = null,
29        fn = null,
30        file = null;
31    
32    if(inData.doc_url) doc_url = inData.doc_url;
33    if(inData.canvas_id) canvas_id = inData.canvas_id;
34        else return false;
35    if(inData.fn) fn = inData.fn;
36    if(inData.file) file = inData.file;
37    
38    var myCanvas = document.getElementById(canvas_id);
39    myCanvas.width = myCanvas.width;
40    myCanvas.x = null;
41    myCanvas.y = null;
42                    
43    var ctx = myCanvas.getContext('2d');
44    if(doc_url){
45        var img = new Image;
46        img.setAttribute('crossOrigin', 'anonymous');
47        img.onerror = function () {
48            if (fn) fn();
49        };
50        img.onload = function(){
51            var width = img.width;
52            var height = img.height; 
53            
54            if(img.width > 595) {
55                height *= 595/img.width;
56                width = 595;             
57            }
58
59            myCanvas.width = width;      
60            myCanvas.height = height; 
61
62            ctx.drawImage(img,0,0, width, height);
63            if(fn) fn(width+40, height+70);
64        };
65        img.src = doc_url;   
66    } else if(file){
67        var reader = new FileReader();
68        reader.onerror = function () {
69            if (fn) fn();
70        };
71        reader.onload = function(event){
72            var img = new Image();
73            img.onload = function(){
74                var width = img.width;
75                var height = img.height;
76                
77                if(img.width > 595) {
78                    height *= 595/img.width;
79                    width = 595;             
80                }
81
82                myCanvas.width = width;      
83                myCanvas.height = height;      
84                ctx.drawImage(img,0,0, width, height);
85                if(fn) fn(width+40, height+70);
86            }
87            img.src = event.target.result;
88        }
89        reader.readAsDataURL(file);
90    }
91
92    var move_func = function(e){
93        
94        var m = getCursorXY(e, this);
95
96        if(myCanvas.x && myCanvas.y && m.x && m.y){
97            draw({
98                el: e.target,
99                x0: myCanvas.x,
100                y0: myCanvas.y,
101                x1: m.x,
102                y1: m.y
103            });
104            myCanvas.setAttribute('signed', true);
105        }               
106        
107        myCanvas.x = m.x;
108        myCanvas.y = m.y;
109    }
110
111    var up_func = function(){
112        myCanvas.x = null;
113        myCanvas.y = null;
114        myCanvas.removeEventListener('mousemove', move_func);
115        myCanvas.removeEventListener('touchmove', move_func);
116        
117        document.body.removeEventListener('mouseup', up_func);
118        document.body.removeEventListener('touchend', up_func);
119    }
120
121    
122    myCanvas.addEventListener('mousedown', function(){
123        myCanvas.addEventListener('mousemove', move_func);
124        document.body.addEventListener('mouseup', up_func);        
125    });
126    
127    myCanvas.addEventListener('touchstart', function(){
128        myCanvas.addEventListener('touchmove', move_func);
129        document.body.addEventListener('touchend', up_func);
130    }); 
131}
132
133function dataURLtoBlob(dataURL){
134    var binary = atob(dataURL.split(',')[1]);
135    var array = [];
136    var i = 0;
137    while (i < binary.length) {

138        array.push(binary.charCodeAt(i));
139        i++
140    }
141
142    return new Blob([ new Uint8Array(array) ], {type: 'image/png'});
143}
144
145function dataURLtoFile(dataURL, filename) {
146    var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
147        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
148    while(n--){
149        u8arr[n] = bstr.charCodeAt(n);
150    }
151    return new File([u8arr], filename, {type:mime});
152}