Как получить обрезанное изображение после использования croppie для обрезки загрузки изображения - PullRequest
Новая
       23

Как получить обрезанное изображение после использования croppie для обрезки загрузки изображения

0 голосов
/ 01 апреля 2019

Я искал документацию, которая не выдает много, и нашел несколько человек с той же нерешенной проблемой.Я пытался использовать кроппи, чтобы обрезать загруженные изображения, до фактической загрузки.Функция обрезки все работает нормально, но загружается исходная версия без обрезки.С тех пор я узнал, что мне нужно каким-то образом получить обрезанную версию, поскольку она не добавлена ​​в форму.Он преобразуется в base64, который я назначил переменной, но я не знаю, как добавить его к данным формы.Любая помощь будет удивительной, как всегда.

$('#cropImageBtn').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'base64',
        format: 'jpeg',
        size: { width: 300, height: 400 }
    }).then(function (resp) {
        $('#item-img-output').attr('src', resp);
        $('#cropImagePop').modal('hide');
        var form = document.getElementById("add-event-form");

        var ImageURL = resp // Split the base64 string in data and contentType
        alert(ImageURL);
        var block = ImageURL.split(";");
        // Get the content type of the image
        var contentType = block[0].split(":")[1];// In this case "image/gif"
        // get the real base64 content of the file
        var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

        // Convert it to a blob to upload
        var blob = b64toBlob(realData, contentType);

        // Create a FormData and append the file with "image" as parameter name
        var formDataToUpload = new FormData(form);
        formDataToUpload.append("image1", blob);
        return ImageURL;
    });
});
                // End upload preview image
function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

Мне удалось найти нужные мне данные и сохранить их в ImageUrl, но мне нужно прикрепить их как данные к # add-event-form.Пожалуйста, помогите!

...