キャンバスにテキストをアンチエイリアスする

Question

インダストリアルインクジェットで印刷された多くのクライアント（子供用雑誌の裏側にある広告）には、.pngを作成する必要があります。

残念ながら、私が試しても、すべてのブラウザがアンチエイリアスを有効にしているようです。 CSSもctx.mozImageSmoothingEnabled=false;も動作しません。

フォントをシャープにしようとしているグレイスケールのピクセルを使わずにキャンバスにテキストを表示する方法はありますか？ imageSmoothingEnabledは（唯一の目的をリサンプリングするためのその後など）falseに設定されている場合

Answer 1

キャンバスはアンチエイリアスすべてが画像を除いて、そこに描かれます。

SVG

それはベクトルであり、容易にPostScriptに変換することができますように理想的であるSVGを使用して -

はいえ、さまざまなオプションがあります。プリンタがポストスクリプトをサポートしている場合、ベクトルを最適なラスタマスクにラスタライズし、鋭いエッジを作成します。あなたは非常に大規模なビットマップを使用することにより、アンチエイリアシングの影響を低減させるが、私自身の経験から、おそらくあなたにもできる

大きなビットマップ

、それはグレー点を解消しません。

また、一部のブラウザでは6kに制限されているキャンバス要素自体の制限を満たす可能性があります。プリンタのDPIによっては、これで十分でない場合もあります。

大きなビットマップとしきい値（以下を参照）を組み合わせると、おそらくこれを回避できます。

は、これを回避するにはディープダイブ実装

もう一つの方法が、より高度は、手動でフォントをロードし、ブレゼンハムまたは同様のアルゴリズムを使用してのパスを描画することです。もう一つの側面は、ポリゴン塗りつぶしアルゴリズム（つまり、偶数奇数または非零巻き）を使用する必要があるということです。

このすべてがあまりにも多くの努力なしでなんとかです：

• フォントをロードし、f.ex.を使用することができますパスデータを取得するにはラインへのベクトルをレンダリングするためのopentype.js
• 使用BresenhamまたはEFLA（必要な場合）
• は、ポリゴンを埋めるために、多角形の塗りつぶしアルゴリズムeven-oddまたはnon-zero windingを使用します（通常のキャンバスに逃げることあなたがBresenham/EFLA線で縁を覆うことができる場合は記入してください）。

Adob​​e社のフォントは、一般的なリポジトリの方が一般的なので、Open-Typeでは十分ではありません。おそらく、他の方法でパスデータを取得したり、Open TypeバージョンまたはSVGフォントタイプでも同等のものを見つけることができます。

閾値

もう1つの方法は、グレーレベルを量子化することです。ビットマップを反復処理し、しきい値を使用してピクセルを透明または無地のいずれかに設定できます。

結果は、いくつかのエッジの周りの鋭い遷移で終わるようにはあまり良くないかもしれません。ただし、印刷解像度と選択したしきい値に応じて、これらのアーティファクトを減らすことができます。