如何從HTML5畫布中刪除第二個像素？

Question

我已經為下采樣圖像創建了代碼jsfiddle.net/NHj2t ，但是我有一個問題：在畫布上我有重復的圖像，我不明白為什么-請解釋一下。

function downsample(srcImageData, width, height) {
   var backContext = document.createElement('canvas').getContext('2d');
   var result = backContext.createImageData(width, height);
   var d = 0;
   for (var p = 0; p < srcImageData.data.length; p += 8) {
        result.data[d] = srcImageData.data[p];
        result.data[d + 1] = srcImageData.data[p + 1];
        result.data[d + 2] = srcImageData.data[p + 2];
        result.data[d + 3] = srcImageData.data[p + 3];
        d += 4;
   }
   srcImageData = result;
   return srcImageData;
}

如何從畫布上刪除每隔一個像素？

我想對圖像進行下采樣。 我試圖在JavaScript 信息1中實現高斯金字塔

我的英語不太好。

Answer 1

您每秒鍾拍攝一次，但僅水平拍攝一次。 要獲得所需的內容，您還需要垂直跳過第二個像素。 處理width像素的width數量后，您要跳過整行像素，即向前跳過width像素。 希望您能理解我的意思。

var backContext = document.createElement('canvas').getContext('2d');
var skip = 2;
var result = backContext.createImageData(width/skip, height/skip);
var d = 0;
for (var y = 0; y < height; y += skip) {
    for (var x = 0; x < width; x += skip) {
        for (var c = 0; c < 4; c++) {
            result.data[d++] = srcImageData.data[(y*width+x)*4+c];
        }
    }
}

更新的小提琴： http : //jsfiddle.net/NHj2t/2/

Answer 2

您基本上是在創建原始圖像的兩個交錯版本，一個奇數行和一個偶數行。

通過在源中跳過2個像素，您將只畫出一半的線，其中一個線“滯后”，從而導致兩行並排（每隔一行，因此“交錯”）。 如果要通過像素迭代進行此操作，則也需要計算並考慮垂直位置。

為什么不使用drawImage對圖像進行下采樣？

context.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5);

這將以50％的大小繪制圖像。

在這里修飾小提琴