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中实现高斯金字塔 info 1

我不太懂英语。

Answer 1

您正在拍摄每隔一个像素，但只是水平拍摄。要获得您想要的效果，您还需要垂直跳过每隔一个像素。在处理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％的尺寸绘制您的图像。

<强> Modified fiddle here

如何从HTML5画布中删除每隔一个像素？

2 个答案: