OpenHarmony輕松玩轉GIF數據渲染

OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）提供了Image組件支持GIF動圖的播放，但是缺乏擴展能力，不支持播放控制等。今天介紹一款三方庫——ohos-gif-drawable三方組件，帶大家一起玩轉GIF的數據渲染，搞定GIF動圖的各種需求。

效果演示

本文將從5個小節來帶領大家使用ohos-gif-drawable這一款三方庫，其中1、2、3這3個小節，主要介紹了ohos-gif-drawable的核心能力、GIF軟解碼和GIF繪制。4和5小節主要是擴展討論，如何添加濾鏡效果和軟解碼遇到的耗時問題。

1.GIF的文件格式理論基礎

工欲善其事必先利其器。首先我們需要為自己打下理論基礎。了解GIF的數據格式，為后續解碼GIF提供理論支持。

通過學習GIF的文件格式，我們對于GIF的組成格式有了一定的了解，并且有助于理解后面GIF的解碼。

在開始介紹之前，我想讓大家了解一下整體的結構思路如下圖：

其中gifuct-js三方庫主要完成了解碼的工作。

ohos-gif-drawable三方庫則是在gifuct-js的三方庫之上，進行了封裝。并結合了OpenHarmony的Canvas繪制能力，達到了播放和控制GIF的能力。

2.GIF軟解碼：gifuct-js三方庫介紹

GIF解碼我們使用了gifuct-js這個庫，它是一個純JavaScript的GIF解碼庫。首先我們需要了解基礎用法。

2.1 參考樣例將一個文件ArrayBuffer轉換為GIF解碼后的幀數據數組。

//javascript
var gif = parseGIF(arraybuffer)
var frames = decompressFrames(gif, true)

2.2 由于OpenHarmony的Image生成PixelMap需要的數據是BGRA數據，而2.1生成的frames所有數組中的patch字段則是RGBA數據，所以我們需要使用

//javascript
var gif = parseGIF(arraybuffer)
var frames = decompressFrames(gif, false)

然后將frame目前還未生成的patch字段數據，通過generatePatch 函數，將RGBA的數據更換為BGRA即可，如下代碼所示：

//javascript
const generatePatch = image => {const totalPixels = image.pixels.lengthconst patchData = new Uint8ClampedArray(totalPixels * 4)for (var i = 0; i < totalPixels; i++) {const pos = i * 4const colorIndex = image.pixels[i]const color = image.colorTable[colorIndex] || [0, 0, 0]patchData[pos] = color[2] // BpatchData[pos + 1] = color[1]// GpatchData[pos + 2] = color[0] // RpatchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0//A}return patchData
}

generatePatch函數，在這里會根據顏色表colorTable和基于顏色表的圖像數據pixels以及透明度transparentIndex生成BGRA格式的patchData，這個數據和Canvas中getImageData獲取的ImageData數據是一致的，都是Uint8ClampedArray類型，可以直接使用putImageData讓canvas繪制。

最后，生成的patchData賦值給Frame的patch字段。

這里我們并沒有直接使用Canvas的putImageData直接繪制。為了提升擴展性，我們使用了Image的能力來生成PixelMap，這樣處理為后續濾鏡效果提供了可能，也方便后續繪制流程。

好了，到這里我們就基本上把gifuct-js庫的基礎使用簡單介紹完了。

如何使用GIF：ohos-gif-drawable三方庫的介紹。

我們先來看看整個ohos-gif-drawable組件的模型圖，通過模型圖，我們可以看到，用戶只要關注GIFComponent組件，和GIFComponent.ControllerOptions配置參數以及控制參數autoPlay和resetGif即可，非常簡單！

支持的功能列表如下

● 支持播放GIF圖片。
● 支持控制GIF播放/暫停。
● 支持重置GIF播放動畫。
● 支持調節GIF播放速率。
● 支持監聽GIF所有幀顯示完成后的回調。
● 支持設置顯示大小。
● 支持7種不同的展示類型。
● 支持設置顯示區域背景顏色。

如何使用ohos-gif-drawable

首先需要使用npm下載ohos-gif-drawable三方庫

npm install @ohos/ohos-gif-drawable --save

接下來我們需要配置一個worker給gifuct-js解碼使用。

配置worker，在應用工程的entry/src/main/ets/pages目錄下新建workers文件夾，并且創建文件 gifParseWorker.ts ，文件內容如下：

import arkWorker from '@ohos.worker';
import { handler } from '@ohos/ohos-gif-drawable/src/main/ets/components/gif/worker/GifWorker'
// handler封裝了子線程邏輯，但worker目前只能在entry中進行創建arkWorker.parentPort.onmessage = handler;

然后在entry目錄的build-profile.json5文件中，添加如下內容：

"buildOption": { 
"sourceOption": {   
"workers": [    "./src/main/ets/pages/workers/gifParseWorker.ts"
] 
}
},

到這里我們worker就配置好了。

下面就到了正式使用環節，我們只要在UI界面需要的地方寫上自定義控件GIFComponent，然后傳入GIFComponent.ControllerOptions,gifAutoPlay,gifReset這三個參數就能控制gif動畫。

import { GIFComponent, ResourceLoader } from '@ohos/ohos-gif-drawable'
// gif繪制組件用戶屬性設置
@State model:GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();
// 是否自動播放
@State gifAutoPlay:boolean = true;
// 重置GIF播放，每次取反都能生效
@State gifReset:boolean = true;
// 在ARKUI的其他容器組件中添加該組件
GIFComponent({model:$model, autoPlay:$gifAutoPlay, resetGif:this.gifReset})

舉個簡單的例子說明一下

// 創建worker
let worker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {type: 'classic',name: 'loadUrlByWorker'})
// 關閉動畫     
this.gifAutoPlay = false;
// 銷毀上一次資源
this.model.destroy();
// 新創建一個modelx，用于配置用戶參數
let modelx = new GIFComponent.ControllerOptions()
modelx 
// 配置回調動畫結束監聽，和耗時監聽   
.setLoopFinish((loopTime) => {  
this.gifLoopCount++;  
this.loopHint = '當前gif循環了' + this.gifLoopCount + '次,耗時=' + loopTime + 'ms'  
}) 
// 設置組件大小   
.setSize({ width: this.compWidth, height: this.compHeight }) 
// 設置圖像和組件的適配類型 
.setScaleType(this.scaleType) 
// 設置播放速率 
.setSpeedFactor(this.speedFactor) 
// 設置背景 
.setBackgroundColor(Color.Grey)
// 加載網絡圖片,getContext(this)中的this指向page頁面或者組件都可以ResourceLoader.downloadDataWithContext(getContext(this), {   url: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700'   }, (sucBuffer) => {   
// 網絡資源sucBuffer返回后處理  
modelx.loadBuffer(sucBuffer, () => {      console.log('網絡加載解析成功回調繪制！')   
// 開啟自動播放     
this.gifAutoPlay = true;   
// 給組件數據賦新的用戶配置參數，達到后續gif動畫效果     
this.model = modelx;   }, worker)}, (err) => {  
// 用戶根據返回的錯誤信息，進行業務處理(展示一張失敗占位圖、再次加載一次、加載其他圖片等)
})

這里ResourceLoader內置了加載網絡資源GIF，本地工程資源GIF和本地路徑資源GIF文件數據的能力。

如果你已經有了GIF文件的arraybuffer數據，也可以直接調用modelx.loadBuffer(buffer: ArrayBuffer, readyRender: (err?) => void, worker: any)進行GIF播放。

甚至你已經生成了GIF解析數據，比如調用了2.2中的解碼代碼，那么你也可以直接調用modelx.setFrames(images?: GIFFrame[])來進行gif播放。

1.控制GIF的播放與暫停：

this.gifAutoPlay = true 開啟動畫
this.gifAutoPlay = false 暫停動畫

組件內部會監聽該參數的變化，用戶只要改變值即可達到控制效果

2. 重置GIF的播放

this.gifReset = !this.gifReset 每次變化都會重置gif播放。

由于重置不需要狀態管理，所以組件內監聽到數據變化就會重置gif播放

3. 設置GIF動畫播放速度

let modelx = new GIFComponent.ControllerOptions()
modelx.setSpeedFactor(2)// 將速率提升到2倍

調用setSpeedFactor(speed: number)即可調整播放速度speed 為對比原始速率的乘積因子，比如設置0.5即為原始速率的0.5倍，設置為2即為原始速率的2倍。

4. 監聽GIF動畫播放回調（比如第一次動畫結束）和獲取動畫實際播放總時長

let modelx = new GIFComponent.ControllerOptions()
modelx.setLoopFinish((loopTime?) => {
// loopTime為GIF動畫一周期耗時，回調時間為GIF動畫一周期結束時間節點
})

調用setLoopFinish(fn: (loopTime?) => void)可以通過回調得到GIF動畫運行一周期耗時和一周期結束時間節點。

5. 顯示GIF任意一幀

let modelx = new GIFComponent.ControllerOptions()
modelx.setSeekTo(5) // 直接展示該gif第5幀圖像

調用setSeekTo(gifPosition: number)可以直接展示該gif的某一幀圖像。

到這里ohos-gif-drawable三方庫的主要能力都介紹完了，是不是很簡單呢！

6. 適配組件的大小

let modelx = new GIFComponent.ControllerOptions()

modelx.setScaleType(ScaleType.FIT_CENTER) // 將圖像縮放適配組件大小調用setScaleType(scaletype: ScaleType)可以將圖像和組件大小進行適配。

目前支持的類型如下圖所示：

GIFComponent.ScaleType

為什么要配置worker

在具體實踐過程中我們會發現，當我們按下解碼按鈕的時候，主界面會有一點卡頓的情況。特別是大的GIF文件進行解碼的時候效果更明顯。這是因為我們在主線程中進行了CPU的密集型計算，這是一個耗時且占用CPU的操作。主線程中是不能執行耗時操作的。但是JavaScript只有一個線程啊？那么解碼這一塊操作該如何處理會比較好呢？帶著疑惑，我去查閱了資料發現JavaScript雖然屬于單線程環境。但是通過引入Worker的能力，引入子線程worker，可以實現JavaScript的“多線程”技術。

OpenHarmony如何在子線程中處理耗時任務

為了爭取良好的用戶體驗，我們需要將耗時操作封裝至子線程中。

這里簡單描述一下worker的能力：

能夠讓主頁面運行的JavaScript線程中加載運行另外單獨的一個或者多個JavaScript線程，但是它的多線程編程能力區別于傳統意義上的多線程編程。主線程和Worker線程之間，不會共享任何作用域和資源，他們的通信方式是基于事件監聽機制的 message。

接下來我們參考OpenHarmony文檔下的worker能力

1. OpenHarmony環境下Worker的API接口列表

2. Worker的使用簡單案例

經過了解之后，我們可以把解碼的耗時封裝到worker中處理，避免主線程耗時操作占用CPU導致卡頓問題。提升用戶體驗。

這也是使用ohos-gif-drawable三方庫需要配置worker的原因。

擴展部分

GIF的濾鏡效果

1. 灰白濾鏡

//javascript
// 重點代碼更改 let avg = (color[0] + color[1] + color[2]) / 3patchData[pos] = avg;patchData[pos + 1] = avg;patchData[pos + 2] = avg;patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;

2. 反轉濾鏡

//javascript
// 重點代碼更改patchData[pos] = 255 - color[0];patchData[pos + 1] = 255 - color[1];patchData[pos + 2] = 255 - color[2];patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0;

3. 高級濾鏡效果

假設我們這邊已經拿到了patch: Uint8ClampedArray像素數據，這里我需要先將其變換為一張PixelMap數據，參考GIFComponent中patch數據轉換為PixelMap的代碼。

//typescript
import image from "@ohos.multimedia.image"
let colorBuffer = patch.buffer
let pixelmap = await image.createPixelMap(colorBuffer, {'size': {'height': frame.dims.height as number,'width': frame.dims.width as number}
})

4. 高斯模糊

然后對PixelMap像素數據進行高斯模糊，調用 blur(pixelmap,10,true, (outPixelMap)=>{ // 模糊后的pixelmap數據})在回調中獲取模糊后的pixelmap。以下是模糊處理的算法：

export async function blur(bitmap: any, radius: number, canReuseInBitmap: boolean, func: AsyncTransform<PixelMap>) {if (radius < 1) {func("error,radius must be greater than 1 ", null);return;}let imageInfo = await bitmap.getImageInfo();let size = {width: imageInfo.size.width,height: imageInfo.size.height}if (!size) {func(new Error("fastBlur The image size does not exist."), null)return;}let w = size.width;let h = size.height;var pixEntry: Array<PixelEntry> = new Array()var pix: Array<number> = new Array()let bufferData = new ArrayBuffer(bitmap.getPixelBytesNumber());await bitmap.readPixelsToBuffer(bufferData);let dataArray = new Uint8Array(bufferData);for (let index = 0; index < dataArray.length; index+=4) {const r = dataArray[index];const g = dataArray[index+1];const b = dataArray[index+2];const f = dataArray[index+3];let entry = new PixelEntry();entry.a = 0;entry.b = b;entry.g = g;entry.r = r;entry.f = f;entry.pixel = ColorUtils.rgb(entry.r, entry.g, entry.b);pixEntry.push(entry);pix.push(ColorUtils.rgb(entry.r, entry.g, entry.b));}let wm = w - 1;let hm = h - 1;let wh = w * h;let div = radius + radius + 1;let r = CalculatePixelUtils.createIntArray(wh);let g = CalculatePixelUtils.createIntArray(wh);let b = CalculatePixelUtils.createIntArray(wh);let rsum, gsum, bsum, x, y, i, p, yp, yi, yw: number;let vmin = CalculatePixelUtils.createIntArray(Math.max(w, h));let divsum = (div + 1) >> 1;divsum *= divsum;let dv = CalculatePixelUtils.createIntArray(256 * divsum);for (i = 0; i < 256 * divsum; i++) {dv[i]=(i / divsum);
}yw = yi =0;let stack = CalculatePixelUtils.createInt2DArray(div,3);let stackpointer, stackstart, rbs, routsum, goutsum, boutsum, rinsum, ginsum, binsum: number;let sir: Array<number>;let r1 = radius +1;
for(y =0; y < h; y++){rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum =0;
for(i =-radius; i <= radius; i++){p = pix[yi + Math.min(wm, Math.max(i,0))];sir = stack[i + radius];sir[0]=(p &0xff0000)>>16;sir[1]=(p &0x00ff00)>>8;sir[2]=(p &0x0000ff);rbs = r1 - Math.abs(i);rsum += sir[0]* rbs;gsum += sir[1]* rbs;bsum += sir[2]* rbs;
if(i >0){rinsum += sir[0];ginsum += sir[1];binsum += sir[2];
}else{routsum += sir[0];goutsum += sir[1];boutsum += sir[2];
}
}stackpointer = radius;for(x =0; x < w; x++){r[yi]= dv[rsum];g[yi]= dv[gsum];b[yi]= dv[bsum];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if(y ==0){vmin[x]= Math.min(x + radius +1, wm);
}p = pix[yw + vmin[x]];sir[0]=(p &0xff0000)>>16;sir[1]=(p &0x00ff00)>>8;sir[2]=(p &0x0000ff);rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer =(stackpointer +1)% div;sir = stack[(stackpointer)% div];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi++;
}yw += w;
}
for(x =0; x < w; x++){rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum =0;yp =-radius * w;
for(i =-radius; i <= radius; i++){yi = Math.max(0, yp)+ x;sir = stack[i + radius];sir[0]= r[yi];sir[1]= g[yi];sir[2]= b[yi];rbs = r1 - Math.abs(i);rsum += r[yi]* rbs;gsum += g[yi]* rbs;bsum += b[yi]* rbs;if(i >0){rinsum += sir[0];ginsum += sir[1];binsum += sir[2];
}else{routsum += sir[0];goutsum += sir[1];boutsum += sir[2];
}if(i < hm){yp += w;
}
}yi = x;stackpointer = radius;
for(y =0; y < h; y++){
// Preserve alpha channel: ( 0xff000000 & pix[yi] )pix[yi]=(0xff000000& pix[Math.round(yi)])|(dv[Math.round(rsum)]<<16)|(dv[Math.round(gsum)]<<8)| dv[Math.round(bsum)];rsum -= routsum;gsum -= goutsum;bsum -= boutsum;stackstart = stackpointer - radius + div;sir = stack[stackstart % div];routsum -= sir[0];goutsum -= sir[1];boutsum -= sir[2];if(x ==0){vmin[y]= Math.min(y + r1, hm)* w;
}p = x + vmin[y];sir[0]= r[p];sir[1]= g[p];sir[2]= b[p];rinsum += sir[0];ginsum += sir[1];binsum += sir[2];rsum += rinsum;gsum += ginsum;bsum += binsum;stackpointer =(stackpointer +1)% div;sir = stack[stackpointer];routsum += sir[0];goutsum += sir[1];boutsum += sir[2];rinsum -= sir[0];ginsum -= sir[1];binsum -= sir[2];yi += w;
}
}let bufferNewData =newArrayBuffer(bitmap.getPixelBytesNumber());let dataNewArray =newUint8Array(bufferNewData);let index =0;for(let i =0; i < dataNewArray.length; i +=4){dataNewArray[i]= ColorUtils.red(pix[index]);dataNewArray[i+1]= ColorUtils.green(pix[index]);dataNewArray[i+2]= ColorUtils.blue(pix[index]);dataNewArray[i+3]= pixEntry[index].f;index++;
}await bitmap.writeBufferToPixels(bufferNewData);
if(func){
func("success", bitmap);
}
}

如果需要高級濾鏡效果可以參考ImageKnife組件的transform部分，這里僅僅展示模糊效果。

由于濾鏡效果目前ohos-gif-drawable三方庫并沒有開發接口提供出來，所以開發者可以根據實際需求重寫自定義組件GIFComponent.,只需要在生成PixelMap的代碼片段中加入濾鏡代碼，即可利用濾鏡效果開發更多精彩的應用。

為了幫助到大家能夠更有效的學習OpenHarmony 開發的內容，下面特別準備了一些相關的參考學習資料：