From 2140134ebeb12c1c8c5e5eb23080116c56ec2456 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 14 Feb 2018 12:22:19 +0100 Subject: [PATCH] Avatars: support transparent avatars (png) fixes #1807 --- .../app/controllers/_profile/avatar.coffee | 14 ++++--- .../app/lib/app_post/image_service.coffee | 37 ++++++++++++------- app/assets/stylesheets/zammad.scss | 2 - 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_profile/avatar.coffee b/app/assets/javascripts/app/controllers/_profile/avatar.coffee index ce469bbca..0cea28e16 100644 --- a/app/assets/javascripts/app/controllers/_profile/avatar.coffee +++ b/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() diff --git a/app/assets/javascripts/app/lib/app_post/image_service.coffee b/app/assets/javascripts/app/lib/app_post/image_service.coffee index 5b0656e74..c68ed442d 100644 --- a/app/assets/javascripts/app/lib/app_post/image_service.coffee +++ b/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 diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index fafeafdf4..eef503d14 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/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 {