Nuxt SSR возвращает загруженные размеры изображения на сервер - PullRequest
Новая
       24

Nuxt SSR возвращает загруженные размеры изображения на сервер

0 голосов
/ 17 мая 2019

Я пытаюсь предварительно просмотреть фотографию профиля на существующем элементе img. Моя проблема в том, что новое измерение изображения становится неопределенным вне функции загрузки img.

Как я могу передать эти измерения на сервер, чтобычто я могу правильно изменить размер элемента img?

Я также пытался использовать Vuex Store для передачи измерений, но с такими же неопределенными результатами.

У меня также есть функция, которая прослушивает изменение размера, и после того, как пользователь меняет окно, размер img изменяется должным образом, однако я пытаюсь сделать это без триггера события.Даже когда я пытаюсь вручную вызвать событие изменения размера с помощью jQuery, оно не меняет размер.У меня сложилось впечатление, что каким-то образом размеры нового источника img не устанавливаются должным образом, пока изменение размера даже не обновит размеры? 

<b-img id="profilePhoto" v-bind="profile" :src="this.photo" class="profilePhoto" @change="handleResize()"></b-img>

export default {
        data() {
            return {
                errors:{},
                profile: {},
                fileDimensions: {},
                photo: '',
                form: this.$vform({
                    id: '',
                    name: '',
                    email: '',
                    password: '',
                    role: '',
                    bio: '',
                    photo: ''
                })
            }
        }
    }

getPhoto(e) {
    let file = e.target.files[0];
    if (typeof file !== 'undefined'){
        let reader = new FileReader()
        let limit = 1024 * 1024 * 2
        if (file.size > limit) {
            return false;
        }

        reader.onloadend = (file) => {
            this.form.photo = reader.result
            this.photo = this.form.photo
        }
        reader.readAsDataURL(file)

        $("<img/>",{
            load : function(){
                // will return dimensions fine if i use alert here
                this.fileDimensions = { width:this.width, height:this.height} ;
            },
            src  : window.URL.createObjectURL(file)
        });

        // becomes undefined outside of the load functions
        var aw = this.fileDimensions.width
        var ah = this.fileDimensions.height
        var ph = $('.profile').height()
        var pw = $('.profile').width()
        console.log(this.fileDimensions.width)
        if (ah>aw){
            this.profile = { width: ph, height: 'auto'}
        } else if (aw>ah) {
            this.profile = { width: 'auto', height: ph}
        } else {
            this.profile = { width: ph+10, height: pw+10}
        }
    }
}

Я ожидаю получить размеры такя могу определить, как установить свойства width и height для элемента img с его новым src, однако размерность становится неопределенной.

1 Ответ

0 голосов
/ 17 мая 2019

Я разобрался в другом посте. Я должен был создать обещание. Асинхронное ожидание при загрузке изображения 

getDimensions(src){
    return new Promise((resolve,reject) => {
        let img = new Image()
        img.onload = () => resolve({ height: img.height, width: img.width })
        img.onerror = reject
        img.src = src
    })
},
getPhoto(e) {
    let file = e.target.files[0];
    if (typeof file !== 'undefined'){
        let reader = new FileReader()
        let limit = 1024 * 1024 * 2
        if (file.size > limit) {
            return false;
        }

        reader.onloadend = (file) => {
            this.form.photo = reader.result
            this.photo = this.form.photo
        }
        reader.readAsDataURL(file)

        this.getDimensions(URL.createObjectURL(file))
        .then((dimensions) => {
            if (process.client){
                var ah = $('.profile').height()
                var aw = $('.profile').width()
                var ph = dimensions.height
                var pw = dimensions.width

                if (ph>pw){
                    this.profile = { width: ah+10, height: 'auto'}
                } else if (pw>ph) {
                    this.profile = { width: 'auto', height: ah+10}
                } else {
                    this.profile = { width: ah+10, height: aw+10}
                }
            }
        })
    }
}
...