Javascriptで画像をリサイズしてimgタグにData URI Scheme

Javascriptで画像をリサイズしてimgタグにData URI Scheme


Javascriptで選択した画像ファイルを、縦横比(アスペクト比)を保持しながらリサイズを行いPNG形式に変換してimgタグに表示する
<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");
        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>

<input type="file" name="imgfile" id="imgfile" accept="image/*" />
<br>画像ファイルを選択すると、200px×200px以内でアスペクト比を保持した縮小(拡大)画像を表示します。
<img id="preimg" />

画像ファイルを選択すると、200px×200px以内でアスペクト比を保持した縮小(拡大)画像が表示され、 デスクトップ等にドラッグドロップすると、200px200px×200px以内でアスペクト比を保持したPNGファイルとなります。


Mam's WebSite