在画布上调整图像大小

Question

我有以下代码：

https://jsfiddle.net/8o3sn9mh/17/

<canvas id='c' style='position:absolute; left:0px; top:0px;'>
</canvas>

<script>
var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var flower = new Image();
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png"
flower.onload = function(){
ctx.drawImage(flower,0,0,128,128, 0, 0, 30, 30);
ctx.drawImage(flower,0,0,128,128, 0, 0, 218, 218);
</script>

简短的故事：你可以看到花朵没有很好地调整大小，它的质量已经丢失。

长篇大论：

我正在制作一个有形状的游戏。基本上，我使用比例为 128-128 或 80-80 的图像，因为它是为手机设计的，并且我确保在调整图像大小时保持 1:1 的比例。通过基于用户窗口的计算，由于画布处于全屏状态，我决定按比例调整图像大小。它在某些屏幕上效果不错，但在某些屏幕上却不行——图像可能缩小太多，看起来很差，或者放大太多，看起来不清楚。它在三角形图像上最为明显（我知道我可以用画布绘制纯形状，但我需要在它们上面画脸，所以这是不可能的）。有什么好方法吗？

Answer 1

这就是基于像素的图像的本质。

当缩小比例时尝试保持图像大小的整体比例，它会提高质量。

例如，您有 128，然后将其减少到 30，这意味着像素减少了 128/30 = 4.2666。像素是离散的信息单元，不能轻易地切割成更小的单元而不损失质量。

如果您将大小更改为 32 像素 128/32 = 4，您将获得更好的质量，因为您不会切割任何像素。

对于升级，您几乎无能为力，它要么是模糊的，要么是像素化的。您的源图像应始终具有比您需要的更高的分辨率。经验法则是“仅缩小规模”。

如果按比例缩小的图像质量不符合您的喜好，那么最好的选择是在 Photoshop（或类似软件）上进行生产中的缩放，然后让设备选择要下载的图像。这将为您提供所有设备的最佳质量，并为您和用户节省一些带宽（对于较小分辨率的设备）