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解码后的帧数据数组。

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

2.2 由于OpenHarmony的Image生成PixelMap需要的数据是BGRA数据，而2.1生成的frames所有数组中的patch字段则是RGBA数据，所以我们需要使用

//javascriptvar gif = parseGIF(arraybuffer)var frames = 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，这样处理为后续滤镜效果提供了可能，也方便后续绘制流程。

好了，到这里我们就基本上把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 暂停动画

组件内部会监听该参数的变化，用户只要改变值即可达到控制效果

重置GIF的播放
```
this.gifReset = !this.gifReset 每次变化都会重置gif播放。
```
由于重置不需要状态管理，所以组件内监听到数据变化就会重置gif播放
设置GIF动画播放速度
```
let modelx = new GIFComponent.ControllerOptions()modelx.setSpeedFactor(2)// 将速率提升到2倍
```
调用setSpeedFactor(speed: number)即可调整播放速度speed 为对比原始速率的乘积因子，比如设置0.5即为原始速率的0.5倍，设置为2即为原始速率的2倍。
监听GIF动画播放回调（比如第一次动画结束）和获取动画实际播放总时长
```
let modelx = new GIFComponent.ControllerOptions()modelx.setLoopFinish((loopTime?) => {// loopTime为GIF动画一周期耗时，回调时间为GIF动画一周期结束时间节点})
```
调用setLoopFinish(fn: (loopTime?) => void)可以通过回调得到GIF动画运行一周期耗时和一周期结束时间节点。

显示GIF任意一帧

let modelx = new GIFComponent.ControllerOptions()modelx.setSeekTo(5) // 直接展示该gif第5帧图像

调用setSeekTo(gifPosition: number)可以直接展示该gif的某一帧图像。

到这里ohos-gif-drawable三方库的主要能力都介绍完了，是不是很简单呢！

适配组件的大小
```
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能力

OpenHarmony环境下Worker的API接口列表
Worker的使用简单案例
经过了解之后，我们可以把解码的耗时封装到worker中处理，避免主线程耗时操作占用CPU导致卡顿问题。提升用户体验。

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

扩展部分

GIF的滤镜效果

灰白滤镜

//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;

反转滤镜

//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;

高级滤镜
效果假设我们这边已经拿到了patch: Uint8ClampedArray像素数据，这里我需要先将其变换为一张PixelMap数据，参考GIFComponent中patch数据转换为PixelMap的代码。

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

高斯模糊
然后对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 = 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三方库并没有开发接口提供出来，所以开发者可以根据实际需求重写自定义组件GIFComponent.,只需要在生成PixelMap的代码片段中加入滤镜代码，即可利用滤镜效果开发更多精彩的应用。