updateVars is now called when the image finished loading

This commit is contained in:
nilsding 2014-12-29 17:22:43 +01:00
parent 338fa5bdb2
commit 8998b84027
1 changed files with 16 additions and 13 deletions

View File

@ -16,6 +16,19 @@
cropper = ($ '#profile-picture-cropper') cropper = ($ '#profile-picture-cropper')
preview = ($ '#profile-picture-preview') preview = ($ '#profile-picture-preview')
updateVars = (data, action) ->
($ '#crop_x').val Math.floor(data.x / data.scale)
($ '#crop_y').val Math.floor(data.y / data.scale)
($ '#crop_w').val Math.floor(data.w / data.scale)
($ '#crop_h').val Math.floor(data.h / data.scale)
# rx = 100 / data.w
# ry = 100 / data.h
# ($ '#profile-picture-preview').css
# width: Math.round(rx * preview[0].naturalWidth) + 'px'
# height: Math.round(ry * preview[0].naturalHeight) + 'px'
# marginLeft: '-' + Math.round(rx * data.x) + 'px'
# marginTop: '-' + Math.round(ry * data.y) + 'px'
cropper.on 'load', -> cropper.on 'load', ->
side = if cropper[0].naturalWidth > cropper[0].naturalHeight side = if cropper[0].naturalWidth > cropper[0].naturalHeight
cropper[0].naturalHeight cropper[0].naturalHeight
@ -25,19 +38,9 @@
cropper.guillotine cropper.guillotine
width: side width: side
height: side height: side
onChange: (data, action) -> onChange: updateVars
console.log data
($ '#crop_x').val Math.floor(data.x / data.scale) updateVars cropper.guillotine('getData'), 'drag' # just because
($ '#crop_y').val Math.floor(data.y / data.scale)
($ '#crop_w').val Math.floor(data.w / data.scale)
($ '#crop_h').val Math.floor(data.h / data.scale)
# rx = 100 / data.w
# ry = 100 / data.h
# ($ '#profile-picture-preview').css
# width: Math.round(rx * preview[0].naturalWidth) + 'px'
# height: Math.round(ry * preview[0].naturalHeight) + 'px'
# marginLeft: '-' + Math.round(rx * data.x) + 'px'
# marginTop: '-' + Math.round(ry * data.y) + 'px'
($ '#cropper-zoom-out').click -> cropper.guillotine 'zoomOut' ($ '#cropper-zoom-out').click -> cropper.guillotine 'zoomOut'
($ '#cropper-zoom-in').click -> cropper.guillotine 'zoomIn' ($ '#cropper-zoom-in').click -> cropper.guillotine 'zoomIn'