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