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
|
var WebcamView = View.extend({
el: "#photobooth",
events: {
"change #upload-btn input": "handleFileSelect",
},
initialize: function(){
this.$input = this.$('#file')
this.$snapBtn = this.$("#snap-btn")
},
loaded: false,
ready: function(){
this.canvas = document.createElement("canvas")
this.ctx = this.canvas.getContext('2d')
this.$overlayer.append(this.canvas)
this.draw()
},
handleFileSelect: function(e) {
e.stopPropagation()
e.preventDefault()
var files = e.dataTransfer ? e.dataTransfer.files : e.target.files
var file = files[0]
if (! file) return
if ( ! file.type.match('image.*')) return
// this.upload(file)
var img = new Image
img.onload = function() {
var w, h
var ratio = img.naturalWidth / img.naturalHeight
if (ratio >= 4/3) {
h = 480
w = 480 * ratio
}
else {
w = 640
h = 640 / ratio
}
ctx.drawImage(img, 0, 0, w, h)
}.bind(this)
img.src = URL.createObjectURL(file)
},
upload: function(file){
var _csrf = $("meta[name=_csrf]").attr("value")
var fd = new FormData()
fd.append('image', file)
var request = $.ajax({
url: "/irc/image?_csrf=" + _csrf,
type: "post",
data: fd,
dataType: "json",
processData: false,
contentType: false,
})
request.done(this.success.bind(this))
},
success: function(data){
// probably append image..
},
})
|
