3

キャンバス上のいくつかの画像のピクセルトゥルーレンダリングを実行したい。現在、私はJavascriptを介して画像を取得しているので、私の画像はHTMLImageElementインスタンスです。これらは、Canvasのレンダリングコンテキストで。を使用して描画できますdrawImage。ただし、これは画像に対してアンチエイリアシングを実行します。これは望ましくありません。

オブジェクトputImageDataを操作する、という名前の低レベルの画像操作メソッドがあるようです。ImageDataこのメソッドはアンチエイリアシングを実行しますか？HTMLImageElementそうでない場合、それは私が探しているものの良い候補ですが、ImageDataインスタンスに変換またはブリットする方法がわかりません。

どんなアドバイスでも大歓迎です！

編集：私の元の問題は解決されました、私は誤って分数の座標を持っていました、それはアンチエイリアシングを強制します。ただし、画像データへの変換に関する質問はまだ残っています。

4

1 に答える 1

1

画像をImageDataオブジェクトに変換する唯一の方法は、最初に画像をキャンバスに描画することです。そのため、一時的なキャンバスを作成し、その上に画像を描画して、そこから画像データを取得する必要があります。

function imageToImageData(image) {
     var canvas = document.createElement("canvas");
     canvas.width = image.width;
     canvas.height = image.height;
     var ctx = canvas.getContext("2d");
     ctx.drawImage(image, 0, 0);
     return ctx.getImageData(0, 0, canvas.width, canvas.height);
}

ただし、同一生成元ポリシーでは、別のドメインからキャンバスに画像を描画した場合にgetImageDataを呼び出せないため、これはドキュメントと同じドメインの画像でのみ機能することに注意してください。他のドメインから画像を描画する必要がある場合、唯一のオプションは、drawImageメインキャンバスのコンテキストを直接呼び出して、精度に影響を与える変換がないことを確認することです。

于 2009-09-08T16:26:02.853 に答える