Jcrop的裁剪區域大小存在一些問題。在我自己的簡單應用程序中，我使用Jcrop沒有任何問題，但現在我在另一個Web應用程序（Virtual Viewer Snowbound）中使用Jcrop。這是我的自由問題的應用程序的截圖：Jcrop - 裁剪區域和圖像大小的問題
我添加了所有Jcrop JS和CSS文件到其他網站的文件夾到正確的路徑。我認爲文件位置沒有問題。但可能是該網站的CSS和Jcrop的CSS內部的衝突，並阻止它正常工作。
首先，我添加了這些庫的頭標籤的最下方側（我註釋掉第一個，因爲網站有jQuery的1.9.1版本，所以它衝突：
<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
然後Jcrop功能都寫：
jQuery(document).ready(function(){
jQuery(function ($) {
$('#vvImageCanvas').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [100,100,200,200],
bgColor: 'black',
allowSelect: true,
allowMove: true,
allowResize: true,
aspectRatio: 0
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObject = $("#vvImageCanvas")[0];
var canvas = $("#previewMyCanvas")[0];
var context = canvas.getContext("2d");
if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
};
}
);
});
正如你所看到的vvImageCanvas是保存圖像的畫布，我告訴previewMyCanvas帆布內預覽問題是croppable面積如果我補充一點，下面的代碼：。
style="width:auto!important; height:auto!important;"
到
<canvas id="vvImageCanvas" class="vvCanvas">
標籤，然後我有以下看法：
正如您在預覽看到我可以裁剪，我想，但croppable區沒有與圖片相同的尺寸。我認爲這是jcrop持有者div，但我不是專業的css問題。
如果我不添加這些樣式選項，然後我有：
的croppable區域具有相同的大小與圖片，但圖片變小，當你在預覽看到，耕地面積與我裁剪的地方不同。也許它會根據圖像的實際尺寸來裁剪。
那麼，如何使用Jcrop函數而沒有衝突。我加了
jQuery.noConflict(true);
但它沒有幫助。
謝謝。
編輯：
好吧，我意識到這個問題。
Jcrop函數應該在頁面加載後工作。但是我不能通過將這些代碼寫入document.ready或window.load塊來實現這一點。這就是提出這個問題的原因。
然後我通過點擊按鈕來運行代碼。有效。但我不知道它爲什麼不能在document.ready中工作，並且在按鈕單擊事件中工作。此外，我必須使它在頁面加載時自動工作，而不是通過單擊按鈕。
有沒有建議嗎？