!181 webp格式图片，实现首页轮盘跳动动画

Merge pull request !181 from LuQian-KUN/master

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.1.2-rc.13
 - 修改ImageKnife跳过网络，从内存中获取图片 cacheType参数未使用bug
+- 新增WEBP图片解析能力。
 
 ## 2.1.2-rc.12
 - 新增gif播放次数功能

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -292,6 +292,10 @@ struct IndexFunctionDemo {
             .onClick(() => {
               router.pushUrl({ url: "pages/testSingleFrameGifPage" });
             }).margin({ top: 5, left: 3 })
+          Button("webp测试")
+            .onClick(() => {
+              router.pushUrl({ url: "pages/webpImageTestPage" });
+            }).margin({ top: 5, left: 3 })
         }.width('100%').height(60).backgroundColor(Color.Pink)
 
         Text("worker测试").fontSize(15)

entry/src/main/ets/pages/webpImageTestPage.ets

@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ImageKnifeComponent } from '@ohos/libraryimageknife'
+import { ImageKnifeOption,ScaleType } from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct webpImageTestPage {
+  @State message: string = 'webp图片'
+  @State options: ImageKnifeOption = {
+    loadSrc: $r('app.media.app_icon')
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Text(`${this.message}`)
+          .width("300vp")
+          .height("60vp")
+          .textAlign(TextAlign.Center)
+          .fontSize("50fp")
+          .fontWeight(FontWeight.Bold)
+        Button("加载单帧webp")
+          .margin(16)
+          .onClick(() => {
+            console.log("加载单帧webp")
+            this.options = {
+              loadSrc: $r('app.media.webpSample'),
+              placeholderSrc:$r('app.media.icon_loading'),
+              mainScaleType:ScaleType.FIT_XY
+            }
+          })
+        Button("加载多帧webp")
+          .margin(16)
+          .onClick(() => {
+            console.log("加载多帧webp")
+            this.options = {
+              loadSrc: $r('app.media.webpAtanta'),
+              placeholderSrc:$r('app.media.icon_loading'),
+              mainScaleType:ScaleType.FIT_XY
+            }
+          })
+        ImageKnifeComponent({ imageKnifeOption: this.options })
+          .margin(16)
+          .width(200)
+          .height(100)
+          .clip(true)
+          .borderRadius(50)
+      }
+      .width("100%")
+      .height("100%")
+      .justifyContent(FlexAlign.Center)
+    }
+    .width("100%")
+    .height("100%")
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -48,6 +48,7 @@
     "pages/testImageKnifeAutoHeightPage",
     "pages/testPriorityComponent",
     "pages/testReusePhotoPage",
-    "pages/testImageKnifeCache"
+    "pages/testImageKnifeCache",
+    "pages/webpImageTestPage"
   ]
 }

library/src/main/ets/components/imageknife/ImageKnife.ets

@@ -387,7 +387,7 @@ export class ImageKnife {
         onError('暂不支持的类型！类型=' + filetype);
       }
 
-      if (ImageKnifeData.GIF == filetype && !request.dontAnimateFlag) {
+      if ((ImageKnifeData.GIF == filetype || ImageKnifeData.WEBP == filetype) && !request.dontAnimateFlag) {
         let gifParseImpl = new GIFParseImpl()
         gifParseImpl.parseGifs(cached, (data?: GIFFrame[], err?: BusinessError | string) => {
           if (err) {

library/src/main/ets/components/imageknife/requestmanage/RequestManager.ets

@@ -159,9 +159,9 @@ export class RequestManager {
       let fileTypeUtil = new FileTypeUtil();
       let typeValue = fileTypeUtil.getFileType(arrayBuffer)
       LogUtil.log("ImageKnife RequestManager  - 文件类型为= " + typeValue)
-      // gif处理
+      // gif、webp处理
-      if (ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag) {
+      if ((ImageKnifeData.GIF == typeValue || ImageKnifeData.WEBP == typeValue) && !request.dontAnimateFlag) {
-        // 处理gif
+        // 处理gif、webp
         this.gifProcess(onComplete, onError, arrayBuffer, typeValue)
       } else if (ImageKnifeData.SVG == typeValue) {
         // 处理svg
@@ -258,9 +258,9 @@ export class RequestManager {
     // 步骤一：文件转为pixelMap 然后变换 给Image组件
     let fileTypeUtil = new FileTypeUtil();
     let typeValue = fileTypeUtil.getFileType(source);
-    // 解析磁盘文件 gif 和 svg
+    // 解析磁盘文件 gif、webp 和 svg
-    if (ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag) {
+    if ((ImageKnifeData.GIF == typeValue || ImageKnifeData.WEBP == typeValue) && !request.dontAnimateFlag) {
-      // 处理gif
+      // 处理gif、webp
       this.gifProcess(onComplete, onError, source, typeValue)
     } else if (ImageKnifeData.SVG == typeValue) {
       this.svgProcess(request, onComplete, onError, source, typeValue)
@@ -388,9 +388,9 @@ export class RequestManager {
       return;
     }
 
-    // 解析磁盘文件 gif 和 svg
+    // 解析磁盘文件 gif、webp 和 svg
-    if (ImageKnifeData.GIF == filetype && !this.options.dontAnimateFlag) {
+    if ((ImageKnifeData.GIF == filetype || ImageKnifeData.WEBP == filetype) && !this.options.dontAnimateFlag) {
-      // 处理gif
+      // 处理gif、webp
       this.gifProcess(onComplete, onError, source, filetype)
 
       // 保存二级磁盘缓存