關于馬賽克

馬賽克是一種使用較為廣泛的圖片處理方式，通過將圖片特定區域的色階細節劣化、色塊打亂讓圖片模糊化，常用來遮擋圖片中的重要信息及隱私內容。本期，我們將通過圖像的基礎知識幫助大家了解圖片馬賽克處理的原理，同時給大家帶來ArkUI開發框架中圖片馬賽克處理的實現。

一、圖像基礎

了解圖片的像素以及分辨率等基礎知識，有助于后文對馬賽克原理的理解。

1. 像素

像素（英文名：pixel，簡稱px）是圖片的最小單位，每張圖片都是由無數的像素點組成。如圖1所示，每個小方格就是一個個的像素點，每個像素點都具有明確的位置坐標和色彩數值，像素點的位置和顏色共同決定該圖片所呈現出來的樣子。

圖1 像素點

在計算機中，每個像素點的色彩數值都是通過RGB通道來控制，RGB即三原色：紅Red，綠Green，藍Blue的通道，這三種色彩混合疊加，幾乎能形成人類視力所能感知的所有顏色。由此，設置圖片中每個像素的RGB通道分量值，并根據特有的算法或者濾波器，便可讓像素呈現任何顏色。

2. 分辨率

分辨率是圖片在長和寬上各擁有的像素，分辨率越高，所包含的像素就越多，圖片就越清晰，由于分辨率比較低，我們甚至無法辨別圖片的內容。

二、馬賽克原理

增大圖片的分辨率可以讓圖片變得更清晰，那么我們是不是可以降低圖片的分辨率來讓圖片變模糊？

馬賽克的原理就是降低原圖片的分辨率。如圖5所示，首先我們將原圖分割成若干個大小一致的小方格，然后獲取每個小方格中的像素點的平均色彩數值，最后使用獲取到的平均色彩數值替換該方格中所有的像素點，即可實現圖片的馬賽克處理，同時，我們還可以控制圖片中小方格的個數來實現馬賽克的強弱。

三、馬賽克實現

相信大家已經熟悉了馬賽克的原理，下面我們將以全馬賽克圖片為例，為大家介紹基于ArkUI開發框架的馬賽克的具體實現。

1. 首先我們需獲取ArkUI開發框架的image能力，該能力提供了圖片開發的基本接口。

import image from "@ohos.multimedia.image"

2. 通過readPixelsToBuffer接口，一次性讀取圖片中所有的像素點數據，每個像素點數據都包含了RGB通道的分量值（如Red:18、Green:250、Blue:20）。

其中ArrayBuffer里面緩存的像素點數據主要包括RGB通道的分量值及圖片透明度，參考代碼如下：

3. 根據自定義的單個小方格的Width和Height，將整個圖片分成若干小方格。

4. 獲取每個小方格左上角的最大坐標及右下角的最小坐標，以確定小方格的區域。并根據每個小方格內的所有像素點數據統一該區域的像素，統一方式可以是取該區域內像素點的平均值，或者隨機選取一個像素。

參考代碼如下：

5. 通過writeBufferToPixels接口，將統一的像素點數據緩存到ArrayBuffer中，并寫入PixelMap，由此得到整張馬賽克處理的圖片。

writeBufferToPixels(src: ArrayBuffer): Promise<void>

四、涂鴉馬賽克

通過上文的介紹，相信大家已經基本掌握了馬賽克的實現。下面我們將為大家帶來馬賽克開發的具體實例“涂鴉馬賽克”，即可以根據手指滑動的軌跡，生成對應的馬賽克區域。本文僅提供實現思路及關鍵代碼，感興趣的小伙伴可結合上文的介紹補全代碼。

1. 給圖片添加Touch事件，獲取手指的運動軌跡。參考代碼如下：

2. 根據運動軌跡，以觸摸點的坐標（x，y）為中心，根據自定義小方格的大小，動態確認馬賽克區域的位置。參考代碼如下：

3. 統一馬賽克區域的所有的像素點值。

4. 最后將更改的像素點寫入圖片中，即可得到手指滑動軌跡的馬賽克圖片。

以上就是本期全部內容，恭喜你花幾分鐘時間獲得了一個實用的技能。期待廣大開發者能開發出更多有趣的馬賽克應用。

來源：HarmonyOS開發者