HTML5畫布 - 如何放大像素？

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

該函數將需要尺寸（SW，SH）的矩形在（SX，SY），它調整到（TW，TH）和在（TX，TY）繪製。