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 开发的内容，下面特别准备了一些相关的参考学习资料：