JCrop

Question

当移动或调整图像大小时，Jcrop 图像支架显示图像错误。我认为这与图像的真实大小有关。

小图片也会出现这种情况，我认为这与加载未知大小的图片有关。

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 支架在选择 moving/resizing 时显示不正确的图像

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

html

css

jquery

image-processing