画像平滑化を設定してみた

ロウ
2019-09-27
ロウ
2019-09-27

前置き

imageSmoothingEnabledとimageSmoothingQualityを使って、キャンバスに描画された画像の平滑化を設定できます。今回は実践してみたいと思います。

imageSmoothingEnabled

imageSmoothingEnabledプロパティをtrue/falseに設定する。

```
<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>
 
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
    var image = newImage();
    image.addEventListener("load", imageLoaded);
    image.src = "img.jpg";
    image.width = 200;
    image.height = 200;

    function imageLoaded() {
      ctx.mozImageSmoothingEnabled = true;
      ctx.webkitImageSmoothingEnabled = true;
      ctx.msImageSmoothingEnabled = true;
      ctx.imageSmoothingEnabled = true;
      ctx.drawImage(image, 0, 0, 200, 200);
    }
  </script>
</body>
</html>

```

結果は以下のようになります。
imageSmoothingEnabled01.png

imageSmoothingQuality

imageSmoothingQualityプロパティをhigh/medium/lowに設定する。このプロパティが有効となるのは、imageSmoothingEnabledがtrueである必要があります。

```
<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>
 
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
    var image = newImage();
    image.addEventListener("load", imageLoaded);
    image.src = "img.jpg";
    image.width = 200;
    image.height = 200;

    function imageLoaded() {
      ctx.imageSmoothingQuality = "high";
      ctx.mozImageSmoothingEnabled = true;
      ctx.webkitImageSmoothingEnabled = true;
      ctx.msImageSmoothingEnabled = true;
      ctx.imageSmoothingEnabled = true;
      ctx.drawImage(image, 0, 0, 200, 200);
    }
  </script>
</body>
</html>

```

結果は以下のようになります。
imageSmoothingQuality01.png