Javascriptで選択した画像ファイルを、縦横比（アスペクト比）を保持しながらリサイズを行いPNG形式に変換してimgタグに表示する
html,javascriptソースコード
<script>
window.addEventListener('load',function(){
document.getElementById("imgfile").addEventListener("change",function(){
let file = event.target.files[0];
let reader = new FileReader();
let img = new Image();
img.onload=function(){
let w,h,px=200;
//縦横比を変えない幅高さを計算する
if(img.width>img.height){
w=px;
h=img.height*w/img.width;
}else{
h=px;
w=img.width*h/img.height;
}
let can = document.createElement("canvas");
var ctx = can.getContext("2d", {willReadFrequently:true});
can.width=w;
can.height=h;
ctx.drawImage(img,0,0,img.width,img.height,0,0,w,h);
let src=can.toDataURL("image/png");
document.getElementById("preimg").src=src;
}
reader.onload = function(event) {
img.setAttribute("src", reader.result);
};
reader.readAsDataURL(file);
});
});
</script>