Question

我正在尝试在现有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}
        }
    }
}

我希望得到尺寸，以便我可以确定如何使用其新的src设置img元素的width和height属性，但是尺寸未定义。

Answer 1

我通过另一篇文章弄清楚了。我必须创造一个诺言。 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将加载的图片尺寸返回给服务器

1 个答案: