深入瞭解canvas在移動端繪製模糊的問題

carbrokers發表於2019-04-23
Canvas

由於一些移動端的相容性原因，我們某個專案需要前端將pdf轉換成在移動端頁面可直接觀看的介面。為了方便解決，我們採用了pdf.js這個外掛，該外掛可以將pdf轉換成canvas繪製在頁面上。不過，在測試過程中卻發現，在移動端的瀏覽器上，繪製的內容展示十分模糊（如下圖），經過分析之後發現是由於移動端高清螢幕引起的。 在解決問題之後以文字方式記述原因和探究結果

移動端顯示十分模糊

在解釋問題之前，首先需要了解一些移動端顯示和cavans的小知識，方便後面探究。如果想直接看結果的話看可以拉到最後。

關於螢幕的一些基礎知識

  • 物理畫素（DP）

    物理畫素也稱裝置畫素，我們常聽到的手機的解析度及為物理畫素，比如 iPhone 7的物理解析度為750 * 1334。螢幕是由畫素點組成的，也就是說螢幕的水平方向有750的畫素點，垂直方向上有1334個畫素點

  • 裝置獨立畫素（DIP）

    也稱為邏輯畫素，比如Iphone4和Iphone3GS的尺寸都是3.5寸，iphone4的物理解析度是640 * 980，而3gs只有320 * 480，假如我們按照真實佈局取繪製一個320px寬度的影像時，在iphone4上只有一半有內容，剩下的一半則是一片空白，為了避免這種問題，我們引入了邏輯畫素，將兩種手機的邏輯畫素都設定為320px，方便繪製

  • 裝置畫素比（DPR）

    上面的裝置獨立畫素說到底是為了方便計算，我們統一了裝置的邏輯畫素，但是每個邏輯畫素所代表的物理畫素卻不是確定的，為了確定在未縮放情況下，物理畫素和邏輯畫素的關係，我們引入了裝置畫素比(DPR)這個概念

    裝置畫素比 = 裝置畫素 / 邏輯畫素
DPR = DP / DIP
複製程式碼

上面說了很多理論，下面附個圖解釋一下

深入瞭解canvas在移動端繪製模糊的問題

從上面的圖可以看出，在同樣大小的邏輯畫素下，高清屏所具有的物理畫素更多。普通螢幕下，1個邏輯畫素對應1個物理畫素，而在dpr = 2的高清螢幕下，1個邏輯畫素由4個物理畫素組成。這也是為什麼高清屏更加細膩的原因。

關於canvas的一些基礎知識

  • canvas繪製的是點陣圖

    這是一個所有了解過canvas的人都應該知道的知識點，也是接下來我們將要分析問題的核心。

    關於點陣圖的解釋我們放在後面，現在我們只要知道canvas繪製的影像是點陣圖。

  • canvas的width和height屬性

    canvas的width和height屬性是初學者非常容易搞錯的內容。這兩個屬性經常會與css中的width和height屬性混淆。

    比如我們有如下程式碼（1）:

    <canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>
複製程式碼
    • style中的width和height分別代表canvas這個元素在介面上所佔據的寬高，即樣式上的寬高
    • attribute中的width和height則代表canvas實際畫素的寬高

    如果還無法理解的話，可以想象成以下的程式碼（2）：

    <!-- logo.png的畫素為600 * 300  -->
<img  style="width: 300px; height: 150px" src="logo.png" /> 
複製程式碼

    canvas預設的width和height是300 * 150，對其設定了css之後，canvas會根據設定css寬高進行縮放（注意不是裁剪），這一點和img標籤一樣

    上述程式碼（1）其實還可以再換一種更通俗的解釋方式，就是1個邏輯畫素實際上由2個canvas畫素填充。

模糊原因的初步探討

上面是對所需基礎知識的一些簡介，下面開始正式進行探究。

首先我們提到使用canvas繪製影像的是點陣圖，而我們平常用的jpg，png也是點陣圖。那麼什麼是點陣圖？

點陣圖又叫畫素圖或柵格圖，它是通過記錄影像中每一個點的顏色、深度等資訊來儲存和顯示影像。具象一點講，可以將點陣圖想象成一個巨大的拼圖，這個拼圖有無數的拼塊，每個拼塊代表了一個純色的畫素點。理論上，1個點陣圖畫素對應著1個物理畫素。但假如說你使用了高清屏，比如蘋果的retina屏去檢視一幅圖畫，又會是什麼樣子呢？

假設我們有如下程式碼，該程式碼將展示在iphone4的retina屏上：

<canvas width="320" height="150" style="width: 320px; height: 150px"></canvas>
複製程式碼

iphone4本身的物理畫素為640 * 980，而裝置獨立畫素為320 * 480，這代表著1個css畫素實際由4個物理畫素構成，canvas的畫素為320 * 150，其css畫素為320 * 150，則代表1個css畫素將會由1個canvas元素構成，這樣進行換算，在retina螢幕下，1個canvas畫素（或者說是1個點陣圖畫素）將會填充4個物理畫素，由於單個點陣圖畫素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊。

如果還有疑惑的話，以下的圖片可以說明點陣圖在retina螢幕下是如何填充的：

深入瞭解canvas在移動端繪製模糊的問題

上圖中左側的是在普通螢幕下的顯示規則，可以看出有4個點陣圖畫素點，而右側的高清螢幕下則有16個畫素點。由於畫素點不可切割的原因，顏色產生了改變。

但是還有一點沒有解釋清楚，就是為什麼圖片會就近取色而不是直接取原值，這也是導致模糊的幕後黑手。

幕後黑手---平滑處理技術

下面是我的某位大佬同學幫我解釋的，剛才我們說了每個點陣圖元素實際上一個純色的畫素點。現在假設我們需要在一個css大小為4px * 4px，dpr為1普通螢幕上繪製一個數字“0”，那麼我們繪製的樣子應該如下圖，其中1代表黑色畫素點，0代表白色畫素點。

深入瞭解canvas在移動端繪製模糊的問題

可以看出在dpr比較小的情況下，我們的“0”這個圖案還比較明顯，現在假如我們css大小不變，但是改成在retina螢幕下繪製影像，效果又會變成什麼樣呢？

深入瞭解canvas在移動端繪製模糊的問題

我們已知在retina螢幕下，一個css畫素代表4個物理畫素，假如我們不做任何處理，直接按照上面矩陣排列，將矩陣擴大的話，會發現在retina螢幕下，我們的圖案鋸齒感非常明顯，影像明顯缺乏了一絲順化。

假如我們對影像稍作改變，改成下圖這樣

深入瞭解canvas在移動端繪製模糊的問題

影像感覺瞬間柔和了，但是原本應該4個0充斥的地方變成了3個1加上1個0。這其實就是所謂的影像平滑處理，為了解決鋸齒感覺，將原本的顏色改變，在充斥著較多顏色的圖片上，為了更自然，圖片的連線處變成了近似的顏色，這也解釋了為什麼上面填充顏色的時候不是使用本色而是使用近似色。

原因總結

通過了上述的解釋，現在我們來總結以下結論，在移動端盛行，高清屏基本上已經普及的現在，1px的css畫素實際上代表了4個甚至更多的物理畫素。但是由於我們的程式碼問題，我們1px的css畫素和1個canvas畫素畫上了等號，也就導致了1個canvas畫素實際需要填充4個甚至更多物理畫素，為了保證影像平滑處理，在填充剩餘的物理畫素時採用了原先顏色的近似值，導致了影像的模糊。

解決思路

瞭解了問題出現的原因，解決問題就很容易，解決該問題最重要的一點是讓1個canvas畫素和一個物理畫素掛等號

高版本的瀏覽器的window物件下都掛著一個devicePixelRatio屬性，該屬性就是上面所說的dpr,

在canvas元素css寬高確定的情況下，我們可以這麼做

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let dpr = window.devicePixelRatio; // 假設dpr為2
// 獲取css的寬高
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根據dpr，擴大canvas畫布的畫素，使1個canvas畫素和1個物理畫素相等
canvas.width = dpr * cssWidth;
canvas.height = dpr * cssHeight;
// 由於畫布擴大，canvas的座標系也跟著擴大，如果按照原先的座標系繪圖內容會縮小
// 所以需要將繪製比例放大
ctx.scale(dpr,dpr);
複製程式碼

經驗總結

很多時候，我們發現了問題，不能只集中於問題的解決，而是應該深入去了解問題發生的原因，這樣才能更好的在這行走下去。

相關文章