diff --git a/CHANGELOG.md b/CHANGELOG.md index d850509..d11ed4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## 2.1.2-rc.13 - 修改ImageKnife跳过网络,从内存中获取图片 cacheType参数未使用bug +- 新增WEBP图片解析能力。 ## 2.1.2-rc.12 - 新增gif播放次数功能 diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index ee4c3e9..f0c8049 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/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) diff --git a/entry/src/main/ets/pages/webpImageTestPage.ets b/entry/src/main/ets/pages/webpImageTestPage.ets new file mode 100644 index 0000000..fc79bf5 --- /dev/null +++ b/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%") + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/media/webpAtanta.webp b/entry/src/main/resources/base/media/webpAtanta.webp new file mode 100644 index 0000000..affe2a5 Binary files /dev/null and b/entry/src/main/resources/base/media/webpAtanta.webp differ diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 36cf9a9..326cc61 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/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" ] } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/ImageKnife.ets b/library/src/main/ets/components/imageknife/ImageKnife.ets index b7195f7..0f70822 100644 --- a/library/src/main/ets/components/imageknife/ImageKnife.ets +++ b/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) { diff --git a/library/src/main/ets/components/imageknife/requestmanage/RequestManager.ets b/library/src/main/ets/components/imageknife/requestmanage/RequestManager.ets index 69c4ea5..19902fc 100644 --- a/library/src/main/ets/components/imageknife/requestmanage/RequestManager.ets +++ b/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处理 - if (ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag) { - // 处理gif + // gif、webp处理 + if ((ImageKnifeData.GIF == typeValue || ImageKnifeData.WEBP == typeValue) && !request.dontAnimateFlag) { + // 处理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 - if (ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag) { - // 处理gif + // 解析磁盘文件 gif、webp 和 svg + if ((ImageKnifeData.GIF == typeValue || ImageKnifeData.WEBP == typeValue) && !request.dontAnimateFlag) { + // 处理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 - if (ImageKnifeData.GIF == filetype && !this.options.dontAnimateFlag) { - // 处理gif + // 解析磁盘文件 gif、webp 和 svg + if ((ImageKnifeData.GIF == filetype || ImageKnifeData.WEBP == filetype) && !this.options.dontAnimateFlag) { + // 处理gif、webp this.gifProcess(onComplete, onError, source, filetype) // 保存二级磁盘缓存