Question

点击编辑链接，我会显示一个窗口，我想在其中使用Jcrop进行编辑。点击“编辑A＆＃39;链接它工作正常。但是，当我点击“编辑B＆＃39;”时，它会一直显示第一张图片。当我点击编辑B＆＃39;第一＆＃39;相反的情况发生了。

我不知道为什么，但好像我的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-holder div中的图像引用也不会更新。所以我假设我的.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>

Answer 1

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

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

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

CropThumb功能：

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

Jcrop在一个函数内没有第二次执行

1 个答案: