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

View file

@ -25,11 +25,11 @@ class Index extends App.ControllerContent
# get data
@ajax(
id: 'getting_started',
type: 'GET',
url: @apiPath + '/getting_started',
processData: true,
success: (data, status, xhr) =>
id: 'getting_started'
type: 'GET'
url: @apiPath + '/getting_started'
processData: true
success: (data, status, xhr) =>
# redirect to login if master user already exists
if @Config.get('system_init_done')
@ -81,6 +81,11 @@ class Admin extends App.ControllerContent
processData: true
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
if @Config.get('system_init_done')
@navigate '#login'
@ -251,42 +256,41 @@ class Base extends App.ControllerContent
submit: (e) =>
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()
@disable(e)
@ajax(
id: 'getting_started_base'
type: 'POST'
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'
# get params
@params = @formParam(e.target)
# add logo
@params.logo = @logoPreview.attr('src')
store = (logoResizeDataUrl) =>
@params.logo_resize = logoResizeDataUrl
@ajax(
id: 'getting_started_base'
type: 'POST'
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
@navigate 'getting_started/channel'
else
for key, value of data.messages
@showAlert( key, value )
for key, value of data.messages
@showAlert( key, value )
@enable(e)
fail: =>
@enable(e)
fail: =>
@enable(e)
)
)
# add resized image
App.ImageService.resizeForAvatar( @params.logo, @logoPreview.width(), @logoPreview.height(), store )
hideAlerts: =>
@$('.form-group').removeClass('has-error')

View file

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