Vue cropperjs как отправить картинку формата jpeg?

Question

[WStanley]

Доброго дня всем!
Написал компонент который использует библиотеку cropperjs
На сервер отправляются файлы в формате png и я никак не могу сделать чтоб jpeg отправлялись.
Видимо не хватает знаний в js
Подскажите как сделать чтоб файл в jpeg конвертировать перед отправкой?

Функция отправки:

cropImage() {
    this.cropper.getCroppedCanvas({
        width: 800,
        height: 800,
        minWidth: 256,
        minHeight: 256,
        maxWidth: 800,
        maxHeight: 800,
    })
    .toBlob((blob) => {
        let formData = new FormData();  
        formData.append('image', blob, 'image.png');
        if (this.name) formData.append('name', this.name);
        axios({
            method: 'POST',
            url: '/user_load_post/',
            xsrfHeaderName: 'X-CSRFToken',
            headers: {
                'Content-Type': 'multipart/form-data',
                'X-CSRFToken': this.$getCookie('csrftoken')
            },
            data: formData
        })
        .then(response => console.log(response))
        .catch(error => console.log(error))
    })
},

Answer 1

[Михаил]

Чуть выше
https://developer.mozilla.org/en-US/docs/Web/API/H...

Comments

[WStanley]

Да, я уже нашел, сделал! Все равно спасибо!

Код:

this.cropper.getCroppedCanvas({
    width: 800,
    height: 800,
    minWidth: 256,
    minHeight: 256,
    maxWidth: 800,
    maxHeight: 800,
})
.toBlob((blob) => {
    let formData = new FormData();  
    formData.append('image', blob, 'image.jpeg');
    if (this.name) formData.append('name', this.name);
    axios({
        method: 'POST',
        url: '/user_load_post/',
        xsrfHeaderName: 'X-CSRFToken',
        headers: {
            'Content-Type': 'multipart/form-data',
            'X-CSRFToken': this.$getCookie('csrftoken')
        },
        data: formData
    })
    .then(response => console.log(response))
    .catch(error => console.log(error))
}, 'image/jpeg', 0.95)