Permalink
Browse files

Avatars: support transparent avatars (png)

fixes #1807
  • Loading branch information...
mrflix authored and znuny-robo committed Feb 14, 2018
1 parent 3fb7e5b commit 2140134ebeb12c1c8c5e5eb23080116c56ec2456
@@ -105,8 +105,7 @@ class Index extends App.ControllerSubContent
new Camera
callback: @storeImage

storeImage: (src) =>

storeImage: (src, type) =>
# store avatar globally
@oldDataUrl = src

@@ -128,16 +127,19 @@ class Index extends App.ControllerSubContent
)

# add resized image
App.ImageService.resizeForAvatar(src, 'auto', 160, store)
App.ImageService.resizeForAvatar(src, 'auto', 160, type, store)

onUpload: (event) =>
file = event.target.files[0]
callback = @storeImage
EXIF.getData event.target.files[0], ->

EXIF.getData file, ->
orientation = @exifdata.Orientation
reader = new FileReader()
reader.onload = (e) ->
new ImageCropper
imageSource: e.target.result
type: file.type
callback: callback
orientation: orientation

@@ -182,7 +184,7 @@ class ImageCropper extends App.ControllerModal
@image.attr src: dataUrl

# resize if to big
App.ImageService.resize(@imageSource, 600, 'auto', 2, 'image/jpeg', 0.9, show)
App.ImageService.resize(@imageSource, 600, 'auto', 2, @type, 0.9, show)

orientateImage: (e) =>
image = e.currentTarget
@@ -220,7 +222,7 @@ class ImageCropper extends App.ControllerModal

onSubmit: (e) =>
@formDisable(e)
@callback( @image.cropper('getCroppedCanvas').toDataURL() )
@callback( @image.cropper('getCroppedCanvas').toDataURL(), @type )
@image.cropper('destroy')
@close()

@@ -1,22 +1,23 @@
class App.ImageService
@supported_types: ['image/jpeg', 'image/png']

@resizeForAvatar: (dataURL, x, y, callback) =>
@resizeForAvatar: (dataURL, x, y, type = @supported_types[0], callback) =>
if @checkUrl(dataURL)
callback(dataURL)
else
@resize(dataURL, x, y, 2, 'image/jpeg', 0.7, callback)
@resize(dataURL, x, y, 2, type, 0.7, callback)

@resizeForApp: (dataURL, x, y, callback) =>
if @checkUrl(dataURL)
callback(dataURL)
else
@resize(dataURL, x, y, 2, 'image/png', 0.7, callback)

@resize: (dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quallity, callback, force = true) ->
@resize: (dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quality, callback, force = true) ->

# load image from data url
imageObject = new Image()
imageObject.onload = ->
imageObject.onload = =>
imageWidth = imageObject.width
imageHeight = imageObject.height
console.log('ImageService', 'current size', imageWidth, imageHeight)
@@ -68,26 +69,26 @@ class App.ImageService
context = canvas.getContext('2d')
context.drawImage(imageObject, 0, 0, imageWidth, imageHeight)

# set quallity based on image size
if quallity == 'auto'
# set quality based on image size
if quality == 'auto'
if x < 200 && y < 200
quallity = 1
quality = 1
else if x < 400 && y < 400
quallity = 0.9
quality = 0.9
else if x < 600 && y < 600
quallity = 0.8
quality = 0.8
else if x < 900 && y < 900
quallity = 0.7
quality = 0.7
else
quallity = 0.6
quality = 0.6

# execute callback with resized image
newDataUrl = canvas.toDataURL(type, quallity)
newDataUrl = canvas.toDataURL(@validateType(type), quality)
if resize
console.log('ImageService', 'resize', x/sizeFactor, y/sizeFactor, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
console.log('ImageService', 'resize', x/sizeFactor, y/sizeFactor, quality, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
callback(newDataUrl, x/sizeFactor, y/sizeFactor, true)
return
console.log('ImageService', 'no resize', x, y, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
console.log('ImageService', 'no resize', x, y, quality, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
callback(newDataUrl, x, y, false)

# load image from data url
@@ -96,3 +97,11 @@ class App.ImageService
@checkUrl: (dataURL) ->
ignore = /\.svg$/i
ignore.test(dataURL)

# check if the image type is supported
# otherwise return our standard image type (the first listed supported type)
@validateType: (type) =>
if @supported_types.indexOf(type) == -1
return @supported_types[0]
else
return type
@@ -3786,7 +3786,6 @@ footer {
height: 40px;
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,.05);
border-radius: 100%;
display: inline-block;
vertical-align: bottom;
@@ -7486,7 +7485,6 @@ label + .wizard-buttonList {
border-radius: 100%;
overflow: hidden;
margin: 0 10px;
background: hsl(210,17%,98%);
}

.cropper-container {

0 comments on commit 2140134

Please sign in to comment.