Я пытаюсь загрузить и обрезать изображение в модальном режиме начальной загрузки, и я выполнил пример кода. Я не импортировал никакую библиотеку обрезки, кроме jquery, bootstrap и т. д. Я получаю сообщение об ошибке,
"Uncaught ReferenceError: imageCrop is not defined at cropImage (upload-image.js?v=20180410173156:55) at Image.img.onload (upload-image.js?v=20180410173156:41)"
Любую библиотеку, которую я должен использовать, или любой javascript, который я хочу написать? Я новичок в javascript
Мой Javascript:
$('#drop').on('click', function() {
$('#fileUpload').trigger('click');
});
$('#fileUpload').on('change', function(e) {
addImage(e.target);
});
$("#drop").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('dragging');
});
$("#drop").on("dragleave", function(e) {
$(this).removeClass('dragging');
});
$("#drop").on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
var data = e.dataTransfer || e.originalEvent.dataTransfer;
addImage(data);
});
function addImage(data) {
var file = data.files[0];
if (file.type.indexOf('image') === -1) {
alert('Sorry, the file you uploaded doesn\'t appear to be an image.');
return false;
}
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
if (img.width < 200 || img.height < 200) {
alert('Sorry, the image you uploaded doesn\'t appear to be large enough.');
return false;
}
cropImage(img);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
function cropImage(originalImage) {
$(originalImage).attr('id', 'fullImage');
$('#imageResize').html(originalImage);
// $('#sectionDragAndDrop').addClass('hidden');
$('#sectionResize').removeClass('hidden');
var newImage = new imageCrop('#fullImage', 200, 200);
$('#crop').on('click', function() {
var results = newImage.crop();
$('#thumbnail').html(results.img);
// $('#sectionResize').addClass('hidden');
$('#sectionThumbnail').removeClass('hidden');
});
}
Да, этот пример кода работает. но в шахте функция урожая не работает и отображает в консоли ошибку неперехваченной ссылки.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам необходимо включить определение imageCrop, следуя ссылке вашего кода, вы найдете сценарий в настройке JS во внешних сценариях: ImageCrop.
Черт побери меня в этом. +1 =)
Спасибо за вашу помощь. Но я не нашел там какой-либо ссылки, кроме библиотеки jquery (//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js)
под библиотекой jquery есть еще одна: (codepen.io/joshhunt18/pen/dtpzw), которая содержит определение imageCrop.
Я не могу этого понять. Я вижу пустое поле под библиотекой jquery (// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery .min.js) Не могли бы вы поместить сюда ссылку на библиотеку? заранее спасибо
вот ссылка: codepen.io/joshhunt18/pen/dtpzw, вам нужно скопировать определение функции и включить его в свой код.
Большое спасибо. Я понял. заранее спасибо
Ваш кодовый код работает