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

How to remove every second pixel from the HTML5 canvas?

本文关键字：像素 一个 HTML5 布中移      更新时间：2023-09-26

我已经为缩减采样图像创建了代码 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

我不太懂英语。

您正在获取每秒像素，但只能水平拍摄。要获得您想要的内容，您还需要垂直跳过每秒像素。处理完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/

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

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

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

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

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

修改小提琴在这里

相关文章：