Search code examples
jqueryhtmlcssimage-processingjcrop

JCrop - JCrop holder displays incorrect image when moving/resizing selection

enter image description here

When moving or resizing image the Jcrop image holder displays the image wrong. I think this has to do with the trueSize of the image.

It also happens with small images, I think it has to do with loading a image with an unknown size.

The HTML:

<div class="row " >
   <div class="col-xs-12">

      <div class="img-slider image-preview">                    
        <img id="preview-4" src="holder.js/900x500" alt="Preview de la imagen"> 
      </div>
      <div class="subida-img">

        <?php 
            echo $this->Form->input('Imagen4',array(
                'type' => 'file',
                'label' => 'Imagen 4',
                'class' => 'input-image',
                'data-preview' => '#preview-4'              
            )); 
        ?>
        <div class="preview-controls">
            <button class="btn btn-primary">Seleccionar area de recorte</button>
        </div>
    </div>
</div>

As you can see from the code above, I have a container that ocupies all the screen width, where I will load the image preview with HTML5 Reader.

The CSS:

.img-slider{
  max-width: 100%;
  height: auto;
}
.img-slider img{
  margin-top: 25px;
  max-width: 100% !important;
  height: auto !important;
}

.preview-controls{
  width: 200px;
}

.subida-img{
  border: 1px solid #000;
  width: auto;
  padding: 15px 15px;
  float: left;
  text-align: center;
  margin-top: 10px;

}
.input-image{
  float: left;
  margin-bottom: 15px;
}

In the CSS I put a width limit in a 100% of screen size because if image is smaller I don't wan't to zoom it.

Here is the JavaScript I call when the user inputs a image. The parameters are the input and the ID of the img_preview:

function previewImage(input,img_preview) {
    var cropX,cropY,cropW,cropH;
    var preview = img_preview;
    cropX= 0;
    cropY= 0;
    cropW= window.innerWidth;
    cropH= 5*window.innerWidth/9;

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;

            image.onload = function(){
                console.log (this.width);
                preview.attr('width',this.width);
                preview.attr('height',this.height);
                preview.attr('src', e.target.result);
                $(preview).Jcrop({                  
                    setSelect: [cropX,cropY,cropW,cropH],
                    aspectRatio:9/5,
                    allowSelect: true,
                    trueSize : [this.width, this.height]
                });

            };


            $(preview).data('crop-y',cropY);
            $(preview).data('crop-x',cropX);
            $(preview).data('crop-w',cropW);
            $(preview).data('crop-h',cropH);            
        }
        reader.readAsDataURL(input.files[0]);
        return true;
    } else {
        preview.attr('src', 'holder.js/900x500');
        return false;
    }
}

Please fell free to ask for further information.

Solution

  • I found the answer. The problem was that I was setting width and height attributes to the <img> tag for the preview.

    Because I wanted to hold the control over it's aspect, I modified it with JavaScript before loading Jcrop.

    $(preview).css('height','auto');
$(preview).css('width','auto');

    Also, this fixes wrong coordinates issue.