-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
102 lines (87 loc) · 2.53 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
window.onload = function() {
var canvasWidth = 280
var canvasHeight = 280
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e) {
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e) {
paint = false;
});
$('#canvas').mouseleave(function(e) {
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
$('#clearCanvasButton').mousedown(function(e) {
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
clearCanvas();
$('#predictionResult').text("")
});
$('#predictButton').mousedown(function(e) {
canvas.toBlob(function(d) {
var fd = new FormData();
fd.append('image', d)
$.ajax({
type: "POST",
url: "predict",
data: fd,
contentType: false,
processData: false
}).done(function(o) {
$('#predictionResult').text(o)
});
});
});
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function clearCanvas() {
context.beginPath();
context.rect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = "white";
context.fill();
}
function redraw() {
clearCanvas();
context.strokeStyle = "#000";
context.lineJoin = "round";
context.lineWidth = 10;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
}