diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 96c0ecf..45d7e95 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -172,7 +172,21 @@ struct Index { }); }) - + Button($r('app.string.test_cache_btn')).margin({ top: 10 }).onClick(() => { + router.push({ + uri: 'pages/TestCacheDataPage', + }); + }) + Button($r('app.string.test_change_color_btn')).margin({ top: 10 }).onClick(() => { + router.push({ + uri: 'pages/TestChangeColorPage', + }); + }) + Button($r('app.string.test_cancel_callback_btn')).margin({ top: 10 }).onClick(() => { + router.push({ + uri: 'pages/TestLoadCancelListenerPage', + }); + }) } } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/LoadStatePage.ets b/entry/src/main/ets/pages/LoadStatePage.ets index 212d322..ceeae99 100644 --- a/entry/src/main/ets/pages/LoadStatePage.ets +++ b/entry/src/main/ets/pages/LoadStatePage.ets @@ -79,7 +79,9 @@ struct LoadStatePage { }) } .margin({ top: 20 }) - Text(this.typeValue) + Text($r('app.string.image_format',this.typeValue)) + Text($r('app.string.image_width',this.currentWidth)) + Text($r('app.string.image_height',this.currentHeight)) ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth) .margin({ top: 20 }) Button($r('app.string.Custom_download_failed')).onClick(()=>{ diff --git a/entry/src/main/ets/pages/TestCacheDataPage.ets b/entry/src/main/ets/pages/TestCacheDataPage.ets new file mode 100644 index 0000000..193dafb --- /dev/null +++ b/entry/src/main/ets/pages/TestCacheDataPage.ets @@ -0,0 +1,140 @@ +/* + * Copyright (C) 2024 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 { ImageKnife, CacheStrategy, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; + +@Entry +@Component +struct TestCacheDataPage { + @State cacheUpLimit: number = 0; + @State currentNum: number = 0; + @State currentSize: number = 0; + @State currentWidth: number = 200 + @State currentHeight: number = 200 + @State markersLimitText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + @State markersNumText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + @State markersSizeText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + @State ImageKnifeOption: ImageKnifeOption = { + loadSrc: "", + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadFailed: (err) => { + console.error("Load Failed Reason: " + err); + }, + onLoadSuccess: (data) => { + return data; + }, + }, + border: { radius: 50 } + } + + aboutToAppear(): void { + ImageKnife.getInstance().initFileCache(getContext(this), 256, 256 * 1024 * 1024, "ImageKnifeCache1") + } + + build() { + Column() { + + ImageKnifeComponent( + { imageKnifeOption: this.ImageKnifeOption }) + .height(this.currentHeight) + .width(this.currentWidth) + .margin({ top: 10 }) + + Button($r('app.string.load_memory')) + .onClick(() => { + this.ImageKnifeOption = { + loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/3e/v3/LqRoLI-PRSu9Nqa8KdJ-pQ/dSqskBpSR9eraAMn7NBdqA.jpg", + objectFit: ImageFit.Contain, + writeCacheStrategy: CacheStrategy.Memory, + border: { radius: 50 }, + } + }) + Button($r('app.string.load_disk')) + .onClick(() => { + this.ImageKnifeOption = { + loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg", + objectFit: ImageFit.Contain, + writeCacheStrategy: CacheStrategy.File, + border: { radius: 50 }, + } + }) + Text($r('app.string.cur_cache_limit', this.markersLimitText, this.cacheUpLimit)) + .fontSize(20) + .margin({ bottom: 8 }); + Text($r('app.string.cur_cache_image_num', this.markersNumText, this.currentNum)) + .fontSize(20) + .margin({ bottom: 8 }); + Text($r('app.string.cur_cache_size', this.markersSizeText, this.currentSize)).fontSize(20).margin({ bottom: 20 }); + + Button($r('app.string.get_cur_memory_limit')).onClick(() => { + let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.Memory); + this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + if (result) { + this.cacheUpLimit = result / (1024 * 1024); + } else { + this.cacheUpLimit = 0; + } + }).margin({ bottom: 8 }); + Button($r('app.string.get_img_number_of_cache')).onClick(() => { + let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.Memory); + this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + if (result) { + this.currentNum = result; + } else { + this.currentNum = 0; + } + }).margin({ bottom: 8 }); + Button($r('app.string.get_cur_memory_size')).onClick(() => { + let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.Memory); + this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.memory')) + if (result) { + this.currentSize = result / (1024 * 1024); + } else { + this.currentSize = 0; + } + }).margin({ bottom: 8 }); + + Button($r('app.string.get_cur_disk_limit')).onClick(() => { + let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.File); + this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.disk')) + if (result) { + this.cacheUpLimit = result / (1024 * 1024); + } else { + this.cacheUpLimit = 0; + } + }).margin({ bottom: 8 }); + Button($r('app.string.get_img_number_of_disk')).onClick(() => { + let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.File); + this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.disk')) + if (result) { + this.currentNum = result; + } else { + this.currentNum = 0; + } + }).margin({ bottom: 8 }); + Button($r('app.string.get_cur_disk_size')).onClick(() => { + let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.File); + this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.disk')) + if (result) { + this.currentSize = result / (1024 * 1024); + } else { + this.currentSize = 0; + } + }).margin({ bottom: 8 }); + } + .height('100%').width('100%').margin({ top: 50 }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/TestChangeColorPage.ets b/entry/src/main/ets/pages/TestChangeColorPage.ets new file mode 100644 index 0000000..cfe95e9 --- /dev/null +++ b/entry/src/main/ets/pages/TestChangeColorPage.ets @@ -0,0 +1,112 @@ +/* + * Copyright (C) 2024 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 { drawing, common2D } from '@kit.ArkGraphics2D'; +import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; + +@Entry +@Component +struct TestChangeColorPage { + private imageOne: Resource = $r('app.media.ic_test_change_color_png'); + private imageTwo: Resource = $r('app.media.ic_test_change_color_png'); + @State src: Resource = this.imageOne + @State src2: Resource = this.imageTwo + @State color: common2D.Color = { + alpha: 255, + red: 255, + green: 1, + blue: 1 + }; + @State DrawingColorFilterFirst: ColorFilter | undefined = undefined + + build() { + Column() { + Text($r('app.string.select_color_btn')).margin({ top: 20 }) + Row() { + Button($r('app.string.red')).backgroundColor(Color.Red).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 255, + green: 1, + blue: 1 + }; + }) + Button($r('app.string.yellow')).backgroundColor(Color.Yellow).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 255, + green: 255, + blue: 1 + }; + }) + Button($r('app.string.green')).backgroundColor(Color.Green).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 1, + green: 255, + blue: 1 + }; + }) + Button($r('app.string.blue')).backgroundColor(Color.Blue).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 1, + green: 1, + blue: 255 + }; + }) + } + .width('100%') + .height(50) + .justifyContent(FlexAlign.Center) + + Text($r('app.string.master_image')).margin({ top: 20 }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: this.src + } + }).width(110).height(110) + + Text($r('app.string.click_img_to_change_color')).margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: this.src, + drawingColorFilter: this.DrawingColorFilterFirst + } + }) + .onClick(() => { + this.DrawingColorFilterFirst = + drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN); + }).width(110).height(110) + + Text($r('app.string.test_non_svg_color')).margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.ic_test_change_color_png'), + drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN) + } + }).width(110).height(110) + + Text($r('app.string.test_svg_color')).margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r("app.media.ic_test_change_color_svg"), + drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN) + } + }).width(110).height(110) + + }.width('100%').height('100%') + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 4d62c27..e5303d5 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -375,6 +375,134 @@ { "name": "preloading_prefetch", "value": "Dynamic preloading prefetch" + }, + { + "name": "image_format", + "value": "picture format：%s" + }, + { + "name": "image_width", + "value": "image width：%d" + }, + { + "name": "image_height", + "value": "image height：%d" + }, + { + "name": "cur_cache_limit", + "value": "%s:current cache limit：%fM" + }, + { + "name": "cur_cache_image_num", + "value": "%s:current cache image number：%d" + }, + { + "name": "cur_cache_size", + "value": "%s:current cache size：%fM" + }, + { + "name": "load_memory", + "value": "memory loaded picture" + }, + { + "name": "load_disk", + "value": "disk cache loads images" + }, + { + "name": "get_cur_memory_limit", + "value": "gets the current memory cache upper limit" + }, + { + "name": "get_img_number_of_cache", + "value": "gets the number of images cached in memory" + }, + { + "name": "get_cur_memory_size", + "value": "gets the size of the current cache" + }, + { + "name": "get_cur_disk_limit", + "value": "Gets the current disk cache upper limit" + }, + { + "name": "get_img_number_of_disk", + "value": "gets the number of images cached on disk" + }, + { + "name": "get_cur_disk_size", + "value": "gets the size of the current disk" + }, + { + "name": "select_color_btn", + "value": "click to select the color you want to change" + }, + { + "name": "click_img_to_change_color", + "value": "click on the image to change the image color" + }, + { + "name": "test_non_svg_color", + "value": "test non-SVG images for color change" + }, + { + "name": "test_svg_color", + "value": "Test svg picture color change" + }, + { + "name": "red", + "value": "red" + }, + { + "name": "yellow", + "value": "yellow" + }, + { + "name": "green", + "value": "green" + }, + { + "name": "blue", + "value": "blue" + }, + { + "name": "master_image", + "value": "master image:" + }, + { + "name": "rm_component_of_net", + "value": "remove Component - Network load picture" + }, + { + "name": "rm_component_of_local", + "value": "remove Component - Local resource picture" + }, + { + "name": "component_display", + "value": "recovery component display" + }, + { + "name": "onLoadCancel_reason", + "value": "onLoadCancel callback reason:%s" + }, + { + "name": "test_cache_btn", + "value": "test data for in cache" + }, + { + "name": "test_change_color_btn", + "value": "test change color for image" + }, + { + "name": "test_cancel_callback_btn", + "value": "test callback of cancel" + }, + { + "name": "memory", + "value": "Memory" + }, + { + "name": "disk", + "value": "Disk" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_test_change_color_png.png b/entry/src/main/resources/base/media/ic_test_change_color_png.png new file mode 100644 index 0000000..75f0a56 Binary files /dev/null and b/entry/src/main/resources/base/media/ic_test_change_color_png.png differ diff --git a/entry/src/main/resources/base/media/ic_test_change_color_svg.svg b/entry/src/main/resources/base/media/ic_test_change_color_svg.svg new file mode 100644 index 0000000..39c69c2 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_test_change_color_svg.svg @@ -0,0 +1,14 @@ + + + svg细图标 + + + + + + + + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index da1a3f5..981612c 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -28,6 +28,9 @@ "pages/LazyForEachCount", "pages/LazyForEachCache", "pages/PrefetchAndCacheCount", - "pages/PrefetchAndPreload" + "pages/PrefetchAndPreload", + "pages/TestCacheDataPage", + "pages/TestChangeColorPage", + "pages/TestLoadCancelListenerPage" ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 916736c..da35ecd 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -371,6 +371,134 @@ { "name": "preloading_prefetch", "value": "动态预加载prefetch" + }, + { + "name": "image_format", + "value": "图片格式：%s" + }, + { + "name": "image_width", + "value": "图片宽度：%d" + }, + { + "name": "image_height", + "value": "图片高度：%d" + }, + { + "name": "cur_cache_limit", + "value": "%s:当前缓存上限：%fM" + }, + { + "name": "cur_cache_image_num", + "value": "%s:当前缓存图片数量：%d" + }, + { + "name": "cur_cache_size", + "value": "%s:当前缓存的大小：%fM" + }, + { + "name": "load_memory", + "value": "内存加载图片" + }, + { + "name": "load_disk", + "value": "磁盘缓存加载图片" + }, + { + "name": "get_cur_memory_limit", + "value": "获取当前内存缓存上限" + }, + { + "name": "get_img_number_of_cache", + "value": "获取当前内存缓存图片数量" + }, + { + "name": "get_cur_memory_size", + "value": "获取当前缓存的大小" + }, + { + "name": "get_cur_disk_limit", + "value": "获取当前磁盘缓存上限" + }, + { + "name": "get_img_number_of_disk", + "value": "获取当前磁盘缓存图片数量" + }, + { + "name": "get_cur_disk_size", + "value": "获取当前磁盘的大小" + }, + { + "name": "select_color_btn", + "value": "点击选择要更改的颜色" + }, + { + "name": "click_img_to_change_color", + "value": "点击图片更改图片颜色" + }, + { + "name": "test_non_svg_color", + "value": "测试非svg图片变色" + }, + { + "name": "test_svg_color", + "value": "测试svg图片变色" + }, + { + "name": "red", + "value": "红色" + }, + { + "name": "yellow", + "value": "黄色" + }, + { + "name": "green", + "value": "绿色" + }, + { + "name": "blue", + "value": "蓝色" + }, + { + "name": "master_image", + "value": "原图:" + }, + { + "name": "rm_component_of_net", + "value": "移除组件-网络加载图片" + }, + { + "name": "rm_component_of_local", + "value": "移除组件-本地资源图片" + }, + { + "name": "component_display", + "value": "恢复组件显示" + }, + { + "name": "onLoadCancel_reason", + "value": "onLoadCancel回调原因:%s" + }, + { + "name": "test_cache_btn", + "value": "测试缓存数据" + }, + { + "name": "test_change_color_btn", + "value": "测试颜色变换" + }, + { + "name": "test_cancel_callback_btn", + "value": "测试加载取消回调接口" + }, + { + "name": "memory", + "value": "内存" + }, + { + "name": "disk", + "value": "磁盘" } ] } \ No newline at end of file diff --git a/library/src/main/ets/ImageKnife.ets b/library/src/main/ets/ImageKnife.ets index c1cab56..c655e44 100644 --- a/library/src/main/ets/ImageKnife.ets +++ b/library/src/main/ets/ImageKnife.ets @@ -341,6 +341,65 @@ export class ImageKnife { return this.fileCache as FileCache } + /** + * get cache upper limit + * @param cacheType + * @returns + */ + getCacheUpperLimit(cacheType?: CacheStrategy): number | undefined { + if (cacheType == undefined || cacheType == CacheStrategy.Default) { + cacheType = CacheStrategy.Memory; + } + if (cacheType == CacheStrategy.Memory) { + return (this.memoryCache as MemoryLruCache).maxMemory; + } else { + if (this.isFileCacheInit()) { + return this.fileCache?.maxMemory; + } else { + throw new Error("the disk cache not init"); + } + } + } + + /** + * gets the number of images currently cached + * @param cacheType + * @returns + */ + getCurrentPicturesNum(cacheType: CacheStrategy): number | undefined { + if (cacheType == undefined || cacheType == CacheStrategy.Default) { + cacheType = CacheStrategy.Memory; + } + if (cacheType == CacheStrategy.Memory) { + return (this.memoryCache as MemoryLruCache).size(); + } else { + if (this.isFileCacheInit()) { + return this.fileCache?.size(); + } else { + throw new Error("the disk cache not init"); + } + } + } + + /** + * gets the current cache size + * @param cacheType + * @returns + */ + getCurrentCacheSize(cacheType: CacheStrategy): number | undefined { + if (cacheType == undefined || cacheType == CacheStrategy.Default) { + cacheType = CacheStrategy.Memory; + } + if (cacheType == CacheStrategy.Memory) { + return (this.memoryCache as MemoryLruCache).currentMemory; + } else { + if (this.isFileCacheInit()) { + return this.fileCache?.currentMemory; + } else { + throw new Error("the disk cache not init"); + } + } + } private pixelMapToArrayBuffer(pixelMap: PixelMap): ArrayBuffer { let imageInfo = pixelMap.getImageInfoSync();