1

Почему при таких настройках, после обрезки изображения, оно теряет качество в 2 раза?

$('#input-avatar').on('change', function (e) {
        let files = e.target.files;
        let done = function (url) {
            input.value = '';
            image.src = url;
            $modal.modal('show');
        };
        let reader;
        let file;
        let url;

        if (files && files.length > 0) {
            file = files[0];

            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });

    $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 1,
        });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
    });

    $('#crop').on('click', function () {
        let initialAvatarURL;
        let canvas;

        $modal.modal('hide');

        if (cropper) {
            canvas = cropper.getCroppedCanvas({
                width: 315,
                height: 360,
                minWidth: 315,
                minHeight: 360,
                maxWidth: 4096,
                maxHeight: 4096,
                fillColor: '#fff',
                imageSmoothingEnabled: false,
                imageSmoothingQuality: 'high'
            });
            initialAvatarURL = avatar.src;
            avatar.src = canvas.toDataURL();
            canvas.toBlob(function (blob) {
                let formData = new FormData();
                formData.append('avatar', blob);
                formData.append('action', 'avatar');
                formData.append('_token', token);
                $.ajax('/profile/me/update', {
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response){
                        if (response.error == 0){
                            toast.fire({
                                icon: 'success',
                                title: response.message
                            });
                            $('#avatar').css('background-image','url(/storage/' + response.user_avatar + ')');
                        }else{
                            toast.fire({
                                icon: 'error',
                                title: response.message
                            });
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        toast.fire({
                            type: 'error',
                            title: jqXHR.responseJSON.message
                        });
                    }
                });
            });
        }
    });

1 ответ 1

1

метод toDataUrl(), по дефолту возвращает изображение в формате image/png. При несовпадении этого формата с исходным форматом картинки - могут быть различные проблемы. Я сталкивался с увеличением веса в 2 раза. Попробуйте передать в метод соответствующий тип картинки. Так же, метод toDataUrl(), для изображений в формате image/jpeg, по умолчанию возвращает их в качестве 0.92. Попробуйте установить качество в значение 1. Например, toDataUrl(type, 1)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.