JCrop - JCrop持有人在移动/调整选择时显示不正确的图像。

Question

​

​

当移动或调整图像大小时，Jcrop图像保持器显示图像错误。我认为这与图像的trueSize有关。

它也发生在小图像，我认为这与加载一个未知大小的图像有关。

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>

​

正如您可以从上面的代码中看到的，我有一个容器可以捕捉所有的屏幕宽度，在这里我将使用HTML5阅读器加载图像预览。

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;
}

在CSS中，我将宽度限制在屏幕大小的100%，因为如果图像较小，我就不会缩放它。

下面是用户输入图像时调用的JavaScript。参数是img_preview的输入和ID：

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;
    }
}

请随时索取更多信息。

Answer 1

我找到了答案。问题是，我将宽度和高度属性设置为预览的<img>标记。

因为我想控制它的方面，所以在加载JavaScript之前对它进行了修改。

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

此外，这解决了错误的坐标问题。