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
|
function identify (src, profile, keys) {
var identifyDiv = h('div')
if (src != keys.publicKey) {
identifyDiv.appendChild(h('p', ['Please note: ' + src + ' is not you.']))
}
var photoURL = {}
var newPhoto = h('span', [
h('input', {id: 'input', type: 'file',
onclick: function () {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var maxW = 250
var maxH = 250
var input = document.getElementById('input')
input.addEventListener('change', handleFiles)
function handleFiles(e) {
var img = new Image
img.onload = function() {
var iw = img.width
var ih = img.height
var scale = Math.min((maxW/iw), (maxH/ih))
var iwScaled = iw*scale
var ihScaled = ih*scale
canvas.width = iwScaled
canvas.height = ihScaled
ctx.drawImage(img, 0, 0, iwScaled, ihScaled)
console.log(canvas.toDataURL('image/jpeg', 0.9))
photoURL.value = canvas.toDataURL('image/jpeg', 0.9)
//identifyDiv.appendChild(h('img', {src: photoURL.value}))
}
img.src = URL.createObjectURL(e.target.files[0])
}
}
}),
h('p', ['We recommend uploading a square photo. It will automatically be cropped to 250 x 250 px.']),
h('canvas', {id: 'canvas', width: '0', height: '0'}),
h('button', {
onclick: function () {
identifyDiv.appendChild(identifyButtons)
newPhoto.parentNode.removeChild(newPhoto)
}
}, ['Cancel']),
h('button', {
onclick: function () {
if (photoURL.value) {
content = {
type: 'image',
imaged: src,
image: photoURL.value
}
console.log(content)
localforage.removeItem('image:' + src)
publish(content, keys).then(post => {
open(post).then(msg => {
nameInput.value = ''
scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
})
})
newPhoto.parentNode.removeChild(newPhoto)
identifyDiv.appendChild(identifyButton)
}
}
}, ['Publish'])
])
var nameInput = h('input', {placeholder: 'New name'})
var newName = h('div', [
nameInput,
h('button', {
onclick: function () {
if (nameInput.value) {
content = {
type: 'name',
named: src,
name: nameInput.value
}
localforage.removeItem('name:' + src)
publish(content, keys).then(post => {
open(post).then(msg => {
nameInput.value = ''
scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
})
})
newName.parentNode.removeChild(newName)
identifyDiv.appendChild(identifyButton)
}
}
}, ['Publish']),
h('button', {
onclick: function () {
identifyDiv.appendChild(identifyButtons)
newName.parentNode.removeChild(newName)
}
}, ['Cancel'])
])
var identifyButtons = h('span', [
h('button', {
onclick: function () {
identifyDiv.appendChild(newName)
identifyButtons.parentNode.removeChild(identifyButtons)
}
}, ['Identify ' + src.substring(0, 10) + '... with a new name']),
h('button', {
onclick: function () {
identifyDiv.appendChild(newPhoto)
identifyButtons.parentNode.removeChild(identifyButtons)
}
}, ['Identify ' + src.substring(0, 10) + '... with a new photo']),
h('button', {
onclick: function () {
identifyDiv.appendChild(identifyButton)
identifyButtons.parentNode.removeChild(identifyButtons)
}
}, ['Cancel'])
])
var identifyButton = h('button', {
onclick: function () {
profile.appendChild(identifyDiv)
profile.appendChild(identifyButtons)
identifyButton.parentNode.removeChild(identifyButton)
}
},['Identify ' + src.substring(0, 10) + '...'])
return identifyButton
}
|
