diff --git a/entry/src/main/ets/pages/testImageKnifeCache.ets b/entry/src/main/ets/pages/testImageKnifeCache.ets new file mode 100644 index 0000000..98f495f --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeCache.ets @@ -0,0 +1,190 @@ +/* + * Copyright (C) 2022 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, + ImageKnifeOption, + ImageKnifeGlobal, + ImageKnife, + ImageKnifeData +} from '@ohos/libraryimageknife' +import image from '@ohos.multimedia.image'; +import { BusinessError } from '@ohos.base'; + + +let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife(); + +@Entry +@Component +struct testImageKnifeCache { + @State url: string = ''; + @State url1: string = ''; + @State imagePixelMap: PixelMap | undefined = undefined; + @State gifPixelMap: PixelMap | undefined = undefined; + @State imageKnifeOption1: ImageKnifeOption = + { + loadSrc: $r('app.media.icon'), + + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + }; + @State imageKnifeOption2: ImageKnifeOption = + { + loadSrc: $r('app.media.icon'), + + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + }; + + hasUrlCache(url: string) { + + imageKnife?.isUrlExist(url).then((data: ImageKnifeData) => { + + if (data.isPixelMap()) { + if (data.drawPixelMap) { + let pixelmap = data.drawPixelMap.imagePixelMap + if (pixelmap) { + this.imagePixelMap = pixelmap; + } + } + } + if (data.isGIFFrame()) { + let index: number = 0 + let timeId = -1; + clearTimeout(timeId); + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let renderGif = () => { + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap + let delay = data.drawGIFFrame.imageGIFFrames[index].delay + if (pixelmap) { + this.gifPixelMap = pixelmap; + } + index++; + if (index == data.drawGIFFrame.imageGIFFrames.length - 1) { + index = 0 + } + timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay) + } + } + } + renderGif() + } + } + } + + }).catch((err:BusinessError)=>{ + + }); + + } + + build() { + Scroll() { + Column() { + + Text('图片内存和磁盘读取').fontSize(30); + Text('加载的缓存时候关闭掉网络').fontSize(15); + + Button('加载静态图片') + .onClick(() => { + this.imageKnifeOption1 = + { + loadSrc: this.url, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + } + + }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }) + .width('100%') + .height(200) + .backgroundColor(Color.Orange) + + Button('加载缓存静态图片') + .onClick(() => { + this.imageKnifeOption1 = + { + loadSrc: this.url, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + } + }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: this.imagePixelMap as image.PixelMap + } + }) + .width('100%') + .height(200) + .backgroundColor(Color.Orange) + + + Button('加载动态图片') + .onClick(() => { + this.imageKnifeOption2 = + { + loadSrc: this.url1, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + } + + }) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }) + .width('100%') + .height(200) + .backgroundColor(Color.Orange) + + Button('加载缓存动态图片') + .onClick(() => { + this.imageKnifeOption2 = + { + loadSrc: this.url1, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + } + }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: this.gifPixelMap as image.PixelMap + } + }) + .width('100%') + .height(200) + .backgroundColor(Color.Orange) + + } + .alignItems(HorizontalAlign.Center) + .width('100%') + + } + .width('100%') + .height('100%') + } + + aboutToAppear() { + + } + + aboutToDisappear() { + + } + + onBackPress() { + + } +} \ 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 f94e4e3..8320b6f 100644 --- a/library/src/main/ets/components/imageknife/ImageKnife.ets +++ b/library/src/main/ets/components/imageknife/ImageKnife.ets @@ -44,6 +44,9 @@ import { MemoryLruCache } from '../cache/MemoryLruCache' import { BusinessError } from '@ohos.base' import { IParseImage } from './interface/IParseImage' import { ParseImageUtil } from './utils/ParseImageUtil' +import { GIFParseImpl } from './utils/gif/GIFParseImpl' +import { GIFFrame } from './utils/gif/GIFFrame' +import { SVGParseImpl } from './utils/svg/SVGParseImpl' export class ImageKnife { static readonly SEPARATOR: string = '/' @@ -218,17 +221,16 @@ export class ImageKnife { } - public isUrlExist(url: string): Promise { + public isUrlExist(url: string): Promise { return new Promise((resolve, reject) => { let request1 = new RequestOption(); request1.loadSrc = url; let request = this.loadResourcesCaches(request1); - let loadComplete = (ImageKnifeData: ImageKnifeData) => { - let pixelMap: PixelMap | undefined; - pixelMap = ImageKnifeData?.drawPixelMap?.imagePixelMap; - resolve(pixelMap as PixelMap); + let loadComplete = (imageKnifeData: ImageKnifeData) => { + this.memoryCache.put(request.generateCacheKey, imageKnifeData); + resolve(imageKnifeData); } let loadError = (err ?: BusinessError | string) => { reject(undefined); @@ -237,7 +239,7 @@ export class ImageKnife { }) } - loadMemoryCacheAndDiskFrom(request: RequestOption, onComplate: (ImageKnifeData: ImageKnifeData) => void | PromiseLike, onError: (err?: BusinessError | string) => void) { + loadMemoryCacheAndDiskFrom(request: RequestOption, onComplete: (imageKnifeData: ImageKnifeData) => void | PromiseLike, onError: (err?: BusinessError | string) => void) { let cache = this.memoryCache.get(request.generateCacheKey); if (cache == null || typeof cache == 'undefined') { let cached = this.diskMemoryCache.get(request.generateDataKey); @@ -246,13 +248,46 @@ export class ImageKnife { cached = this.diskMemoryCache.get(request.generateResourceKey); } if (cached != null) { - //5.磁盘有数据，解析错误返回onError - let success = (value: PixelMap) => { - let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, value); - this.memoryCache.put(request.generateCacheKey, imageKnifeData); - onComplate(imageKnifeData); + + let filetype:string | null =this.fileTypeUtil.getFileType(cached); + + if (filetype ==null){ + onError('请检查数据源'); + return; } - this.mParseImageUtil.parseImage(cached, success, onError) + + if (!this.fileTypeUtil.isImage(cached)){ + onError('暂不支持的类型！类型='+filetype); + } + + if (ImageKnifeData.GIF == filetype&&!request.dontAnimateFlag){ + let gifParseImpl = new GIFParseImpl() + gifParseImpl.parseGifs(cached, (data?:GIFFrame[],err?:BusinessError|string)=>{ + if(err){ + onError(err) + } + LogUtil.log("gifProcess data is null:"+(data == null)); + if(!!data){ + let imageKnifeData = ImageKnifeData.createImageGIFFrame(ImageKnifeType.GIFFRAME,data); + LogUtil.log('gifProcess 生成gif 返回数据类型') + onComplete(imageKnifeData) + }else{ + onError('Parse GIF callback data is null, you need check callback data!') + } + }) + + }else if (ImageKnifeData.SVG == filetype){ + let svgParseImpl = new SVGParseImpl() + svgParseImpl.parseSvg(request,cached, onComplete,onError) + }else { + //5.磁盘有数据，解析错误返回onError + let success = (value: PixelMap) => { + let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, value); + onComplete(imageKnifeData); + } + this.mParseImageUtil.parseImage(cached, success, onError) + } + } else { //6.磁盘无数据，返回onError onError("网络缓存and磁盘缓存无数据！") @@ -261,7 +296,7 @@ export class ImageKnife { //需要清理状态 cache.waitSaveDisk = false; //2.网络缓存有数据，返回 - onComplate(cache); + onComplete(cache); } }