0

わかりましたので、私は html5 キャンバス ゲームを行っています。常にサイズ変更された画像を描画する必要があります (すべてピクセル アートです)。残念ながら、drawImage でサイズ変更を行うと、現在のブラウザーが非常に遅くなるため、ロード時にサイズ変更を行い、サイズ変更前の画像を描画するだけです。

サイズ変更された画像を非表示のコンテキストに描画してから ctx.getImageData を実行しようとしましたが、バイト配列に固執し、画像に変換する方法がありません。putImageData を実行して最終的なコンテキストにプッシュすることはできますが、それは遅く、明らかにアルファ チャネルを失います。

別のオプションは、サーバー内のものを事前にスケーリングすることですが、可能であればそれを避けたいと思います.

何か案は？

4

1 に答える 1

1

キャンバス オブジェクト (コンテキストではない) には toDataURL(string mimeType) と呼ばれるメソッドがあり、これはキャンバスの内容を base64 でエンコードされた画像のバイナリ文字列に変換します。これは、任意の画像要素のsrc属性として使用できます。

ctx.drawImage(originalImage, 0, 0, originalImage.width, originalImage.height, 0, 0, 200, 200);
var scaledImage = new Image();
scaledImage.onload = ...;
scaledImage.src = canvas.toDataURL("image/png");

これで、スケーリングされた画像を正常に描画できます。

于 2012-03-02T01:02:05.573 に答える