У меня есть некоторые проблемы с размером области обрезки Jcrop. В моем собственном простом приложении я использовал Jcrop без каких-либо проблем, но теперь я использую Jcrop в другом веб-приложении (Virtual Viewer Snowbound). Вот скриншот моего беспроблемного приложения:
Я добавил все файлы Jcrop js и css в папки другого веб-сайта по правильным путям. Я думаю, что нет проблем с расположением файлов. Но, вероятно, что-то внутри CSS этого веб-сайта и CSS Jcrop конфликтует и мешает ему работать должным образом.
Во-первых, я добавил эти библиотеки в самую нижнюю часть тегов заголовка (первый я закомментировал, потому что на сайте установлена версия 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. Проблема заключается в размере области обрезки. Если я добавлю этот код ниже:
style="width:auto!important; height:auto!important;"
в
<canvas id="vvImageCanvas" class="vvCanvas">
теги, то у меня есть следующий вид:
Как вы видите в предварительном просмотре, я могу обрезать, где хочу, но область обрезки не имеет того же размера, что и изображение. Я думаю, что это div jcrop-holder, но я не профессионал в вопросах css.
Если я не добавлю эти параметры стиля, у меня будет следующее:
Обрезаемая область имеет тот же размер, что и изображение, но изображение становится меньше, и, как вы видите в предварительном просмотре, обрезанная область отличается от области, которую я обрезаю. Возможно, он обрезает реальный размер изображения.
Итак, как я могу использовать функции Jcrop без конфликтов. я добавил
jQuery.noConflict(true);
но это не помогло.
Спасибо.
ИЗМЕНИТЬ:
Хорошо, я понял проблему.
Функции Jcrop должны работать после загрузки страницы. Но я не могу добиться этого, записывая эти коды в блоки document.ready или window.load. Это и было причиной того, что я задал этот вопрос.
Затем я запустил код нажатием кнопки. Это сработало. Но я не знаю, почему он не работает внутри document.ready и работает в событии нажатия кнопки. Также я должен заставить его работать при загрузке страницы автоматически, а не по нажатию кнопки.
Любой совет?
