canvasのジャギーについて

初心者です。
大きい画像をdrawImageで縮小して描写すると、ジャギーがひどくなってしまいます。
色々調べてみましたが、いまいちわかりませんでした。
何か効果的な解決方法を教えていただきたいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title></title>
6        <link rel="stylesheet" href="styles\master.css">
7        <script src="scripts\canvas.js" charset="utf-8"></script>
8    </head>
9    <body onload="init()">
10        <div id="screen">
11            <canvas id="canvas"></canvas>
12        </div>
13    </body>
14</html>
15

javascript
1var img = new Image();
2img.src = "http://4.bp.blogspot.com/-OtfkvQ6YhEI/V5XczoV8lOI/AAAAAAAA8uM/ks16au6Xssw78rdg9F6VDRhv6naz2jqlgCLcB/s800/job_it_dokata.png"
3
4function init(){
5    var canvas = document.getElementById("canvas");
6    var ctx = canvas.getContext("2d");
7    ctx.drawImage(img,0,0,105,140);
8}

css
1*{
2    margin: 0;
3    padding:0;
4    border:0;
5}
6
7#screen{
8    width:800px;
9    height:500px;
10    background-color: rgb(120,120,120);
11}
12
13#canvas{
14    width:100%;
15    height:100%;
16}
17

行動規範の内容に同意します

回答1件

ベストアンサー

canvas要素を用いて大きな画像を縮小した際, ピクセルデータの欠落による品質低下が目立つ場合は次の何れかの方法を用いて広範囲のピクセルデータがブレンドされるようにします.

目的のサイズに直接縮小するのではなく, 縮小処理を何度かに分けて行います.

例えば8分の1スケールとする場合は半分にする処理を3回繰り返します.

filterを使ってよいのであれば, blurを用いて元画像を一旦ぼかした上で縮小するときれいに縮小できます.

ここではインメモリcanvasを使ってオフスクリーンでの画像縮小を行っています. なお, 縮小途中の画像の一時保管先としてはcreatePatternメソッドによるCanvasPatternオブジェクトを用いるのが便利です.

JavaScript
1//書き込みたい画像
2const img = document.querySelector("img");
3//画像縮小用のインメモリcanvas
4const tmp = document.createElement("canvas");
5
6//初回書き込み
7tmp.width = img.naturalWidth;
8tmp.height = img.naturalHeight;
9const tctx = tmp.getContext("2d");
10tctx.drawImage(img, 0, 0);
11
12//リサイズ処理を3回繰り返す
13for(let i = 0; i < 3; i++){
14	//現在の描画内容をCanvasPatternオブジェクトとして保存
15	const pattern = tctx.createPattern(tmp, "no-repeat");
16	//canvasをリサイズ
17	tmp.width /= 2;
18	tmp.height /= 2;
19	//スケールを0.5倍に
20	tctx.scale(0.5, 0.5);
21	//パターン画像を描画する
22	tctx.fillStyle = pattern;
23	tctx.fillRect(0, 0, tmp.width * 2, tmp.height * 2);
24}
25
26//縮小結果を転写する
27const canvas = document.querySelector("canvas");
28canvas.width = tmp.width;
29canvas.height = tmp.height;
30const ctx = canvas.getContext("2d");
31ctx.drawImage(tmp, 0, 0);