Allow to set crop box and export image dimensions
This commit is contained in:
parent
7216ce97f7
commit
95cc46a44a
|
@ -6,8 +6,13 @@ class GitLabCrop
|
||||||
# Set defaults
|
# Set defaults
|
||||||
{
|
{
|
||||||
@filename
|
@filename
|
||||||
|
@previewImage = $('.avatar-image .avatar')
|
||||||
@form = @fileInput.parents('form')
|
@form = @fileInput.parents('form')
|
||||||
@modalCrop = '.modal-profile-crop'
|
@modalCrop = '.modal-profile-crop'
|
||||||
|
@exportWidth = 200
|
||||||
|
@exportHeight = 200
|
||||||
|
@cropBoxWidth = 200
|
||||||
|
@cropBoxHeight = 200
|
||||||
|
|
||||||
# Button where user clicks to open file dialog
|
# Button where user clicks to open file dialog
|
||||||
# If not passed as argument let's pick a default one
|
# If not passed as argument let's pick a default one
|
||||||
|
@ -40,6 +45,7 @@ class GitLabCrop
|
||||||
@fileInput.trigger('click')
|
@fileInput.trigger('click')
|
||||||
|
|
||||||
onModalShow: =>
|
onModalShow: =>
|
||||||
|
self = @
|
||||||
@modalCropImg.cropper(
|
@modalCropImg.cropper(
|
||||||
viewMode: 1
|
viewMode: 1
|
||||||
center: false
|
center: false
|
||||||
|
@ -57,8 +63,8 @@ class GitLabCrop
|
||||||
toggleDragModeOnDblclick: false
|
toggleDragModeOnDblclick: false
|
||||||
built: ->
|
built: ->
|
||||||
container = $(@).cropper 'getContainerData'
|
container = $(@).cropper 'getContainerData'
|
||||||
cropBoxWidth = 200;
|
cropBoxWidth = self.cropBoxWidth;
|
||||||
cropBoxHeight = 200;
|
cropBoxHeight = self.cropBoxHeight;
|
||||||
|
|
||||||
$(@).cropper('setCropBoxData',
|
$(@).cropper('setCropBoxData',
|
||||||
width: cropBoxWidth,
|
width: cropBoxWidth,
|
||||||
|
@ -77,8 +83,8 @@ class GitLabCrop
|
||||||
onUploadImageBtnClick: (e) =>
|
onUploadImageBtnClick: (e) =>
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
@setBlob()
|
@setBlob()
|
||||||
|
@setPreview()
|
||||||
@modalCrop.modal('hide')
|
@modalCrop.modal('hide')
|
||||||
# @form.submit();
|
|
||||||
|
|
||||||
onActionBtnClick: (btn) ->
|
onActionBtnClick: (btn) ->
|
||||||
data = $(btn).data()
|
data = $(btn).data()
|
||||||
|
@ -106,9 +112,15 @@ class GitLabCrop
|
||||||
array.push(binary.charCodeAt(k))
|
array.push(binary.charCodeAt(k))
|
||||||
new Blob([new Uint8Array(array)], type: 'image/png')
|
new Blob([new Uint8Array(array)], type: 'image/png')
|
||||||
|
|
||||||
|
setPreview: ->
|
||||||
|
@previewImage.attr('src', @dataURL)
|
||||||
|
|
||||||
setBlob: ->
|
setBlob: ->
|
||||||
dataURL = @modalCropImg.cropper('getCroppedCanvas').toDataURL('image/png')
|
@dataURL = @modalCropImg.cropper('getCroppedCanvas',
|
||||||
@croppedImageBlob = @dataURLtoBlob(dataURL)
|
width: 200
|
||||||
|
height: 200
|
||||||
|
).toDataURL('image/png')
|
||||||
|
@croppedImageBlob = @dataURLtoBlob(@dataURL)
|
||||||
|
|
||||||
getBlob: ->
|
getBlob: ->
|
||||||
@croppedImageBlob
|
@croppedImageBlob
|
||||||
|
|
Loading…
Reference in New Issue