Fixed FF issue with image resize.
This commit is contained in:
Martin Edenhofer
parent
ca7bf185b1
commit
f3b9e612b0
3 changed files with 104 additions and 100 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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 )
|
||||
|
|
|
|||
Loading…
Reference in a new issue