HTML5画布 - 加载时重新缩放图像？

Question

好的，所以我正在做一个html5画布游戏，我需要一直画出调整大小的图像（这都是像素艺术）。不幸的是，在drawImage上调整大小会使当前浏览器变得非常迟缓，所以我试图在加载时调整大小，然后只绘制预先调整大小的图像。

我试图将已调整大小的图像绘制到隐藏的上下文然后执行ctx.getImageData，但后来我遇到了一个字节数组，并且无法转换为图像。我可以使用putImageData将其推送到最终上下文，但这很慢，我显然失去了alpha通道。

另一个选择可能是预先缩放服务器中的内容，但我想尽可能避免这种情况。

有什么想法吗？

Answer 1

在canvas对象（而不是上下文）上有一个名为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");

现在您可以正常绘制缩放图像。