canvas壓縮圖片變模糊問題

canvas 畫圖圖片變模糊問題

問題描述

1. 在使用 canvas 對圖片進行編輯導出圖片以後發現圖片和原圖相比變得模糊了

2. canvas 畫圖線條變粗

問題產生緣由

1. 該問題在 PC 下面並不會產生，緣由是移動端如今基本都是 Retina 屏(高倍屏)，當在二倍屏下的時候，會以實際像素的兩個像素點來描述一個像素，這個時候 canvas 在屏幕下面就等於佔據了雙倍的空間，就和圖片被放大了兩倍同樣，因此通過 canvas 編輯的圖片會變得模糊

2. canvas 畫線的方式並非從頭開始畫的，而是從無限細的一像素的中位線的位置開始畫的，而後左邊佔一半右邊佔一半的方式來畫一像素的線條，這個時候計算機是不會繪製小余 1 像素的，因此這個時候就會天然的向左右延伸，這個時候就會出現兩個像素的線條了

解決方案

1. 這個問題的解決思路簡單來講就是將 canvas 放大爲原來的兩倍，繪製 canvas 的文字線條也要放大（放大倍數視實際渲染倍數決定），再將它放在一倍的空間下面。

實際渲染倍率 = devicePixelRatio / backingStoreRatio;

devicePixelRatio 設備像素比，表明用幾個像素點的寬度來顯示一個像素的寬度

backingStorePixelRatio 表明了使用幾個像素來存儲一個像素的信息，在 ios6 當中這個值爲 2，因此這個時候和屏幕像素比率爲 1，也就是實際渲染倍率爲 1，這個時候不作任何處理也不會出現變模糊的狀況

// 設置畫布的實際渲染大小，只是簡單的對畫布進行縮放
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;

// 以實際渲染倍率來放大畫布
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;

1. 使用方法 1 也能夠同時解決問題 2，更簡單可是治標不治本的方法，只須要根據需求讓線條偏移 0.5 像素，糾正 canvas，讓計算機不自動多渲染就行了