156 lines
3.7 KiB
Plaintext
156 lines
3.7 KiB
Plaintext
.rel.cropbox
|
|
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css")
|
|
script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js")
|
|
.otherdata
|
|
h3 Current Avatar
|
|
.avatar
|
|
include ../includes/avatar.pug
|
|
.inputting
|
|
h3 Upload new
|
|
.message.error
|
|
input(type="file", id="fileinput")
|
|
.editor(style="display: none")
|
|
h3 Crop the image
|
|
img.preview(id="image")
|
|
.buttons
|
|
.button#done Done
|
|
.button#cancel Cancel
|
|
.button#upload Upload Now
|
|
|
|
script.
|
|
window.jQuery = $
|
|
function message (msg) {
|
|
$('.message').text(msg)
|
|
$('.message').show()
|
|
}
|
|
|
|
function dataURItoBlob (dataURI) {
|
|
// convert base64 to raw binary data held in a string
|
|
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
|
|
var byteString = atob(dataURI.split(',')[1])
|
|
|
|
// separate out the mime component
|
|
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
|
|
|
|
// write the bytes of the string to an ArrayBuffer
|
|
var ab = new ArrayBuffer(byteString.length)
|
|
|
|
// create a view into the buffer
|
|
var ia = new Uint8Array(ab)
|
|
|
|
// set the bytes of the buffer to the correct values
|
|
for (var i = 0; i < byteString.length; i++) {
|
|
ia[i] = byteString.charCodeAt(i)
|
|
}
|
|
|
|
// write the ArrayBuffer to a blob, and you're done
|
|
var blob = new Blob([ab], {type: mimeString})
|
|
return blob
|
|
}
|
|
|
|
function cropReady() {
|
|
let cropargs = $('#image').cropper('getData')
|
|
let cropimage = $('#image').cropper('getCroppedCanvas')
|
|
|
|
$('#upload').show()
|
|
$('#done').hide()
|
|
$('.preview').attr('src', cropimage.toDataURL())
|
|
$('.preview').show()
|
|
$('#image').cropper('destroy')
|
|
|
|
let called = false
|
|
$('#upload').click(function (e) {
|
|
if (called) return
|
|
called = true
|
|
$('#upload').hide()
|
|
let formData = new FormData()
|
|
formData.append('image', dataURItoBlob(fr.result))
|
|
|
|
for (let i in cropargs) {
|
|
formData.append(i, cropargs[i])
|
|
}
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/api/avatar',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (data) {
|
|
window.Dialog.close()
|
|
window.location.reload()
|
|
},
|
|
error: function (err) {
|
|
if (err.responseJSON && err.responseJSON.error) {
|
|
message(err.responseJSON.error)
|
|
}
|
|
$('#cancel').click()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
function ready (blob) {
|
|
let match = blob.match(/data:image\/(\w+);/)
|
|
if (!match) {
|
|
return message('Not an image file!')
|
|
}
|
|
|
|
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') {
|
|
return message('Unsupported image file')
|
|
}
|
|
|
|
$('#image').attr('src', fr.result).hide()
|
|
$('.inputting').hide()
|
|
$('.otherdata').hide()
|
|
$('#upload').hide()
|
|
$('#done').show()
|
|
$('.editor').show()
|
|
$('#image').cropper({
|
|
aspectRatio: 1 / 1,
|
|
minContainerHeight: 512,
|
|
minContainerWidth: 512,
|
|
viewMode: 1
|
|
})
|
|
}
|
|
|
|
function handleFileSelect() {
|
|
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
|
|
return message('The File APIs are not fully supported in this browser.')
|
|
}
|
|
|
|
let input = document.getElementById('fileinput')
|
|
if (!input.files) {
|
|
message('This browser doesn\'t seem to support the `files` property of file inputs.')
|
|
} else if (!input.files[0]) {
|
|
message('Please select a file.')
|
|
} else {
|
|
file = input.files[0]
|
|
fr = new FileReader()
|
|
fr.readAsDataURL(file)
|
|
fr.addEventListener('load', function (e) {
|
|
ready(fr.result)
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
$('#fileinput').on('change', function (e) {
|
|
e.preventDefault()
|
|
handleFileSelect()
|
|
})
|
|
|
|
$('#cancel').click(function (e) {
|
|
$('.inputting').show()
|
|
$('.otherdata').show()
|
|
$('.editor').hide()
|
|
$('#image').cropper('destroy')
|
|
})
|
|
|
|
$('#done').click(function (e) {
|
|
cropReady()
|
|
})
|
|
|
|
$('.message').hide()
|
|
|