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
|
var UploadView = View.extend({
events: {
"change input": "handleFileSelect",
},
initialize: function(){
this.$input = this.$('input')
},
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.file = file
if (file.type.match(/jpg|jpeg/)) {
this.fixOrientationAndLoad(file)
}
else {
var url = URL.createObjectURL(file)
this.load(url)
}
},
fixOrientationAndLoad: function(f){
var reader = new FileReader()
var img = new Image ()
reader.addEventListener("load", function () {
img.src = reader.result
}, false)
img.onload = function(){
var max_side = Math.max(img.naturalWidth, img.naturalHeight)
var scale = Math.min(1280 / max_side, 1)
var canvas = renderToCanvas(img, {
correctOrientation: true,
scale: scale
})
var dataURI = canvas.toDataURL("image/jpeg", 0.8)
var blob = dataUriToBlob( dataURI )
this.upload(blob)
}.bind(this)
reader.readAsDataURL(f)
},
load: function( url ){
app.views.home.PhotoView.load( url )
},
upload: function(file){
var fd = new FormData()
var _csrf = $("meta[name='_csrf']").attr('content')
fd.append('_csrf', _csrf)
fd.append('image', file)
var request = $.ajax({
url: "/_irc/image?_csrf=" + _csrf,
type: "post",
data: fd,
processData: false,
contentType: false,
})
request.done(this.success.bind(this))
},
success: function(data){
// probably append image..
},
})
|
