javascript - Uncaught ReferenceError : imageCrop is not defined

Question

我正在尝试在引导模式中上传并裁剪图像，我按照 codepen example 进行操作。 。除了 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');
    });

}

Answer 1

您需要包含 imageCrop 定义，按照您的 codepen 链接，您将在外部脚本中的 JS 设置中找到该脚本:ImageCrop .