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 Reader加载图像预览。

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>标记。

因为我想控制它的方面，我在加载Jcrop之前用JavaScript修改了它。

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

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

JCrop - JCrop支架在移动/调整大小选择时显示不正确的图像

1 个答案: