HTML5 Canvas - 픽셀을 확대하는 방법?

Question

Canvas를 확대하여 픽셀을 보는 방법은 무엇입니까? 현재 scale() 함수를 사용하려고하면 이미지가 항상 앤티 엘리 어싱됩니다.

속성이 mozImageSmoothingEnabled 인 것처럼 보이지만 Firefox에만 해당됩니다.

Answer 1

내가 아는 한 앤티 앨리어싱 동작은 사양에 정의되어 있지 않으며 브라우저에 따라 달라집니다.

CSS를 사용하여 캔버스의 너비/높이를 예를 들어 300x300으로 설정 한 다음 캔버스 너비와 높이 특성을 150과 150로 지정하면 200 % 확대되어 나타납니다. 이것이 앤티 앨리어싱을 트리거할지 여부는 확실하지 않지만 한 번 시도해보십시오.

Answer 2

지금까지 브라우저에서 재조정을 수행하면 부드러운 보간이 발생합니다.

JS로이 작업을하고 싶다면 JS가 모든 작업을 수행해야합니다. 이것은 훌륭한 라이브러리를 찾거나 직접 함수를 작성하는 것을 의미합니다. 이렇게 보일 수 있습니다. 그러나 더 빨리 할 수 ​​있기를 바랍니다. 가장 단순한 스케일링 알고리즘 중 하나이기 때문에 더 빨리 처리 할 수있는 개선 방법을 생각해 본 많은 사람들이있을 것입니다.

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); 
} 

이 함수 (SY, SX)에 크기 (SW, SH)의 구형 걸릴 것이다 (TW, 회)로 크기를 조정하고 (TX, TY)에 그것을 그린다.