Cropper: Replace Image from Input File

[jloguercio]

Got an input file to select the image, how can i replace the actual image if i select another?
Replace example doesn't work for me or i don't know how to implement it

this is my code:

$(document).ready(function() {
    $("input:file").change(function() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("previewImage").src = oFREvent.target.result;
            var $image = $("#previewImage");

            $image.cropper({
                aspectRatio: 1 / 1,
                movable: false,
                zoomable: false,
                rotatable: false,
                scalable: false,
                crop: function(e) {
                    // Output the result data for cropping image.
                    $("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
                }
            });
        };
    });
});

[fengyuanchen]

You should destroy the existed cropper first before you replace the image:

$(function() {
  var $image = $("#previewImage");
  var $input = $("[name='croppResult']");

  $("input:file").change(function() {
    var oFReader = new FileReader();

    oFReader.readAsDataURL(this.files[0]);

    oFReader.onload = function (oFREvent) {

      // Destroy the old cropper instance
      $image.cropper('destroy');

      // Replace url
      $image.attr('src', this.result);

      // Start cropper
      $image.cropper({
        aspectRatio: 1,
        movable: false,
        zoomable: false,
        rotatable: false,
        scalable: false,
        crop: function(e) {
          $input.val(e.x + ", " + e.y +"," + e.width + "," + e.height);
        }
      });
    };
  });
});

[backslash112]

+1

[ammaar-s63]

Is there a possible way to validate the image dimensions like not less than 500x500 before initiating the cropper ?

[fengyuanchen]

@ammaar-s63 Here is an example:

var image = new Image();

image.onload = function () {
  // Ignore all images that are less than 500x500px
  if (image.naturalWidth < 500 || image.naturalHeight < 500) {
    alert('Please choose a bigger image than 500x500px!');
    return;
  }

  var cropper = $(image).cropper(options);
  // ...
};

image.src = '/path/to/your/target/image.jpg';

[ammaar-s63]

Actually I am loading the image using FileReader, hence it results the resulted img source as base64.
So I managed to build a new image and validated the dimensions.

$('#profile_picture_select').change ->
   read_url this

read_url = (input) ->
 if input.files and input.files[0]
   reader = new FileReader
    reader.onloadend = ((file) ->
      (e) ->
        $('#cropper_canvas').attr 'src', e.target.result
       if validated_image() # only initialize the Cropper if the image has valid dimensions.
          instantiate_cropper() # this initialize the coppper stuff 
    )(input.files[0])
    reader.readAsDataURL input.files[0]

validated_image = ->
  image = new Image
  result = false
  image.onload = ->
    result = validate_image_dimensions(image)
  image.src = $('#cropper_canvas').src;
  result

validate_image_dimensions = (image) ->
  valid_image_width = 500
  valid_image_height = 500

  if image.width < valid_image_width || image.height < valid_image_height
    alert('Your image must be equal to or greater than 500px')
    $('#profile_picture_select').val('')
    $('#cropper_canvas').removeAttr('src')
    return false

  return true

[ammaar-s63]

somehow I am not able to get the validation thing up and running, It doesn't validate even sometime doesn't go into validated_image() function.