特定のキャンバスサイズでできるだけファイルサイズが大きいpng画像を生成する

経緯

• 複数画像アップロード機能の上限値テストにて、画像サイズが600x500固定でできるだけファイルサイズが大きいpngファイルが必要になった。

plan

• 圧縮しにくいように、1ピクセルごとに異なる色で塗りつぶせばファイルサイズが増えるのでは？

do

• canvasを使用。

<canvas id="canvas" width="600" height="500"></canvas>
<script>
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext('2d');

  init = () => {
    for (let i=0; i<600; i++) {
      for (let j=0; j<500; j++) {
        drawRect(i, j, 1, 1);
      }
    }
  }

  drawRect = (x, y, width, height) => {
    context.fillStyle = 'rgba(' + x % 255 + ',' + y % 255 + ', ' + Math.floor( Math.random() * 255 ) + ', ' + Math.random() + ' )';
    context.fillRect(x, y, width, height);
  }

  init();

</script>

結果

• 約1MBのpngファイルができました。
  • 種類: PNG
  • 横幅 x 縦幅: 600px × 500px
  • ファイサイズ: 979,712byte