4

我想对画布上的某些文本进行一些手动抗锯齿处理。我知道如何迭代图像/颜色数据，但不完全知道如何消除锯齿。

从谷歌搜索一下，似乎要进行抗锯齿处理，我需要一个原始图像作为样本，然后传递颜色数据，然后为每个像素取周围像素的平均值，然后复制这个新的值到我的抗锯齿图像的数据中。

我不确定的一点是如何“取平均”周围的像素。

我做了一个jsFiddle 来演示我到目前为止所做的事情。正如您将看到的，我正在从原始画布复制图像数据，使其变为负数，然后将其放入第二个画布中。

如果我更具体地说明我正在努力解决的问题，那么您究竟如何确定只有一个迭代器的循环中的周围像素是什么？而且平均值只是将最近的像素颜色值添加到当前像素值，然后除以像素数的情况吗？

这是我希望在其中操作数据的循环：

var imgData = originalContext.getImageData(0, 0, width, height);
var aliasedData = originalContext.createImageData(width, height);
aliasedData.data.set(imgData.data);

for (var i = 0; i < imgData.data.length; i += 4) {
    // just make the data negative to show something is happening
    aliasedData.data[i] = 255 - imgData.data[i];
    aliasedData.data[i + 1] = 255 - imgData.data[i + 1];
    aliasedData.data[i + 2] = 255 - imgData.data[i + 2];

    // need to get an average of surrounding pixels here
}
aliasedContext.putImageData(aliasedData, 0, 0);
4

0 回答 0