函数中的 Jcrop 未第二次执行

Jcrop within a function not executed a second time

本文关键字：第二次 执行 Jcrop 函数      更新时间：2023-09-26

单击编辑链接时，我会显示一个窗口，我想在其中使用 Jcrop 进行编辑。单击"编辑A"链接后，它工作正常。但是当我单击"编辑B"时，它会一直显示第一张图像。当我先单击"编辑B"时，情况正好相反。

我不知道为什么，但似乎我的 Jcrop 函数第二次失败了。

指向可编辑的图像的链接：

<a id="btnEditThumb" href="#" onclick="return CropThumb(6544,'879_146_iStock-000002025938Small.jpg');">Edit A</a>
<a id="btnSetThumb" href="#" onclick="return CropThumb(6543,'879_497_iStock-000014805179Small.jpg');">Edit B</a>
<img src="" id="targetimage" alt="" />
<input type="hidden" id="imgid" />
<input type="hidden" id="workingimage" />

function jCrop() {
    var jcrop_api,boundx,boundy,
   xsize = 1;
    ysize = 1;
    console.log($('#targetimage').attr('src'));
    //the target image element is updated correctly, however, it seems as if the .Jcrop function is not applied again.
    $('#targetimage').Jcrop({
        onChange: storeCoords,
        onSelect: storeCoords,
        minSize: [190, 190],
        maxSize: [$('#targetimage').width(), $('#targetimage').height()],
        aspectRatio: xsize / ysize
    }, function () {
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
        jcrop_api.setSelect([0, 0, 190, 190]);
    });
}

function CropThumb(imgId, filename) {
    $('#targetimage').attr('src', 'http://www.mydomain.com/images/original/' + filename);
    $('#imgid').val(imgId);
    $('#workingimage').val(filename);
    jCrop();
    //show edit lightbox
    centerPopup('cropwindow', 'backgroundPopup');
    loadPopup('cropwindow', 'backgroundPopup');
}

但是在执行 jCrop 函数后，jcrop-holderdiv 中的图像引用也不会更新。所以我假设我的.Jcrop 函数未接受 #targetimage 元素的新 src 属性值。

<div class="jcrop-holder" style="width: 850px; height: 565px; position: relative; background-color: rgb(0, 0, 0);">
  <div style="position: absolute; z-index: 600; width: 190px; height: 190px; top: 0px; left: 0px;">
    <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
      <img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 850px; height: 565px;">
      <div class="jcrop-hline" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-vline right" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-vline" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;">
      </div>
    </div>
    <div style="width: 100%; height: 100%; z-index: 320; display: block;">
      <div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;">
      </div>
      <div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;">
      </div>
      <div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;">
      </div>
      <div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;">
      </div>
      <div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;">
      </div>
      <div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;">
      </div>
      <div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;">
      </div>
      <div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;">
      </div>
      <div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;">
      </div>
      <div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;">
      </div>
      <div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;">
      </div>
      <div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;">
      </div>
    </div>
  </div>
  <div class="jcrop-tracker" style="width: 854px; height: 569px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;">
  </div>
  <input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
  <img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" alt="" style="display: block; visibility: visible; width: 850px; height: 565px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.6;">
</div>

创建元素时，Jcrop仅适用于一个图像。您看到的图像不会更改，因为显示的图像元素是由 Jcrop 创建的，而您的图像元素是隐藏的（display：none）。最简单的解决方案是每次更改图像时重新创建图像元素。

在 HTML 中，将 img 标记替换为图像的包含div：

<div id="targetimagewrapper"></div>

和裁剪拇指功能：

function CropThumb(imgId, filename) {
  var image = $('<img src="http://www.mydomain.com/images/original/' + filename + '" id="targetimage" alt="" />');
  image.load(function(){
    $('#imgid').val(imgId);
    $('#workingimage').val(filename);
    jCrop();
    //show edit lightbox
    centerPopup('cropwindow', 'backgroundPopup');
    loadPopup('cropwindow', 'backgroundPopup');
  };
  $('#targetimagewrapper').empty().append(image);
}
相关文章：