JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div>元画像(300x300)</div>
    <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" />    
</div>

<div class="container">
    <div>img要素のwidth,height属性で50%に縮小(150x150)</div>
    <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" width=150 height=150 />    
</div>

<div class="container">
    <div>canvasを使って実際のサイズを縮小(150x150)</div>
    <img id="dst"/>    
</div>

CSS

body {
    width: 100%;
    height: 100%;
}
.container {
    border: solid 1px;
    width: 100%;
    height: 100%;
}

JavaScript

/*
 * 実際のwidthとheightを縮小した画像をimg要素に描画
 */
$(function(){
    var scale = 0.5;
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var image = new Image();
    var reader = new FileReader();
    image.crossOrigin = "Anonymous";
    image.onload = function(event){
    console.log(event)
        var dstWidth = this.width * scale;
        var dstHeight = this.height * scale
        canvas.width = dstWidth;
        canvas.height = dstHeight;
        ctx.drawImage(this,0,0,this.width, this.height,0,0,dstWidth,dstHeight);
        $("#dst").attr('src', canvas.toDataURL());
    }
    image.src = "https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300";

});