HTML5 画布 - 加载时调整图像大小？

Question

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

我尝试将调整大小的图像绘制到隐藏的上下文中，然后执行 ctx.getImageData，但后来我被字节数组困住了，无法转换为图像。我可以执行 putImageData 将其推送到最终上下文，但这很慢，而且我显然丢失了 alpha 通道。

另一种选择可能是在服务器中预先缩放东西，但如果可能的话，我想避免这种情况。

有什么想法吗？

Answer 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");

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