イメージのサイズを自由に。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>画像サイズ変更</title>

  </head>
  <body>
<div style="cursor:url(./images/A4-80.png), pointer" > 
//ポインターに使いたい画像をimagesフォルダーから選ぶのを忘れないように。<br>
<br>
 ファイル：<input type="file" accept="image/jpeg,image/png,image/gif" onchange="fileup(this)" /><br>
<br>
ボタンを押して画像ファイルを選択します。するとサイズの違う画像が４種類表示されます。<br>
<br>
倍率なども自分で自由に設定できます。プログラムの中の320なら320を追いかけて他の数字にするだけなので試してみよう。<br>

<div>
    <img src="" id="img320" />
    <img src="" id="img160" />
    <img src="" id="img80" />
    <img src="" id="img32" />
  
</div>

各々の画像の上で右クリックをすると、画像をクリップボードにペーストする事ができます。<br>
そしてそれをpngという拡張子をつけてセーブする事ができます。<br>

</div>
 
<script type="text/javascript">
  const fileup = (e) => {
    const img = document.getElementById('img');
    const reader = new FileReader();
    const imgReader = new Image();
    const imgWidth320 = 320;
    const imgWidth160 = 160;
    const imgWidth80 = 80;
    const imgWidth32 = 32;
    reader.onloadend = () => {
      imgReader.onload = () => {
        const imgType = imgReader.src.substring(5, imgReader.src.indexOf(';'));
        const imgHeight320 = imgReader.height * (imgWidth320 / imgReader.width);
        const imgHeight160 = imgReader.height * (imgWidth160 / imgReader.width);
        const imgHeight80 = imgReader.height * (imgWidth80 / imgReader.width);
        const imgHeight32 = imgReader.height * (imgWidth32 / imgReader.width);
        const canvas320 = document.createElement('canvas');
        const canvas160 = document.createElement('canvas');
        const canvas80 = document.createElement('canvas');
        const canvas32 = document.createElement('canvas');
        canvas320.width = imgWidth320;
        canvas320.height = imgHeight320;
        const ctx320 = canvas320.getContext('2d');
        ctx320.drawImage(imgReader,0,0,imgWidth320,imgHeight320);
        img320.src = canvas320.toDataURL(imgType);
        
        canvas160.width = imgWidth160;
        canvas160.height = imgHeight160;
        const ctx160 = canvas160.getContext('2d');
        ctx160.drawImage(imgReader,0,0,imgWidth160,imgHeight160);
        img160.src = canvas160.toDataURL(imgType);
        
        canvas80.width = imgWidth80;
        canvas80.height = imgHeight80;
        const ctx80 = canvas80.getContext('2d');
        ctx80.drawImage(imgReader,0,0,imgWidth80,imgHeight80);
        img80.src = canvas80.toDataURL(imgType);
        
        canvas32.width = imgWidth32;
        canvas32.height = imgHeight32;
        const ctx32 = canvas32.getContext('2d');
        ctx32.drawImage(imgReader,0,0,imgWidth32,imgHeight32);
        img32.src = canvas32.toDataURL(imgType);
      }
      imgReader.src = reader.result;
    }
    reader.readAsDataURL(e.files[0]);
  }
</script>
  </body>
</html>

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >第2時限：美術

2-6:ハードディスクにある画像のサイズを変更してみよう。

ファイル選択してやってみよう

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング