есть ли способ изменить размер изображения в соответствии с размером и разрешением изображения, которое пользователь отправляет на реагирование js приложение чата

Question

Я работаю над приложением чата, в котором я использую socket.io, если пользователь отправляет какие-либо изображения, то размер изображения и разрешение изображения различаются в зависимости от изображения, отправляемого в чате. Поэтому я хочу изменить его размер, чтобы он мог поместиться в теле сообщения. Есть ли способ сделать это? или любое другое предложение изменить размер или что-то .....

this.socket.on('RECEIVE_FILE', function(data){
        addFile(data);
    });
    const addFile = data=>{
        console.log("File data",data);
        console.log("file : ",data.file,data.fileName,data.author,data.author_user_id);
        this.setState({messages : [...this.state.messages,data]});
        console.log("this.state.file : ",this.state.file);
        if(this.refs.canvas!==undefined)
        {
            const ctx = this.refs.canvas.getContext('2d');
            let canvas_width = 300;
            let canvas_height = 300;
            let image = new Image();
            image.src = data.file;
            image.onload = ()=> {
                ctx.drawImage(image,
                    0,0,image.width,image.height,
                    0,0,canvas_width,canvas_height
                );
            }
            this.setState({fileUpload:''});}
        }

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