demo.js
4 KB
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/*
* JavaScript Load Image Demo JS
* https://github.com/blueimp/JavaScript-Load-Image
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
/*global window, document, loadImage, HTMLCanvasElement, $ */
$(function () {
'use strict'
var result = $('#result')
var exifNode = $('#exif')
var thumbNode = $('#thumbnail')
var actionsNode = $('#actions')
var currentFile
var coordinates
function replaceResults (img) {
var content
if (!(img.src || img instanceof HTMLCanvasElement)) {
content = $('<span>Loading image file failed</span>')
} else {
content = $('<a target="_blank">').append(img)
.attr('download', currentFile.name)
.attr('href', img.src || img.toDataURL())
}
result.children().replaceWith(content)
if (img.getContext) {
actionsNode.show()
}
}
function displayImage (file, options) {
currentFile = file
if (!loadImage(
file,
replaceResults,
options
)) {
result.children().replaceWith(
$('<span>Your browser does not support the URL or FileReader API.</span>')
)
}
}
function displayExifData (exif) {
var thumbnail = exif.get('Thumbnail')
var tags = exif.getAll()
var table = exifNode.find('table').empty()
var row = $('<tr></tr>')
var cell = $('<td></td>')
var prop
if (thumbnail) {
thumbNode.empty()
loadImage(thumbnail, function (img) {
thumbNode.append(img).show()
}, {orientation: exif.get('Orientation')})
}
for (prop in tags) {
if (tags.hasOwnProperty(prop)) {
table.append(
row.clone()
.append(cell.clone().text(prop))
.append(cell.clone().text(tags[prop]))
)
}
}
exifNode.show()
}
function dropChangeHandler (e) {
e.preventDefault()
e = e.originalEvent
var target = e.dataTransfer || e.target
var file = target && target.files && target.files[0]
var options = {
maxWidth: result.width(),
canvas: true,
pixelRatio: window.devicePixelRatio,
downsamplingRatio: 0.5
}
if (!file) {
return
}
exifNode.hide()
thumbNode.hide()
loadImage.parseMetaData(file, function (data) {
if (data.exif) {
options.orientation = data.exif.get('Orientation')
displayExifData(data.exif)
}
displayImage(file, options)
})
}
// Hide URL/FileReader API requirement message in capable browsers:
if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
result.children().hide()
}
$(document)
.on('dragover', function (e) {
e.preventDefault()
e = e.originalEvent
e.dataTransfer.dropEffect = 'copy'
})
.on('drop', dropChangeHandler)
$('#file-input').on('change', dropChangeHandler)
$('#edit').on('click', function (event) {
event.preventDefault()
var imgNode = result.find('img, canvas')
var img = imgNode[0]
var pixelRatio = window.devicePixelRatio || 1
imgNode.Jcrop({
setSelect: [
40,
40,
(img.width / pixelRatio) - 40,
(img.height / pixelRatio) - 40
],
onSelect: function (coords) {
coordinates = coords
},
onRelease: function () {
coordinates = null
}
}).parent().on('click', function (event) {
event.preventDefault()
})
})
$('#crop').on('click', function (event) {
event.preventDefault()
var img = result.find('img, canvas')[0]
var pixelRatio = window.devicePixelRatio || 1
if (img && coordinates) {
replaceResults(loadImage.scale(img, {
left: coordinates.x * pixelRatio,
top: coordinates.y * pixelRatio,
sourceWidth: coordinates.w * pixelRatio,
sourceHeight: coordinates.h * pixelRatio,
minWidth: result.width(),
maxWidth: result.width(),
pixelRatio: pixelRatio,
downsamplingRatio: 0.5
}))
coordinates = null
}
})
})