Fixed FF issue with image resize.

This commit is contained in:
Martin Edenhofer 2015-03-18 11:38:05 +01:00
parent ca7bf185b1
commit f3b9e612b0
3 changed files with 104 additions and 100 deletions

View file

@ -108,25 +108,27 @@ class Index extends App.Controller
storeImage: (src) => storeImage: (src) =>
# store avatar globally # store avatar globally
params = @oldDataUrl = src
avatar_full: src
# add resized image
avatar = new App.ImageService( src )
params['avatar_resize'] = avatar.toDataURLForAvatar( 'auto', 160 )
# store on server site # store on server site
@ajax( store = (newDataUrl) =>
id: 'avatar_new' @ajax(
type: 'POST' id: 'avatar_new'
url: @apiPath + '/users/avatar' type: 'POST'
data: JSON.stringify( params ) url: @apiPath + '/users/avatar'
processData: true data: JSON.stringify(
success: (data, status, xhr) => avatar_full: @oldDataUrl
avatarHolder = $(App.view('profile/avatar-holder')( src: src, avatar: data.avatar ) ) avatar_resize: newDataUrl
@avatarGallery.append(avatarHolder) )
@pick avatarHolder.find('.avatar') processData: true
) success: (data, status, xhr) =>
avatarHolder = $(App.view('profile/avatar-holder')( src: src, avatar: data.avatar ) )
@avatarGallery.append(avatarHolder)
@pick avatarHolder.find('.avatar')
)
# add resized image
App.ImageService.resizeForAvatar( src, 'auto', 160, store )
onUpload: (event) => onUpload: (event) =>
callback = @storeImage callback = @storeImage
@ -269,7 +271,7 @@ class Camera extends App.ControllerModal
@shootButton @shootButton
.removeClass 'btn--success' .removeClass 'btn--success'
.addClass 'btn--danger' .addClass 'btn--danger'
.text App.i18n.translateInline('Discard') .text App.i18n.translateInline('Discard')
shoot: => shoot: =>
@photoTaken = true @photoTaken = true

View file

@ -25,11 +25,11 @@ class Index extends App.ControllerContent
# get data # get data
@ajax( @ajax(
id: 'getting_started', id: 'getting_started'
type: 'GET', type: 'GET'
url: @apiPath + '/getting_started', url: @apiPath + '/getting_started'
processData: true, processData: true
success: (data, status, xhr) => success: (data, status, xhr) =>
# redirect to login if master user already exists # redirect to login if master user already exists
if @Config.get('system_init_done') if @Config.get('system_init_done')
@ -81,6 +81,11 @@ class Admin extends App.ControllerContent
processData: true processData: true
success: (data, status, xhr) => success: (data, status, xhr) =>
# check if user got created right now
#if true
# @navigate '#getting_started/base'
# return
# redirect to login if master user already exists # redirect to login if master user already exists
if @Config.get('system_init_done') if @Config.get('system_init_done')
@navigate '#login' @navigate '#login'
@ -251,42 +256,41 @@ class Base extends App.ControllerContent
submit: (e) => submit: (e) =>
e.preventDefault() e.preventDefault()
# get params
params = @formParam(e.target)
# add logo
params['logo'] = @logoPreview.attr('src')
# add resized image
if params['logo']
resizeLogo = new App.ImageService( params['logo'] )
params['logo_resize'] = resizeLogo.toDataURLForApp( @logoPreview.width(), @logoPreview.height() )
@hideAlerts() @hideAlerts()
@disable(e) @disable(e)
@ajax( # get params
id: 'getting_started_base' @params = @formParam(e.target)
type: 'POST'
url: @apiPath + '/getting_started/base' # add logo
data: JSON.stringify( params ) @params.logo = @logoPreview.attr('src')
processData: true
success: (data, status, xhr) => store = (logoResizeDataUrl) =>
if data.result is 'ok' @params.logo_resize = logoResizeDataUrl
for key, value of data.settings @ajax(
App.Config.set( key, value ) id: 'getting_started_base'
if App.Config.get('system_online_service') type: 'POST'
@navigate 'getting_started/channel/email_pre_configured' url: @apiPath + '/getting_started/base'
data: JSON.stringify(@params)
processData: true
success: (data, status, xhr) =>
if data.result is 'ok'
for key, value of data.settings
App.Config.set( key, value )
if App.Config.get('system_online_service')
@navigate 'getting_started/channel/email_pre_configured'
else
@navigate 'getting_started/channel'
else else
@navigate 'getting_started/channel' for key, value of data.messages
else @showAlert( key, value )
for key, value of data.messages @enable(e)
@showAlert( key, value ) fail: =>
@enable(e) @enable(e)
fail: => )
@enable(e)
) # add resized image
App.ImageService.resizeForAvatar( @params.logo, @logoPreview.width(), @logoPreview.height(), store )
hideAlerts: => hideAlerts: =>
@$('.form-group').removeClass('has-error') @$('.form-group').removeClass('has-error')

View file

@ -1,59 +1,57 @@
class App.ImageService class App.ImageService
constructor: (url) ->
@orgDataURL = url
src: (url) => @resizeForAvatar: (dataURL, x, y, callback) =>
@orgDataURL = url if @checkUrl(dataURL)
callback(dataURL)
else
@resize( dataURL, x, y, 2, 'image/jpeg', 0.7, callback )
resize: ( x = 'auto', y = 'auto', sizeFactor = 1) => @toDataURLForApp: (dataURL, x, y, callback) =>
@canvas = document.createElement('canvas') if @checkUrl(dataURL)
context = @canvas.getContext('2d') callback(dataURL)
else
@resize( dataURL, x, y, 2, 'image/png', 0.7, callback )
@resize: ( dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quallity, callback) =>
# load image from data url # load image from data url
imageObject = new Image() imageObject = new Image()
imageObject.src = @orgDataURL imageObject.onload = =>
imageWidth = imageObject.width imageWidth = imageObject.width
imageHeight = imageObject.height imageHeight = imageObject.height
if y is 'auto' && x is 'auto'
x = imageWidth
y = imageHeight
if y is 'auto' && x is 'auto' # get auto dimensions
x = imageWidth if y is 'auto'
y = imageHeight factor = imageWidth / x
y = imageHeight / factor
# get auto dimensions if x is 'auto'
if y is 'auto' factor = imageWidth / y
factor = imageWidth / x x = imageHeight / factor
y = imageHeight / factor
if x is 'auto' if x < imageWidth || y < imageHeight
factor = imageWidth / y x = x * sizeFactor
x = imageHeight / factor y = y * sizeFactor
if x < imageWidth || y < imageHeight # create canvas and set dimensions
x = x * sizeFactor canvas = document.createElement('canvas')
y = y * sizeFactor canvas.width = x
canvas.height = y
# set canvas dimensions # draw image on canvas and set image dimensions
@canvas.width = x context = canvas.getContext('2d')
@canvas.height = y context.drawImage( imageObject, 0, 0, x, y )
# draw image on canvas and set image dimensions # execute callback with resized image
context.drawImage( imageObject, 0, 0, x, y ) newDataUrl = canvas.toDataURL( type, quallity )
@canvas callback(newDataUrl)
checkUrl: => # load image from data url
imageObject.src = dataURL
@checkUrl: (dataURL) ->
ignore = /\.svg$/i ignore = /\.svg$/i
ignore.test( @orgDataURL ) ignore.test( dataURL )
toDataURL: (type, quallity = 1) =>
#@resize()
@canvas.toDataURL( type, quallity )
toDataURLForAvatar: ( x, y ) =>
return if @checkUrl()
@resize( x, y, 2 )
@toDataURL( 'image/jpeg', 0.7 )
toDataURLForApp: ( x, y ) =>
return if @checkUrl()
@resize( x, y, 2 )
@toDataURL( 'image/png', 0.7 )