關於canvas繪制圖像模糊問題

前段時間在做項目的裁剪並上傳圖像功能的時候，發現裁剪后展示的圖像比較模糊，之后去百度上搜索了一下，看到有一個解決方案是設置canvas的寬高為css寬高的3倍，使用后感覺效果很好，當時就沒管原理接着做功能去了。

在昨天，我想試試做一個鼠標划入圖片，圖片已鼠標為中心，部分區域放大的demo（類似淘寶商品展示頁面的那種）。在制作過程中，我又遇到了canvas轉圖片模糊的問題，因為當時在解決上個的問題的時候使用了谷歌搜索問題，便又用谷歌搜索了一下（當時忘了剛解決過同樣的問題），發現出現這個問題的的原因在於當前顯示設備的物理分辨率與CSS分辨率不同，這兩個分辨率的比值可在JS中使用window.devicePixelRatio獲取，該屬性返回一個當前顯示設備的物理像素分辨率與CSS像素分辨率的比值。該值也可以被解釋為像素大小的比例：即一個CSS像素的大小相對於一個物理像素的大小的比值。在獲取這個屬性的值后，對canvas的寬高進行對應的縮放就可以得到不會模糊的圖片啦。

這是示例代碼：

// img為用於展示canvas繪圖結果的img元素
const img = document.querySelector('#img');
// 創建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const width = 400;
const height = 800;
// 設置canvas的css寬高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;

// 獲取縮放比
const ratio = window.devicePixelRatio || 1;
// 設置canvas的寬高
canvas.width = width * ratio;
canvas.height = height * ratio;
... // 在canvas中繪圖

img.src = canvas.toDataURL("image/png");