Jcrop不在第二次執行的功能

單擊編輯鏈接時，顯示一個窗口，我想在其中使用Jcrop進行編輯。當我點擊'編輯A'鏈接它工作正常。但是當我點擊'編輯B'時，它會一直顯示第一張圖片。當我點擊'編輯B'第一'相反的情況發生。Jcrop不在第二次執行的功能

我不知道爲什麼，但似乎我的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持有者格的圖像引用不會更新。所以我假設我的.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>

來源

2014-04-01 Flo

Jcrop只適用於一個圖像，當元素被創建時。您看到的圖像不會更改，因爲顯示的圖像元素是由Jcrop創建的，而您的圖像隱藏（顯示：無）。最簡單的解決方案是每次圖像更改時重新創建圖像元素。

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

在HTML，具有內含div用於圖像替換img標籤

來源

2014-04-01 14:44:29

Jcrop不在第二次執行的功能

回答

相關問題