Uncaught ReferenceError: imageCrop не определен

Я пытаюсь загрузить и обрезать изображение в модальном режиме начальной загрузки, и я выполнил пример кода. Я не импортировал никакую библиотеку обрезки, кроме 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');
    });

}

Ваш кодовый код работает

Sandwell 10.04.2018 17:51

Да, этот пример кода работает. но в шахте функция урожая не работает и отображает в консоли ошибку неперехваченной ссылки.

Lakshan Sandakelum 10.04.2018 17:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
1 120
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо включить определение imageCrop, следуя ссылке вашего кода, вы найдете сценарий в настройке JS во внешних сценариях: ImageCrop.

Черт побери меня в этом. +1 =)

justDan 10.04.2018 17:57

Спасибо за вашу помощь. Но я не нашел там какой-либо ссылки, кроме библиотеки jquery (//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js‌)

Lakshan Sandakelum 10.04.2018 18:12

под библиотекой jquery есть еще одна: (codepen.io/joshhunt18/pen/dtpzw), которая содержит определение imageCrop.

Hamza Fatmi 10.04.2018 18:17

Я не могу этого понять. Я вижу пустое поле под библиотекой jquery (// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery‌ .min.js) Не могли бы вы поместить сюда ссылку на библиотеку? заранее спасибо

Lakshan Sandakelum 10.04.2018 18:22

вот ссылка: codepen.io/joshhunt18/pen/dtpzw, вам нужно скопировать определение функции и включить его в свой код.

Hamza Fatmi 10.04.2018 18:24

Большое спасибо. Я понял. заранее спасибо

Lakshan Sandakelum 10.04.2018 18:47

Другие вопросы по теме