爲什麼Jcrop-tracker不顯示正確的位置？

在我的應用程序中，用戶可以拍攝照片或從設備上傳圖像。該圖像是Jcrop功能的來源。此功能正常工作，因爲它'正確'收割。然而，預覽剪裁內容的jcrop-tracker並不顯示它在圖像上的正確位置。爲什麼Jcrop-tracker不顯示正確的位置？

請看下面的例子：

當移動跟蹤到圖像的頂部，它會顯示出幾乎整個圖像。當進一步向下移動時，它什麼都不會顯示。這怎麼可能？

我的猜測是這是因爲jCrop有縮減圖片的問題（例如從設備相機拍攝的照片）。

我用CSS來縮減圖像，以便它可以適合在設備屏幕上：

#imgContainer { 
    max-width: 100%; 
    max-height: 100%; 
} 
#imgContainer img { 
    max-width: 100%; 
    max-height: 100%; 
}

有什麼辦法防止這種情況？

這裏是我的代碼：

$(window).load(function() { 

var jcrop_api, boundx, boundy; 

function updatePreview(c) { // croping image preview 
    if (parseInt(c.w) > 0) { 
     var rx = 220/c.w, ry = 220/c.h; 
    } 
} 
function showCoords(c) { // show all coords 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#x2').val(c.x2); 
    $('#y2').val(c.y2); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
} 

$('#cropImage').Jcrop({ 
    onChange: updatePreview, 
    onSelect: showCoords, 
    bgFade: true, 
    bgOpacity: .8, 
    aspectRatio: 1, 
    maxSize: [ 150, 150 ], 
    boxWidth: 284, 
    boxHeight: 382 
},function(){ 
    jcrop_api = this; 
}); 
var canvas = document.getElementById("canvasresult"); 
$("#m1-cropScreen-cropIt").on("click", function(){ 

    var context = canvas.getContext("2d"); 
    var img = document.getElementById("cropImage"), 
     $img = $(img), 
     imgW = img.naturalWidth, 
     imgH = img.naturalHeight; 

    console.log($img.width()); 
    console.log($img.height()); 

    var ratioY = imgH/$img.height(), 
     ratioX = imgW/$img.width(); 

    var getX = $('#x').val() * ratioX, 
     getY = $('#y').val() * ratioY, 
     getWidth = $('#w').val() * ratioX, 
     getHeight = $('#h').val() * ratioY; 

    context.drawImage(img,getX,getY,getWidth,getHeight,0,0,150,150); 

    $('#cropResult').attr('src', canvas.toDataURL()); 

}); 

});

來源

2014-03-13 Forza

你能發表一些我們可以直接測試的東西嗎？（我錯過了一些HTML源代碼，所以小提琴或其他東西都會很方便） – Veda

我想你的問題是由於沒有使用「正確的」圖片尺寸，而不是將它們「轉移」到實際的屏幕/顯示尺寸！此外，使用'max-height：100％'可能會導致圖像縱橫比發生變化（當圖像的高度高於100％寬度時的視口高度）。我認爲您必須根據視口寬度轉換圖片的寬度和高度，進行裁剪並將裁剪轉換回原始圖像大小。 – Netsurfer

嗯，你可能在這裏有一個觀點。任何想法如何將圖像轉換爲視口寬度的大小？ – Forza

紳士，我是在迴應你的延遲遺憾。謝謝大家誰回答我的問題。

我已經度過了非常繁忙的一週，所以我沒有多少時間在這個項目上工作。今天我再次拿起它，我第一次嘗試自己解決這個問題。

幸運的是，這次它工作。我結束了使用Jcrop的box sizing method。我相信我以前曾嘗試過，但這一次它完美無瑕。所以問題解決:)

來源

2014-04-03 12:14:15 Forza

不幸的是，這並沒有爲我工作，但我有一個不同的問題，我希望將有助於任何人有這個問題。

礦是由於一個CSS造型衝突。

From a 3rd party style sheet 
img { max-width: 100% } 

    My Style Sheet -- adding this fixed it 
.jcrop-holder img, img.jcrop-preview { max-width: none !important }

來源

2014-10-22 12:48:15

爲什麼Jcrop-tracker不顯示正確的位置？

回答

相關問題