4

キャンバス上のテキストに手動でアンチエイリアスを適用したいと考えています。画像/色データを反復処理する方法は知っていますが、アンチエイリアスの方法は正確にはわかりません。

少しグーグルで調べてみると、アンチエイリアシングを行うようです。サンプルとして使用する元の画像が必要です。次に、カラーデータを渡し、各ピクセルについて周囲のピクセルの平均を取り、この新しい画像をコピーしますアンチエイリアス画像のデータに値を追加します。

私がよくわからないのは、周囲のピクセルの「平均を取る」方法です。

これまでに行ったことをデモストレートするために jsFiddle を実行しました。ご覧のとおり、元のキャンバスから画像データをコピーしてネガにしてから、2 番目のキャンバスに入れています。

私が苦労していることをより具体的にしている場合、iterator が1つしかないループ内の周囲のピクセルが何であるかをどのように正確に把握するのですか? また、平均は、最も近いピクセルの色の値を現在のピクセルの値に追加し、ピクセル数で割った場合ですか？

これは、データを操作したいループです。

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