如果你在搜索HarmonyOS開(kāi)發(fā)里關(guān)于PixelMap的資料看到最多的解釋多半是“PixelMap是一張位圖對(duì)象”。這句話沒(méi)錯(cuò)但基本等于沒(méi)說(shuō)。真正上手做圖像處理時(shí)你會(huì)發(fā)現(xiàn)PixelMap既不是Image組件里那個(gè)能直接顯示的圖片也不是一個(gè)可以隨手改像素的畫板它更像是一份“帶操作方法的像素?cái)?shù)據(jù)合同”。第一個(gè)實(shí)戰(zhàn)選“顏色翻轉(zhuǎn)”不是因?yàn)樗?jiǎn)單而是因?yàn)樗芤淮涡员颇惆严袼刈x取、通道理解、數(shù)據(jù)寫回、UI刷新這幾個(gè)后續(xù)做濾鏡必備的環(huán)節(jié)全部走通。這篇文章就用HarmonyOS 6的環(huán)境從零把圖片負(fù)片效果做出來(lái)并把我實(shí)測(cè)中踩過(guò)的坑一并交代清楚。適合剛接觸ArkTS圖像開(kāi)發(fā)、想搞懂PixelMap到底怎么玩的人參考。1. 為什么PixelMap第一課選“顏色翻轉(zhuǎn)”1.1 很多人把PixelMap當(dāng)圖片用但它其實(shí)是一袋像素打個(gè)比方一張圖片文件好比一個(gè)壓縮包里面有長(zhǎng)寬信息、顏色數(shù)據(jù)、壓縮參數(shù)等。ImageSource負(fù)責(zé)解壓解壓出來(lái)的東西就是PixelMap——一塊內(nèi)存里的像素陣列。你在Image組件里看到的只是這塊內(nèi)存被渲染后的樣子。所以PixelMap真正的價(jià)值不在“給人看”而在“給人改”。你完全可以不經(jīng)過(guò)文件保存、不經(jīng)過(guò)重新編碼直接拿到每一個(gè)像素的RGBA值修改后再寫回去。顏色翻轉(zhuǎn)就是這樣一種操作把每個(gè)像素的RGB三個(gè)通道分別取反Alpha通道保持不動(dòng)整張圖就會(huì)變成類似膠片負(fù)片的效果。為什么拿它當(dāng)?shù)谝徽n因?yàn)樗撬邢袼丶?jí)算法里最容易驗(yàn)證正確性的?；叶?、模糊、銳化都需要考慮權(quán)重、卷積核、邊緣處理而翻轉(zhuǎn)只需要一行取反運(yùn)算。算法一旦寫錯(cuò)表現(xiàn)也最直觀——要么整張圖花掉要么顏色通道錯(cuò)亂。對(duì)一個(gè)剛開(kāi)始接觸PixelMap讀寫接口的人來(lái)說(shuō)這是風(fēng)險(xiǎn)最低、反饋?zhàn)蠲鞔_的練手項(xiàng)目。1.2 一條完整的圖像處理鏈路隱藏在這小功能里別小看這一功能它背后覆蓋了四件在HarmonyOS圖像開(kāi)發(fā)里繞不開(kāi)的事如何從資源或相冊(cè)拿到一個(gè)PixelMap如何把PixelMap里的像素?cái)?shù)據(jù)讀到一個(gè)可操作的緩沖區(qū)如何對(duì)緩沖區(qū)里的顏色數(shù)據(jù)做逐像素運(yùn)算如何把運(yùn)算結(jié)果寫回PixelMap并讓界面及時(shí)刷新。這四步就是所謂“讀-算-寫-顯”閉環(huán)。后續(xù)無(wú)論你做灰度圖、懷舊濾鏡、顏色替換還是邊緣檢測(cè)底層全是同一套流程。差別只在于第三步的算法不同。所以這篇實(shí)戰(zhàn)只要跟下來(lái)你得到的不是一個(gè)一次性Demo而是一個(gè)可以復(fù)用到后續(xù)所有濾鏡開(kāi)發(fā)的基礎(chǔ)框架。2. 開(kāi)工前準(zhǔn)備環(huán)境版本、工程骨架與兩張測(cè)試圖2.1 環(huán)境版本怎么選我使用的開(kāi)發(fā)環(huán)境是支持HarmonyOS 6的DevEco Studio版本工程創(chuàng)建時(shí)選擇Empty Ability模板即可語(yǔ)言用ArkTS。需要提醒的是HarmonyOS 6對(duì)應(yīng)的SDK接口已經(jīng)全面推薦kit開(kāi)頭的模塊導(dǎo)入方式也就是類似import { image } from kit.ImageKit這種寫法不再建議用老的ohos.multimedia.image路徑。如果你手里的SDK版本較舊某些常量名或方法簽名可能略有差異最穩(wěn)妥的辦法是打開(kāi)工程的oh_modules目錄找到kit.ImageKit對(duì)應(yīng)的類型聲明文件以你本機(jī)SDK里的.d.ts為準(zhǔn)。我在文章中給出的代碼都基于當(dāng)前主流的Kit風(fēng)格寫法遇到不兼容的地方優(yōu)先查SDK聲明而不是死磕報(bào)錯(cuò)信息。2.2 創(chuàng)建工程并準(zhǔn)備測(cè)試圖片工程創(chuàng)建后建議準(zhǔn)備兩張測(cè)試圖放到resources/rawfile目錄下一張小圖建議邊長(zhǎng)在512像素以內(nèi)用于功能驗(yàn)證和快速調(diào)試一張大圖建議在幾百萬(wàn)像素量級(jí)用于性能對(duì)比。為什么強(qiáng)調(diào)兩張因?yàn)楣δ苷_性和性能優(yōu)化是兩個(gè)維度。用大圖直接調(diào)邏輯一旦卡頓你分不清是算法問(wèn)題還是渲染問(wèn)題用小圖調(diào)通邏輯后再切大圖觀察耗時(shí)才有參照。我習(xí)慣先小圖跑通再換大圖測(cè)性能能少浪費(fèi)很多排查時(shí)間。rawfile里的文件可以通過(guò)resourceManager直接讀成Uint8Array再轉(zhuǎn)成ArrayBuffer交給ImageSource解碼整個(gè)過(guò)程不需要申請(qǐng)任何文件權(quán)限。import { image } from kit.ImageKit; import { common } from kit.AbilityKit; import { BusinessError } from kit.BasicServicesKit; async function loadFromRawfile(context: common.UIAbilityContext, fileName: string): Promiseimage.PixelMap { const rawData: Uint8Array await context.resourceManager.getRawFileContent(fileName); const arrayBuffer: ArrayBuffer rawData.buffer.slice( rawData.byteOffset, rawData.byteOffset rawData.byteLength ) as ArrayBuffer; const imageSource image.createImageSource(arrayBuffer); return await imageSource.createPixelMap(); }注意這里rawData.buffer.slice不是直接拿rawData.buffer因?yàn)閁int8Array可能只是底層ArrayBuffer的一個(gè)視圖起始偏移不一定是0。直接用rawData.buffer可能會(huì)帶上無(wú)關(guān)數(shù)據(jù)導(dǎo)致解碼失敗。這個(gè)細(xì)節(jié)我在初期踩過(guò)跟頭后面統(tǒng)一用切片方式處理。2.3 相冊(cè)選圖這條備用路線如果不想把測(cè)試圖固化在工程里也可以走相冊(cè)選擇。HarmonyOS 6里的PhotoViewPicker由系統(tǒng)拉起選擇界面不需要申請(qǐng)存儲(chǔ)權(quán)限這點(diǎn)比老版本方便很多。主要步驟是創(chuàng)建PhotoViewPicker實(shí)例調(diào)用select方法拿到返回的圖片URI再通過(guò)文件描述符創(chuàng)建ImageSource。import { photoAccessHelper } from kit.MediaLibraryKit; import { fileIo as fs } from kit.CoreFileKit; async function pickFromGallery(): Promiseimage.PixelMap { const picker new photoAccessHelper.PhotoViewPicker(); const result await picker.select({ MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber: 1 }); const uri: string result.photoUris[0]; const file fs.openSync(uri, fs.OpenMode.READ_ONLY); const imageSource image.createImageSource(file.fd); const pixelMap await imageSource.createPixelMap(); file.closeSync(file); return pixelMap; }這段代碼屬于備用方案本篇主體邏輯我用rawfile方式因?yàn)榭蓮?fù)現(xiàn)性更強(qiáng)不受用戶相冊(cè)內(nèi)容影響。兩條路線的對(duì)比在這里路線優(yōu)點(diǎn)注意點(diǎn)rawfile資源環(huán)境一致可復(fù)現(xiàn)適合開(kāi)發(fā)調(diào)試每次換圖要重新編譯相冊(cè)選擇真實(shí)用戶場(chǎng)景圖片多樣URI拿到的fd生命周期需要自己管理記得關(guān)閉3. 反色原理和像素格式動(dòng)手前先搞懂這三點(diǎn)3.1 每個(gè)像素由RGBA四通道組成在ARGB_8888這類常見(jiàn)像素格式下一個(gè)像素占4個(gè)字節(jié)分別保存Red、Green、Blue、Alpha四個(gè)通道每個(gè)通道的取值范圍是0到255。紅色是(255, 0, 0)白色是(255, 255, 255)黑色是(0, 0, 0)透明黑色是(0, 0, 0, 0)。顏色翻轉(zhuǎn)在數(shù)學(xué)上非常簡(jiǎn)單用255減去每個(gè)顏色通道的原值。紅色變成青色綠色變成品紅藍(lán)色變成黃色白色變黑色黑色變白色這就是負(fù)片效果。Alpha通道代表透明度反色時(shí)不能動(dòng)。如果連Alpha一起翻轉(zhuǎn)原本不透明的圖片會(huì)變得全透明界面上一片空白這是新手最容易撞上的問(wèn)題之一。3.2 用255減法還是按位取反看你想不想保留Alpha對(duì)單個(gè)通道來(lái)說(shuō)255 - value和~value 0xFF結(jié)果一樣。但在32位像素層面兩種寫法效果完全不同。如果你把整個(gè)像素當(dāng)成一個(gè)32位無(wú)符號(hào)整數(shù)假設(shè)內(nèi)存順序是RGBA低24位是RGB高8位是Alphapixel (pixel 0xFF000000) | ((~pixel) 0x00FFFFFF)這是保留Alpha、只翻轉(zhuǎn)RGB的寫法pixel ~pixel這是把Alpha也翻轉(zhuǎn)的寫法通常不是你想要的結(jié)果。所以看似一行取反代碼里面其實(shí)藏著“保不保留Alpha”的決策。理解了這一層你就不會(huì)被網(wǎng)上各種負(fù)片代碼的寫法差異搞暈。3.3 通道順序一個(gè)名字叫ARGB內(nèi)存里卻不一定按ARGB排的坑這是PixelMap最迷惑人的地方。像素格式枚舉叫ARGB_8888但不同設(shè)備、不同解碼器下內(nèi)存里四個(gè)字節(jié)的實(shí)際排列可能是RGBA也可能是ARGB還可能是BGRA。也就是說(shuō)格式名稱描述的是“通道構(gòu)成”并不嚴(yán)格承諾“字節(jié)排列順序”。用生活場(chǎng)景類比這就好比倉(cāng)庫(kù)標(biāo)簽寫著“蘋果、香蕉、梨、桃”但貨架上具體哪個(gè)格子放什么得看倉(cāng)庫(kù)管理員的心情。那怎么辦最可靠的做法不是猜而是寫一段小驗(yàn)證代碼用已知顏色構(gòu)造一個(gè)單像素PixelMap讀出來(lái)的數(shù)值和預(yù)期對(duì)比立刻能確定當(dāng)前環(huán)境的通道排列。后面第6章我會(huì)給出完整的驗(yàn)證方法。3.4 一個(gè)能驗(yàn)證通道順序的調(diào)試函數(shù)下面這個(gè)函數(shù)會(huì)構(gòu)造一個(gè)紅色單像素PixelMap讀取它的32位值并打印出來(lái)。async function inspectChannelOrder(): Promisevoid { const colors: Arrayimage.Color [{ red: 255, green: 0, blue: 0, alpha: 255 }]; const options: image.InitializationOptions { size: { width: 1, height: 1 }, pixelFormat: image.PixelMapFormat.ARGB_8888 }; const pm: image.PixelMap await image.createPixelMap(colors, options); const buffer new ArrayBuffer(pm.getPixelBytesNumber()); await pm.readPixels(buffer); const value new Uint32Array(buffer)[0].toString(16); console.info(single red pixel as Uint32:, value); }如果內(nèi)存排列是低字節(jié)R、高字節(jié)A即常見(jiàn)的RGBA排列小端讀取得到的值是ff0000ff如果內(nèi)存排列是低字節(jié)A、高字節(jié)BARGB排列得到的值會(huì)是0000ffff。用這個(gè)結(jié)果你就可以確定后面算法里到底該用哪一套掩碼而不是對(duì)著文檔猜。4. 核心實(shí)現(xiàn)點(diǎn)擊按鈕讓圖片變成負(fù)片4.1 頁(yè)面布局與狀態(tài)變量我建了一個(gè)單頁(yè)工程界面只放三樣?xùn)|西描述文本、用于預(yù)覽的Image、觸發(fā)翻轉(zhuǎn)的Button。Entry Component struct ColorInvertPage { State private pixmap: image.PixelMap | undefined undefined; State private desc: string 正在加載圖片...; State private refreshKey: number 0; build() { Column({ space: 16 }) { Text(this.desc) .fontSize(14) .width(100%) .textAlign(TextAlign.Center) if (this.pixmap) { Image(this.pixmap) .width(100%) .height(320) .objectFit(ImageFit.Contain) .key(preview- this.refreshKey) } else { Progress() .width(50) .height(50) } Button(顏色翻轉(zhuǎn)) .width(80%) .onClick(async () { if (this.pixmap) { await this.invertPixelMap(this.pixmap); } }) } .padding(16) .width(100%) .height(100%) } }這里有個(gè)關(guān)鍵設(shè)計(jì)Image組件上的.key(preview- this.refreshKey)。ArkUI的狀態(tài)管理默認(rèn)用引用比較來(lái)決定是否刷新組件可writePixels改的是PixelMap內(nèi)部的數(shù)據(jù)并不是狀態(tài)對(duì)象本身。即使你賦值this.pixmap this.pixmap引用沒(méi)變界面也可能紋絲不動(dòng)。通過(guò)改變r(jià)efreshKey強(qiáng)制Image重建是實(shí)測(cè)比較可靠的刷新手段后面6.3還會(huì)專門展開(kāi)。4.2 在aboutToAppear里加載圖片頁(yè)面生命周期回調(diào)里加載rawfile中的測(cè)試圖順便把圖片尺寸顯示到描述文本中。async aboutToAppear(): Promisevoid { try { const context getContext(this) as common.UIAbilityContext; const rawData: Uint8Array await context.resourceManager.getRawFileContent(sample_small.jpg); const arrayBuffer: ArrayBuffer rawData.buffer.slice( rawData.byteOffset, rawData.byteOffset rawData.byteLength ) as ArrayBuffer; const imageSource image.createImageSource(arrayBuffer); this.pixmap await imageSource.createPixelMap(); const info await this.pixmap.getImageInfo(); this.desc 原圖加載完成 尺寸: ${info.size.width} x ${info.size.height}; } catch (e) { const err e as BusinessError; this.desc 圖片加載失敗: code${err.code}, message${err.message}; } }如果加載失敗描述文本會(huì)直接顯示錯(cuò)誤碼方便定位是文件缺失還是解碼參數(shù)問(wèn)題。實(shí)際開(kāi)發(fā)中我建議把這類錯(cuò)誤碼打到日志里因?yàn)镾tage模型下的資源路徑一旦寫錯(cuò)報(bào)錯(cuò)信息往往不會(huì)直接告訴你文件名拼錯(cuò)了。4.3 第一版逐像素翻轉(zhuǎn)能跑但別急著上大圖我先把算法寫成最容易理解的DataView逐字節(jié)版本。這里假設(shè)當(dāng)前設(shè)備的像素內(nèi)存排列是R、G、B、A也就是下標(biāo)0是紅、1是綠、2是藍(lán)、3是Alpha。async invertPixelMapFirstVersion(pixelMap: image.PixelMap): Promisevoid { const info await pixelMap.getImageInfo(); const width info.size.width; const height info.size.height; const buffer new ArrayBuffer(pixelMap.getPixelBytesNumber()); await pixelMap.readPixels(buffer); const view new DataView(buffer); for (let y 0; y height; y) { for (let x 0; x width; x) { const offset (y * width x) * 4; const r view.getUint8(offset); const g view.getUint8(offset 1); const b view.getUint8(offset 2); view.setUint8(offset, 255 - r); view.setUint8(offset 1, 255 - g); view.setUint8(offset 2, 255 - b); } } await pixelMap.writePixels(buffer); this.refreshKey; }這段代碼邏輯很清楚但性能不樂(lè)觀DataView的每次getUint8/setUint8都有開(kāi)銷在一張1200萬(wàn)像素的圖上遍歷內(nèi)存訪問(wèn)次數(shù)是幾千萬(wàn)次。我實(shí)測(cè)小圖完全沒(méi)問(wèn)題換大圖后在低端設(shè)備上會(huì)明顯感到卡頓。所以它只作為教學(xué)版本存在實(shí)際項(xiàng)目請(qǐng)用5.2里的32位版本。4.4 寫回與UI刷新writePixels會(huì)把整個(gè)緩沖區(qū)寫回PixelMap相當(dāng)于在內(nèi)存層面完成了圖片替換。前面提到這一步不會(huì)自動(dòng)觸發(fā)ArkUI的視圖刷新所以我統(tǒng)一在寫回結(jié)束后執(zhí)行this.refreshKey讓Image組件通過(guò)key變化強(qiáng)制重建。重建后組件會(huì)重新讀取PixelMap的最新像素?cái)?shù)據(jù)負(fù)片效果就出來(lái)了。這套“處理buffer 更新refreshKey”的模式本質(zhì)上把“圖片內(nèi)容變化”和“組件狀態(tài)變化”解耦開(kāi)了。后續(xù)做灰度、模糊時(shí)你只需要替換中間那段像素運(yùn)算邏輯刷新部分完全不用動(dòng)。4.5 把翻轉(zhuǎn)邏輯抽成可復(fù)用函數(shù)等代碼跑通后建議把中間那段像素運(yùn)算抽成獨(dú)立函數(shù)方便后續(xù)寫其他濾鏡時(shí)復(fù)用整個(gè)“讀-算-寫”框架。async function transformPixelMap( pixelMap: image.PixelMap, transform: (value: number) number ): Promisevoid { const info await pixelMap.getImageInfo(); const width info.size.width; const height info.size.height; const buffer new ArrayBuffer(pixelMap.getPixelBytesNumber()); await pixelMap.readPixels(buffer); const pixels new Uint32Array(buffer); const count width * height; for (let i 0; i count; i) { pixels[i] transform(pixels[i]); } await pixelMap.writePixels(buffer); }調(diào)用時(shí)傳入一個(gè)針對(duì)單個(gè)像素的回調(diào)比如保留Alpha的翻轉(zhuǎn)await transformPixelMap(this.pixmap, (pixel) { return (pixel 0xFF000000) | ((~pixel) 0x00FFFFFF); });這樣寫的好處是以后你想做閾值化、反相局部調(diào)整等操作只需換回調(diào)函數(shù)不需要重寫讀取和寫回框架。5. 實(shí)測(cè)和兩輪優(yōu)化從肉眼頓挫到基本無(wú)感5.1 第一版實(shí)測(cè)表現(xiàn)我在一臺(tái)中等配置的測(cè)試設(shè)備上用一張4000x3000像素的照片跑第一版DataView代碼。畫面點(diǎn)擊按鈕后有明顯的等待感從按下到出結(jié)果大致需要幾百毫秒量級(jí)UI雖然不至于完全無(wú)響應(yīng)但已經(jīng)能感到遲滯。瓶頸主要在兩處一是逐字節(jié)的DataView方法調(diào)用太多二是雙層循環(huán)里每次都要重新定位偏移。要知道一個(gè)像素就要執(zhí)行3次getUint8加3次setUint81200萬(wàn)像素就是7200萬(wàn)次以上方法調(diào)用純解釋執(zhí)行環(huán)境下這個(gè)開(kāi)銷不可忽視。5.2 優(yōu)化一整塊讀成Uint32Array一次處理一個(gè)像素既然單個(gè)像素是32位整塊像素?cái)?shù)據(jù)完全可以當(dāng)作Uint32Array來(lái)操作。一次讀取拿到完整像素值按位運(yùn)算處理RGB部分再寫回內(nèi)存。async invertPixelMapFast(pixelMap: image.PixelMap): Promisevoid { const info await pixelMap.getImageInfo(); const width info.size.width; const height info.size.height; const buffer new ArrayBuffer(pixelMap.getPixelBytesNumber()); await pixelMap.readPixels(buffer); const pixels new Uint32Array(buffer); const count width * height; for (let i 0; i count; i) { // RGBA排列場(chǎng)景低24位是RGB高8位是Alpha pixels[i] (pixels[i] 0xFF000000) | ((~pixels[i]) 0x00FFFFFF); } await pixelMap.writePixels(buffer); }如果是ARGB排列場(chǎng)景內(nèi)存里低字節(jié)是Alpha、高24位是RGB那掩碼要反過(guò)來(lái)pixels[i] (pixels[i] 0x000000FF) | ((~pixels[i]) 0xFFFFFF00);到底用哪一組取決于3.4里驗(yàn)證函數(shù)的結(jié)果。我自己的測(cè)試環(huán)境里readPixels取出的數(shù)據(jù)更接近第一種RGBA排列但不同設(shè)備可能有差異一定要實(shí)測(cè)確認(rèn)。優(yōu)化后效果非常明顯。同一張圖上原先能感知到的等待縮短到幾乎無(wú)感肉眼觀察基本是“點(diǎn)擊后瞬間出結(jié)果”。原因很直接方法調(diào)用從每像素6次DataView變成一次Uint32Array取值加一次賦值并且循環(huán)體從7200萬(wàn)次操作降到了1200萬(wàn)次量級(jí)。對(duì)于純ArkTS環(huán)境來(lái)說(shuō)這已經(jīng)是性價(jià)比很高的優(yōu)化。5.3 優(yōu)化二解碼階段就控制圖片體積還有一種情況容易被忽略如果業(yè)務(wù)場(chǎng)景根本不需要展示原圖全尺寸那就別解碼出原圖大小的PixelMap。createPixelMap時(shí)可以傳解碼選項(xiàng)用sampleSize做降采樣同時(shí)指定像素格式。const decodingOptions: image.DecodingOptions { sampleSize: 2, desiredPixelFormat: image.PixelMapFormat.ARGB_8888 }; const pixelMap await imageSource.createPixelMap(decodingOptions);sampleSize: 2表示寬高各采樣1/2整體像素量變成原來(lái)的1/4處理耗時(shí)和內(nèi)存占用都大幅下降。當(dāng)然這是以犧牲分辨率為代價(jià)的是否采用取決于你的產(chǎn)品需求。5.4 再往深走Native側(cè)和共享內(nèi)存如果做完上面兩步你的目標(biāo)設(shè)備上處理一張幾千萬(wàn)像素的超大圖仍然吃力那就要考慮把像素搬運(yùn)到Native側(cè)處理或者使用更底層的能力做并行計(jì)算。HarmonyOS的Native開(kāi)發(fā)棧支持在C側(cè)直接操作PixelMap的內(nèi)存多核并行處理1200萬(wàn)像素能做到毫秒級(jí)。但那屬于進(jìn)階話題需要引入Native C工程、跨語(yǔ)言調(diào)用和內(nèi)存生命周期管理復(fù)雜度會(huì)上升一個(gè)臺(tái)階。對(duì)多數(shù)濾鏡類應(yīng)用來(lái)說(shuō)Uint32Array整塊運(yùn)算已經(jīng)夠用。先把JavaScript側(cè)的優(yōu)化做徹底再?zèng)Q定要不要走Native是比較合理的路徑。6. 三個(gè)折騰過(guò)我的坑和一個(gè)調(diào)試技巧6.1 圖片變暗變灰把Alpha也算進(jìn)去反轉(zhuǎn)了第一次寫翻轉(zhuǎn)時(shí)我圖省事直接寫pixels[i] ~pixels[i]結(jié)果輸出圖片整個(gè)發(fā)暗發(fā)灰看起來(lái)像蓋了一層黑紗。原因就是Alpha從255被翻成了0圖片變成了全透明。透明區(qū)域在多數(shù)背景色下顯示為黑或灰于是整張圖的觀感就完全不對(duì)了。修復(fù)方式就是文章里一直強(qiáng)調(diào)的“只翻RGB保留Alpha”。以后寫任何像素級(jí)算法都要先想清楚Alpha通道該怎么處理。有些算法要保留有些算法要忽略但幾乎不會(huì)出現(xiàn)“盲翻Alpha”的場(chǎng)景。6.2 色彩偏藍(lán)偏紅通道順序才是罪魁禍?zhǔn)琢硪粋€(gè)容易誤導(dǎo)人的現(xiàn)象是翻轉(zhuǎn)后整張圖的紅藍(lán)通道互換。比如本來(lái)是紅色調(diào)的區(qū)域負(fù)片后變成藍(lán)色調(diào)。這說(shuō)明你的算法假設(shè)和當(dāng)前設(shè)備的內(nèi)存排列不一致常見(jiàn)于R和B兩個(gè)通道位置被顛倒了。這時(shí)候不要懷疑算法公式先跑3.4的驗(yàn)證函數(shù)確認(rèn)單像素紅色讀出值。如果讀出的結(jié)果和你預(yù)期不符把掩碼從0xFF000000 | 0x00FFFFFF那組換成另一組即可。記住格式名叫ARGB_8888不代表內(nèi)存就真的按ARGB順序排這個(gè)問(wèn)題在HarmonyOS上不少人都遇到過(guò)。6.3 處理完了界面卻紋絲不動(dòng)狀態(tài)刷新機(jī)制這是我個(gè)人覺(jué)得這個(gè)實(shí)戰(zhàn)里最“值錢”的坑。像素確實(shí)被翻轉(zhuǎn)了、writePixels也成功返回了但界面上的圖片就是不變。原因在ArkUI的狀態(tài)管理機(jī)制Image組件接收的是PixelMap對(duì)象引用writePixels改變的是對(duì)象內(nèi)部數(shù)據(jù)狀態(tài)系統(tǒng)比較的是引用是否變化發(fā)現(xiàn)引用沒(méi)變自然不觸發(fā)重渲染。我用的方案是給Image加.key(preview- this.refreshKey)每次處理完讓this.refreshKey通過(guò)強(qiáng)制組件重建來(lái)讀取最新像素。你也可以選擇創(chuàng)建新的PixelMap實(shí)例并賦值給State變量效果類似但會(huì)多一次像素拷貝。實(shí)際項(xiàng)目里如果處理頻繁key翻新這種輕量做法更合適。6.4 調(diào)試技巧別猜通道順序直接打印首行像素最后分享一個(gè)通用技巧。當(dāng)你面對(duì)一張不知道內(nèi)部存儲(chǔ)格式的PixelMap時(shí)最快的方法是打印首行前幾個(gè)像素的32位十六進(jìn)制值。寫一個(gè)臨時(shí)函數(shù)讀取前幾個(gè)像素把toString(16)的結(jié)果打出來(lái)。紅色對(duì)象的數(shù)值如果類似ff0000ff說(shuō)明RGBA低字節(jié)排列如果類似0000ffff那就是另一種排列。對(duì)照已知顏色幾秒就能確認(rèn)通道布局比自己盯著枚舉名猜半天高效得多。7. 一點(diǎn)后續(xù)想法顏色翻轉(zhuǎn)做完之后我發(fā)現(xiàn)這個(gè)“讀-算-寫-顯”框架幾乎可以直接套用到所有單像素算法上?；叶然褪前裄GB按亮度公式加權(quán)求和后重新賦值懷舊濾鏡就是給RGB分別乘上不同系數(shù)再加偏移閾值化就是判斷亮度后輸出黑或白。你已經(jīng)擁有了完整的數(shù)據(jù)通路剩下的只是換算法函數(shù)。如果你打算接著做我建議下一步嘗試灰度化因?yàn)樗皖伾D(zhuǎn)一樣不依賴相鄰像素但需要你理解亮度公式里的權(quán)重為什么是0.299、0.587、0.114。再往后做模糊才會(huì)真正進(jìn)入卷積和邊界處理的領(lǐng)域那時(shí)你才會(huì)明白像素級(jí)圖像處理的水有多深。這篇就先到這動(dòng)手跑一遍比讀十遍都管用。