0

我已经为下采样图像创建了代码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中实现高斯金字塔

我不太懂英语。

4

2 回答 2

2

您正在获取每一秒像素，但仅是水平方向。为了得到你想要的，你还需要垂直跳过每一秒像素。处理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/

于 2013-10-04T19:01:57.117 回答
1

您基本上是在创建原始图像的两个交错版本，一个奇数行和一个偶数行。

通过在源中跳过 2 个像素，您将只绘制一条“滞后”的线的一半，从而导致两条线并排（每隔一条线，因此“交错”）。如果你想通过像素迭代来做到这一点，你也需要计算并考虑垂直位置。

为什么不使用drawImage对图像进行下采样？

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

这将以 50% 的大小绘制您的图像。

在这里修改小提琴

于 2013-10-04T19:03:08.883 回答