Avatars: support transparent avatars (png)

fixes #1807

app/assets/javascripts/app/controllers/_profile/avatar.coffee

@@ -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()
 

app/assets/javascripts/app/lib/app_post/image_service.coffee

@@ -1,10 +1,11 @@
 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)
@@ -12,11 +13,11 @@ class App.ImageService
     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

app/assets/stylesheets/zammad.scss

@@ -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 {