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

Posted 2023-02-25

【中文标题】JCrop - JCrop 持有人在移动/调整选择时显示不正确的图像

【英文标题】：JCrop - JCrop holder displays incorrect image when moving/resizing selection

【发布时间】：2015-11-11 12:37:22

【问题描述】：

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

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

html：

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

      <div class="img-slider image-preview">                    
        <img id="preview-4" src="holder.js/900x500" > 
      </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;
    

请随意询问更多信息。

【参考方案1】：

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

因为我想控制它的外观，所以我在加载 Jcrop 之前使用 JavaScript 对其进行了修改。

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

此外，这修复了错误的坐标问题。