基于imageKnife对gif图的管理

幸运小面

发布于 2024-8-1 16:37

2646浏览

0收藏

前置准备

imageKnife安装：

ohpm install @ohos/imageknife1.

imageKnife请求网络gif的时，需要开通网络权限，在使用imageknife的模块module.json5中添加网络权限：

"requestPermissions": [ 
  { 
    "name": "ohos.permission.INTERNET", 
    "usedScene": { 
      "abilities": [ 
        "EntryAbility" 
      ], 
      "when": "always" 
    } 
  }]1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

在项目内初始化ImageKnifeOption，配置请求头和加载图片的基本参数：

@State option: ImageKnifeOption = { 
  loadSrc: $r('app.media.startIcon'),//resources资源加载,默认icon 
  headerOption: [{ 
    key: "refer", 
    value: "https://1.94.37.200:7070/AntiTheftChain/downloadImage" 
  }],//请求头 
  placeholderSrc: $r('app.media.icon_loading'),//加载中显示loading图 
  errorholderSrc: $r('app.media.icon_failed')//加载失败图 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

然后将加载好的数据传给ImageKnifeComponent，一个默认的样式就写好了。

ImageKnifeComponent({ imageKnifeOption: this.option })1.

场景

场景一：imageKnife可以实现控制gif图片的播放次数与帧数的定格

核心代码

实例化ImageKnifeOption后，添加gif属性，将字段playTime设置传入播放的次数，即可完成播放次数的控制。

Button("播放") 
  .onClick(() => { 
    this.option = { 
      loadSrc: 'https://xxx.gif', 
      placeholderSrc: $r('app.media.icon_loading'), 
      errorholderSrc: $r('app.media.icon_failed'), 
      displayProgress: true, 
      gif: { 
        playTimes: this.times 
      } 
    } 
  }).margin({ top: 20 })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

添加gif属性，将字段seekTo设置传入要定格的帧数，即可完成定格帧数。

Button("定格帧数") 
  .onClick(() => { 
    this.option = { 
      loadSrc: 'https://xxx.gif', 
      placeholderSrc: $r('app.media.icon_loading'), 
      errorholderSrc: $r('app.media.icon_failed'), 
      displayProgress: true, 
      gif: { 
        seekTo: this.stop 
      } 
    } 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

场景二：imageKnife实现播放和暂停gif的功能

核心代码

实例化ImageKnifeOption后,设置autoplay图片属性true/false,完成gif的暂停和继续播放。

Button('暂停图片').onClick(() => { 
  this.option.autoPlay = false; 
}) 
 
Button('播放图片').onClick(() => { 
  this.option.autoPlay = true; 
})1.
2.
3.
4.
5.
6.
7.

场景三：imageKnife对于网络环境和本地的加载的方式

核心代码

实例化ImageKnifeOption后，将索引传入对应的点击事件，分别加载本地资源和网络资源。

本地资源格式：loadSrc:$r('app.media.gifSample')。
网络资源格式：oadSrc = 'https://xxxx.gif'。

Select([ 
  { value: '资源加载', }, 
  { value: '网络加载', }, 
  { value: '图库加载（待定）', }, 
]) 
  .selected(this.index) 
  .value(this.text) 
  .font({ size: 16, weight: 500 }) 
  .fontColor('#182431') 
  .selectedOptionFont({ size: 16, weight: 400 }) 
  .optionFont({ size: 16, weight: 400 }) 
  .space(this.space) 
  .arrowPosition(this.arrowPosition) 
  .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 
  .optionWidth(200) 
  .optionHeight(300) 
  .onSelect((index: number, text?: string | undefined) => { 
    console.info('Select:' + index) 
    this.index = index;//传入点击事件 完成判断加载网络gif还是本地 
    index == 0 ? this.option.loadSrc = $r('app.media.gifSample'):this.option.loadSrc = 'https://xxx.gif' 
    if (text) { 
      this.text = text; 
    } 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

场景四：imageKnife对于gif样式边框的设置,包括边框的宽度，颜色，圆角

核心代码

实例化ImageKnifeOption后，将设置好的参数传入drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle，实现边框效果的转换。

Text("gif设置边框效果").fontSize(25) 
TextInput({ placeholder: '圆角宽度' }).margin({ top: 20 }).width('50%').type(InputType.Number) 
  .onChange((value: string) => { 
    this.BorderWidth = Number(value) 
  }) 
TextInput({ placeholder: '颜色样例：#ff0000' }) 
  .type(InputType.Normal) 
  .margin({ top: 20 }) 
  .width('50%') 
  .onChange((value: string) => { 
    this.colorString = value 
  }) 
TextInput({ placeholder: '圆角弧度' }) 
  .type(InputType.Number) 
  .margin({ top: 20 }) 
  .width('50%') 
  .onChange((value: string) => { 
    this.connerRadius = Number(value) 
  }) 
Button("网络gif - 设置参数").onClick(() => { 
  this.option = { 
    loadSrc: 'https://xxx.gif', 
    drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(this.BorderWidth, this.colorString, this.BorderWidth) 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

场景五：imageKnife获取gif图片的基本信息，包括宽度，高度，帧率，总帧数

核心代码

接口	参数	说明
addListener(func: AsyncCallback)	func: AsyncCallback	配置整个监听回调,数据正常加载返回,加载失败返回错误信息

实例化ImageKnifeOption后，先实例化网络请求new RequestOption()，load加载gif链接，添加监听属性addListener，回调返回拿到对象的width，height，delay。

因为gif动图本质是一个播放，所以将每次拿到的帧数相加可以得到总帧数（max），经过for循环找到循环的次数maxtimes，再用总帧数除以次数得到每秒帧率avg。

Button('预加载网络资源gif') 
  .onClick(() => { 
    let request = new RequestOption(); 
    request.load('https://xxx.gif') 
      .setImageViewSize({ width: 300, height: 300 }) 
      .addListener({ 
        callback: (err: BusinessError | string, data: ImageKnifeData) => { 
          if (err) { 
            console.log('预加载网络资源gif 出现错误! err=' + err) 
          } else { 
            console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data.drawGIFFrame?.imageGIFFrames![0].dims.width)) 
            console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data.drawGIFFrame?.imageGIFFrames)) 
            this.Width = data.drawGIFFrame?.imageGIFFrames![0].dims.width 
            this.Height = data.drawGIFFrame?.imageGIFFrames![0].dims.height 
            for (let i = 0; i < ((data.drawGIFFrame?.imageGIFFrames!).length); i++) { 
              this.max += Number(data.drawGIFFrame?.imageGIFFrames![i].delay) 
              console.log("预加载网络资源gif成功! max=" + this.max) 
              this.maxtimes = i 
              console.log("预加载网络资源gif成功! maxtimes=" + this.maxtimes) 
            } 
            this.avg = this.max / this.maxtimes 
            console.log("预加载网络资源gif成功! avg=" + this.avg) 
          } 
          return false; 
        } 
      }) 
    ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request); 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

注意：

1. 加载网络请求的和本地格式要注意区分。

2. 添加权限后要配置ImageKnifeOption的请求头。

分类

其他

标签

imageknife

gif图

已于2024-8-1 16:37:57修改

51CTO

51CTO博客

51CTO学堂

基于imageKnife对gif图的管理

前置准备

场景

目录

订阅鸿蒙技术特刊，精选内容抢先看