Nuxt SSR return loaded image dimensions to server

Question

I'm trying to preview a profile photo on an existing img element my problem is that the new image dimension become undefined outside of the img load function.

How can i pass these dimensions to the server so that i can properly resize the img element?

I've tried using Vuex Store as well to pass the dimensions but with the same undefined results.

I also have a function that listens for resize and after a user changes the window the img is resized properly, however i'm trying to do this without the event trigger. Even when i try to manually trigger the resize event with jQuery it does not resize. I'm under the impression that somehow the dimension of the new img source are not being set properly until a resize even refreshes the dimensions?

<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}
        }
    }
}

I expect to get the dimensions so i can determine how to set the width and height properties for the img element with its new src however the dimension become undefined.

score 0 · Accepted Answer · answered May 17 '19 at 01:04

I figured it out through another post. I had to create a promise. async await in image loading

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}
                }
            }
        })
    }
}

Nuxt SSR return loaded image dimensions to server

1 Answers1