HTML5 Canvas - ピクセルをズームする方法は？

Question

ピクセルを表示するには、どのようにキャンバスを拡大しますか？現在、scale（）関数を使用しようとすると、画像は常にアンチエイリアス処理されます。

プロパティmozImageSmoothingEnabledは機能しているようですが、Firefoxのみです。

Answer 1

私が知る限り、アンチエイリアスの動作は仕様に定義されておらず、ブラウザによって異なります。

CSSでキャンバスの幅/高さをたとえば300x300に設定してから、キャンバスの幅と高さの属性を150と150に設定すると、200％のズームで表示されます。これがアンチエイリアスを引き起こすかどうかはわかりませんが、それに一撃を与えてください。

Answer 2

私が知る限り、ブラウザで行われた再スケーリングは滑らかな補間になります。

JSでこれをしたいのであれば、JSにすべての作業をさせる必要があります。これは素晴らしいライブラリを見つけたり、自分で関数を書くことを意味します。それはこのように見えるかもしれません。しかし、それをより速くすることが可能であることを願っています。それが最も簡単なスケーリングアルゴリズムの1つであるため、おそらくもっと高速化する改善を考えている多くの人がいるでしょう。

function resize(ctx, sx, sy, sw, sh, tx, ty, tw, th) { 
    var source = ctx.getImageData(sx, sy, sw, sh); 
    var sdata = source.data; 

    var target = ctx.createImageData(tw, th); 
    var tdata = target.data; 

    var mapx = []; 
    var ratiox = sw/tw, px = 0; 
    for (var i = 0; i < tw; ++i) { 
     mapx[i] = 4 * Math.floor(px); 
     px += ratiox; 
    } 

    var mapy = []; 
    var ratioy = sh/th, py = 0; 
    for (var i = 0; i < th; ++i) { 
     mapy[i] = 4 * sw * Math.floor(py); 
     py += ratioy; 
    } 

    var tp = 0; 
    for (py = 0; py < th; ++py) { 
     for (px = 0; px < tw; ++px) { 
      var sp = mapx[px] + mapy[py]; 
      tdata[tp++] = sdata[sp++]; 
      tdata[tp++] = sdata[sp++]; 
      tdata[tp++] = sdata[sp++]; 
      tdata[tp++] = sdata[sp++]; 
     } 
    } 

    ctx.putImageData(target, tx, ty); 
} 

この関数は（SX、SY）の大きさの長方形（SW、SH）を取ると、（TW、TH）にサイズを変更して（TX、TY）でそれを描きます。