image-cropping.coffee

image-cropping.coffee

$image = $('#player_photo-preview')
$submit = $('#fake-submit')
$input = $('#player_photo')
$imageDataInput = $('#player_photo_crop_data')

form = document.forms[0]
formData = new FormData(form)

cropX = 0
cropY = 0
cropW = 0
cropH = 0
originalW = 0
originalH = 0
zoom = 1
minZoom = 0.5
aspectRatio = 285 / 215

smoothZoomArgs =
  width: 215,
  height: 285,
  animation_SPEED_ZOOM: 1,
  animation_SPEED_PAN: 1,
  zoom_OUT_TO_FIT: false,
  zoom_MAX: 100,
  button_AUTO_HIDE: true,
  on_IMAGE_LOAD: () ->
    # remove
  on_ZOOM_PAN_COMPLETE: () ->

    cropX = Math.abs Math.ceil(this._x)
    cropY = Math.abs Math.ceil(this._y)
    originalW = Math.ceil(this.oW)
    originalH = Math.ceil(this.oH)
    zoom = this._sc
    minZoom = this.rF
    resampleImage()

readURL = ($input) ->
  defer = new jQuery.Deferred()
  if $input.files and $input.files[0]
    reader = new FileReader()
    reader.onload = (event) ->
      defer.resolve(event.target.result)
    reader.readAsDataURL $input.files[0]
  else
    defer.reject()
    return
  return defer.promise()

$input.on 'change', ->
  getImage = readURL(event.target)
  getImage.done (image_data) =>
    $image.attr "src", image_data
    $image.width('auto')
    $image.height('auto')
    $image.smoothZoom('destroy')
    $image.load () ->
      $image.smoothZoom(smoothZoomArgs)

dataURItoBlob = (dataURI) ->
  byteString = atob(dataURI.split(",")[1])
  buffer = new ArrayBuffer(byteString.length)
  uint = new Uint8Array(buffer)
  i = 0

  while i < byteString.length
    uint[i] = byteString.charCodeAt(i)
    i++

  new Blob([buffer], type: "image/jpeg")

resampleImage = () ->

  resampledImage = new Image()
  resampledImage.src = $image.attr('src')
  # $(resampledImage).load () ->

  canvas = document.createElement('canvas')
  canvas.width = 215 * 1
  canvas.height = 285 * 1

  # $('body').append($(canvas))

  image = $image[0]

  context = canvas.getContext('2d')

  cropX = cropX * (1 / zoom)
  cropY = cropY * (1 / zoom)
  cropW = 215 / zoom
  cropH = cropW * aspectRatio
  resizeW = 215
  resizeH = 285

  canvas.width = canvas.width
  context.drawImage(image, cropX, cropY, cropW, cropH, 0, 0, resizeW, resizeH)

  dataURL = canvas.toDataURL('image/jpeg', 1)
  blob = dataURItoBlob(dataURL)

  formData.append('player[photo]', blob, "player-profile-photo.jpg")

  form.onsubmit = () ->
    event.preventDefault()

    $submit_button = $('form').find('input[type="submit"]')
    $submit_button.val('Saving, please wait...')
    $submit_button.attr('disabled', true)
    $submit_button.toggleClass('btn-success').toggleClass('btn-disabled')

    request = $.ajax
      url: form.getAttribute('action'),
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      type: form.getAttribute('method'),

    request.done (response) ->
      $submit_button.val('Saved!')
      $submit_button.toggleClass('btn-success').toggleClass('btn-disabled')
      window.location = "/admin/players"

    request.fail () ->
      $('#main').prepend('<p class="alert alert-danger">Something went wrong!</p>')

    return false