HTML5 canvas - 読み込んだ画像のサイズを変更しますか？

Question

私はhtml5キャンバスゲームをやっていますので、サイズ変更した画像を常に描画する必要があります（すべてのピクセルアートです）。残念ながら、drawImageのサイズ変更を行うと、現在のブラウザはかなり動きが遅くなりますので、ロード時にサイズ変更を行い、サイズ変更済みの画像を描画しています。

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

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

アイデア？

Answer 1

toDataURL（文字列mimeType）というcanvasオブジェクト（コンテキストではありません）にメソッドがあります。キャンバスの内容を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"); 

これでノーマルに拡大縮小画像を描画できます。