調整圖像大小在畫布上

<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的比例。通過基於用戶窗口的計算，我決定在畫布全屏時按比例調整圖像大小。它在一些屏幕上運行得很好，但在某些屏幕上效果不理想 - 圖像可能縮減太多，看起來太差或太高檔，看起來不太清晰。它是最明顯的三角形圖像（我知道我可以用畫布繪製純粹的形狀，但我需要在它們上繪製面部，所以這是不可能的）。任何好方法做得很好？

來源

2016-12-07 user1938653

這是基於像素的圖像的性質。

當縮小比例嘗試保持圖像尺寸的整個比例時，它會提高質量。如果你有128個，那麼你將它減少到30，這意味着像素減少128/30 = 4.2666。像素是離散的信息單位，不能輕易地切割成更小的單位而不會損失質量。

如果將尺寸更改爲32像素128/32 = 4，則質量會提高，因爲您沒有剪切任何像素。

對於放大，你可以做的事情很少，它不是模糊就是像素化。您的源圖像應始終處於比您需要的分辨率更高的分辨率。經驗法則是「僅降級」。

如果整個比例縮小的圖像質量不符合您的喜好，那麼最好的選擇是在Photoshop（或類似的）生產縮放，然後讓設備選擇要下載的圖像。這將爲您提供所有設備的最佳質量，併爲您和用戶節省一些帶寬（適用於較小尺寸的設備）

來源

2016-12-07 16:06:48 Blindman67

但是我不知道每張圖片要製作多少個版本，以及何時選擇一個。 – user1938653

@ user1938653您製作了很多，您可以自動執行任務。根據設備分辨率將它們存儲在目錄或修補程序中。您也可以在設備登錄並具有尚未遇到的解決方案時，讓服務器爲圖像運行高質量縮減比例。或者您接受某些設備不具有完美的圖像質量，故障不是您的設備。把你的遊戲放在那裏，然後解決古怪設備的問題，因爲在發佈之前你永遠無法覆蓋所有的可能性 – Blindman67

調整圖像大小在畫布上

回答

相關問題