OpenHarmony輕松玩轉GIF數據渲染

點擊藍字 ╳ 關注我們

開源項目 OpenHarmony是每個人的 OpenHarmony

周黎生

OpenHarmony知識體系工作組

以下內容來自嘉賓分享，不代表開放原子開源基金會觀點 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）提供了Image組件支持GIF動圖的播放，但是缺乏擴展能力，不支持播放控制等。今天介紹一款三方庫——ohos-gif-drawable三方組件，帶大家一起玩轉GIF的數據渲染，搞定GIF動圖的各種需求。

效果演示

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

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

工欲善其事必先利其器。首先我們需要為自己打下理論基礎。了解GIF的數據格式，為后續(xù)解碼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)
varframes=decompressFrames(gif,true)

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

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

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

//javascript
const generatePatch = image => {
  const totalPixels = image.pixels.length
  const patchData = new Uint8ClampedArray(totalPixels * 4)
  for (var i = 0; i < totalPixels; i++) {
    const pos = i * 4
    const colorIndex = image.pixels[i]
    const color = image.colorTable[colorIndex] || [0, 0, 0]
    patchData[pos] = color[2] // B
    patchData[pos + 1] = color[1]// G
    patchData[pos + 2] = color[0] // R
    patchData[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，這樣處理為后續(xù)濾鏡效果提供了可能，也方便后續(xù)繪制流程。 好了，到這里我們就基本上把gifuct-js庫的基礎使用簡單介紹完了。 如何使用GIF：ohos-gif-drawable三方庫的介紹 我們先來看看整個ohos-gif-drawable組件的模型圖，通過模型圖，我們可以看到，用戶只要關注GIFComponent組件，和GIFComponent.ControllerOptions配置參數以及控制參數autoPlay和resetGif即可，非常簡單！ ?1. 支持的功能列表如下 ● 支持播放GIF圖片。 ● 支持控制GIF播放/暫停。 ● 支持重置GIF播放動畫。 ● 支持調節(jié)GIF播放速率。 ● 支持監(jiān)聽GIF所有幀顯示完成后的回調。 ● 支持設置顯示大小。 ● 支持7種不同的展示類型。 ● 支持設置顯示區(qū)域背景顏色。 2. 如何使用ohos-gif-drawable 首先需要使用npm下載ohos-gif-drawable三方庫

npminstall@ohos/ohos-gif-drawable--save

接下來我們需要配置一個worker給gifuct-js解碼使用 配置worker，在應用工程的entry/src/main/ets/pages目錄下新建workers文件夾，并且創(chuàng)建文件 gifParseWorker.ts ，文件內容如下：

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

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

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

到這里我們worker就配置好了。 下面就到了正式使用環(huán)節(jié)，我們只要在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})

舉個簡單的例子說明一下

// 創(chuàng)建worker 
let worker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {type: 'classic',name: 'loadUrlByWorker'})
// 關閉動畫      
this.gifAutoPlay = false;
// 銷毀上一次資源
this.model.destroy();
// 新創(chuàng)建一個modelx，用于配置用戶參數
let modelx = new GIFComponent.ControllerOptions()
modelx  
// 配置回調動畫結束監(jiān)聽，和耗時監(jiān)聽    
.setLoopFinish((loopTime) => {   
this.gifLoopCount++;   
this.loopHint = '當前gif循環(huán)了' + 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;    
// 給組件數據賦新的用戶配置參數，達到后續(xù)gif動畫效果      
this.model = modelx;   }, worker)}, (err) => {   
// 用戶根據返回的錯誤信息，進行業(yè)務處理(展示一張失敗占位圖、再次加載一次、加載其他圖片等)
})

這里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暫停動畫

組件內部會監(jiān)聽該參數的變化，用戶只要改變值即可達到控制效果 2.重置GIF的播放

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

由于重置不需要狀態(tài)管理，所以組件內監(jiān)聽到數據變化就會重置gif播放 3.設置GIF動畫播放速度

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

調用setSpeedFactor(speed: number)即可調整播放速度speed 為對比原始速率的乘積因子，比如設置0.5即為原始速率的0.5倍，設置為2即為原始速率的2倍 4.監(jiān)聽GIF動畫播放回調（比如第一次動畫結束）和獲取動畫實際播放總時長

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

調用setLoopFinish(fn: (loopTime?) => void)可以通過回調得到GIF動畫運行一周期耗時和一周期結束時間節(jié)點 5.顯示GIF任意一幀

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

調用setSeekTo(gifPosition: number)可以直接展示該gif的某一幀圖像 到這里ohos-gif-drawable三方庫的主要能力都介紹完了，是不是很簡單呢！ 6.適配組件的大小

letmodelx=newGIFComponent.ControllerOptions()

modelx.setScaleType(ScaleType.FIT_CENTER) // 將圖像縮放適配組件大小 調用setScaleType(scaletype: ScaleType)可以將圖像和組件大小進行適配。 目前支持的類型如下圖所示：GIFComponent.ScaleType ?

為什么要配置worker

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

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

為了爭取良好的用戶體驗，我們需要將耗時操作封裝至子線程中。 這里簡單描述一下worker的能力： 能夠讓主頁面運行的JavaScript線程中加載運行另外單獨的一個或者多個JavaScript線程，但是它的多線程編程能力區(qū)別于傳統意義上的多線程編程。主線程和Worker線程之間，不會共享任何作用域和資源，他們的通信方式是基于事件監(jiān)聽機制的 message。 接下來我們參考OpenHarmony文檔下的worker能力 1.OpenHarmony環(huán)境下Worker的API接口列表 2.Worker的使用簡單案例 經過了解之后，我們可以把解碼的耗時封裝到worker中處理，避免主線程耗時操作占用CPU導致卡頓問題。提升用戶體驗。 這也是使用ohos-gif-drawable三方庫需要配置worker的原因。

擴展部分

GIF的濾鏡效果 1. 灰白濾鏡

//javascript
// 重點代碼更改  
  let avg = (color[0] + color[1] + color[2]) / 3
  patchData[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) {
  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 = new Array()
  var pix: Array = 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;
  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 = new ArrayBuffer(bitmap.getPixelBytesNumber());
  let dataNewArray = new Uint8Array(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三方庫并沒有開發(fā)接口提供出來，所以開發(fā)者可以根據實際需求重寫自定義組件GIFComponent.,只需要在生成PixelMap的代碼片段中加入濾鏡代碼，即可利用濾鏡效果開發(fā)更多精彩的應用。

參考資料

1.《GIF文件格式解析》

https://segmentfault.com/a/1190000022866045

2.GIF解碼庫gifuct-js

https://github.com/matt-way/gifuct-js

3.GIF解碼庫底層邏輯jsBinarySchemaParser

https://github.com/matt-way/jsBinarySchemaParser

4.高級濾鏡算法借鑒

https://gitee.com/openharmony-tpc/ImageKnife/tree/master/imageknife/src/main/ets/components/imageknife/transform

5.OpenHarmony環(huán)境下Worker的API接口列表

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-worker.md

6.Worker的使用簡單案例

https://gitee.com/wang_zhaoyong/js_worker_module/wikis/Worker%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8

7.Web Worker API參考

https://developer.mozilla.org/zh-CN/docs/Web/API/Worker

8.OpenHarmony的Canvas文檔

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

9.OpenHarmony的CanvasRenderingContext2D對象文檔

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md