floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

跳过网络，从内存中取图片，接口说明文档 

Signed-off-by: ‘面条侠’ <‘wangxinxin51@h-partners.com’>
This commit is contained in:
‘面条侠’ 2024-04-08 10:59:05 +08:00
parent b64661b9f9
commit 0c239e1118
8 changed files with 369 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,5 +1,6 @@
## 2.1.2-rc.12
- 新增磁盘预加载返回文件路径接口prefetchToDiskCache
- 新增跳过网络判断缓存或者磁盘中是否存在图片接口isUrlExist
## 2.1.2-rc.11
- 修复设置磁盘容量最大值出现闪退

8
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -357,6 +357,14 @@ struct IndexFunctionDemo {
router.pushUrl({ url: 'pages/testImageKnifeHttpRequestHeader' });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Text('测试图片缓存内存').fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('测试图片缓存内存')
.onClick(() => {
router.pushUrl({ url: 'pages/testImageKnifeCache' });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
}
}
.width('100%')

239
entry/src/main/ets/pages/testImageKnifeCache.ets Normal file
View File

@ -0,0 +1,239 @@
/*
* 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,
RequestOption,
Size,
CacheType
} 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 urlGif: string = 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658';
@State urlPng: string = 'https://img-blog.csdnimg.cn/20191215043500229.png';
@State urlJpg: string = 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB';
@State urlBmp: string = 'https://img-blog.csdn.net/20140514114029140';
@State urlWebp: string = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
@State imagePixelMap: PixelMap | undefined = undefined;
@State imagePixelMap_: PixelMap | undefined = undefined;
private index_: number = -1;
private tempSize: number = 200;
private timeId = -1;
private comSize: Size = {
width: this.tempSize,
height: this.tempSize,
}
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
loadSuccess = (data: ImageKnifeData) => {
clearTimeout(this.timeId);
if (data.isPixelMap()) {
if (data.drawPixelMap) {
let pixelmap = data.drawPixelMap.imagePixelMap
if (pixelmap) {
if (this.index_ == 1) {
this.imagePixelMap = pixelmap;
} else if (this.index_ == 2) {
this.imagePixelMap_ = pixelmap;
}
}
}
}
if (data.isGIFFrame()) {
let index: number = 0
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) {
if (this.index_ == 1) {
this.imagePixelMap = pixelmap;
} else if (this.index_ == 2) {
this.imagePixelMap_ = pixelmap;
}
}
index++;
if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
index = 0
}
this.timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
}
}
}
renderGif()
}
}
}
}
loadError = (err: BusinessError) => {
}
build() {
Scroll() {
Column() {
Text('图片内存和磁盘读取').fontSize(30);
Text('加载的缓存时候关闭掉网络').fontSize(15);
Row() {
Button('png')
.onClick(() => {
this.index_ = 0;
this.url = this.urlPng;
this.imageKnifeOption =
{
loadSrc: this.url,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
Button('bmp')
.onClick(() => {
this.index_ = 0;
this.url = this.urlBmp;
this.imageKnifeOption =
{
loadSrc: this.url,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
Button('webp')
.onClick(() => {
this.index_ = 0;
this.url = this.urlWebp;
this.imageKnifeOption =
{
loadSrc: this.url,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
Button('jpg')
.onClick(() => {
this.index_ = 0;
this.url = this.urlJpg;
this.imageKnifeOption =
{
loadSrc: this.url,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
Button('gif')
.onClick(() => {
this.index_ = 0;
this.url = this.urlGif;
this.imageKnifeOption =
{
loadSrc: this.url,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
}
Row() {
Button('缓存图片')
.onClick(() => {
this.index_ = 1;
imageKnife?.isUrlExist(this.url, CacheType.Cache, this.comSize).then(this.loadSuccess)
.catch(this.loadError);
})
Button('磁盘图片')
.onClick(() => {
this.index_ = 2;
imageKnife?.isUrlExist(this.url, CacheType.Disk, this.comSize).then(this.loadSuccess)
.catch(this.loadError);
})
Button('默认')
.onClick(() => {
this.index_ = 2;
imageKnife?.isUrlExist(this.url).then(this.loadSuccess)
.catch(this.loadError);
})
}
Text('网络图').fontSize(15);
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
.width(200)
.height(200)
.backgroundColor(Color.Orange)
Text('缓存图').fontSize(15);
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: this.imagePixelMap as image.PixelMap
}
})
.width(200)
.height(200)
.backgroundColor(Color.Orange)
Text('磁盘图').fontSize(15);
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: this.imagePixelMap_ as image.PixelMap
}
})
.width(200)
.height(200)
.backgroundColor(Color.Orange)
}
.alignItems(HorizontalAlign.Center)
.width('100%')
}
.width('100%')
.height('100%')
}
aboutToAppear() {
}
aboutToDisappear() {
}
onBackPress() {
}
}

3
entry/src/main/resources/base/profile/main_pages.json
View File

@ -46,6 +46,7 @@
"pages/testImageKnifeAutoWidthPage",
"pages/testImageKnifeAutoHeightPage",
"pages/testPriorityComponent",
"pages/testReusePhotoPage"
"pages/testReusePhotoPage",
"pages/testImageKnifeCache"
]
}

2
library/index.ets
View File

@ -98,7 +98,7 @@ export { UPNG } from './src/main/ets/components/3rd_party/upng/UPNG'
export { ImageKnife } from './src/main/ets/components/imageknife/ImageKnife'
export { ImageKnifeGlobal } from './src/main/ets/components/imageknife/ImageKnifeGlobal'
export { ObjectKey } from './src/main/ets/components/imageknife/ObjectKey'
export {RequestOption,Size,DetachFromLayout,Priority} from './src/main/ets/components/imageknife/RequestOption'
export {RequestOption,Size,DetachFromLayout,Priority,CacheType} from './src/main/ets/components/imageknife/RequestOption'
export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from './src/main/ets/components/imageknife/ImageKnifeComponent'
export { ImageKnifeDrawFactory } from './src/main/ets/components/imageknife/ImageKnifeDrawFactory'
export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions,HeaderOptions} from './src/main/ets/components/imageknife/ImageKnifeOption'

107
library/src/main/ets/components/imageknife/ImageKnife.ets
View File

@ -16,7 +16,7 @@
import { DiskLruCache } from "../cache/DiskLruCache"
import { EngineKeyFactories } from "../cache/key/EngineKeyFactories"
import { EngineKeyInterface } from "../cache/key/EngineKeyInterface"
import { RequestOption, Size } from "../imageknife/RequestOption"
import { CacheType, RequestOption, Size } from "../imageknife/RequestOption"
import { AsyncCallback } from "../imageknife/interface/AsyncCallback"
import { PlaceHolderManager } from "../imageknife/holder/PlaceHolderManager"
import { RetryHolderManager } from "../imageknife/holder/RetryHolderManager"
@ -49,6 +49,10 @@ import { ObjectKey } from './ObjectKey'
import { TaskParams } from './TaskParams'
import { Constants } from './constants/Constants'
import { TransformUtils } from './transform/TransformUtils'
import { GIFParseImpl } from './utils/gif/GIFParseImpl'
import { IParseImage } from './interface/IParseImage'
import { ParseImageUtil } from './utils/ParseImageUtil'
import { SVGParseImpl } from './utils/svg/SVGParseImpl'
export class ImageKnife {
static readonly SEPARATOR: string = '/'
@ -78,8 +82,10 @@ export class ImageKnife {
defaultLifeCycle: IDrawLifeCycle | undefined = undefined;
// 开发者可配置全局缓存
engineKeyImpl: EngineKeyInterface;
private mParseImageUtil: IParseImage<PixelMap>;
private constructor() {
this.mParseImageUtil = new ParseImageUtil();
this.runningMaps = new EasyLinkedHashMap();
this.pendingMaps = new EasyLinkedHashMap();
@ -322,6 +328,105 @@ export class ImageKnife {
return this.parseSource(request);
}
public isUrlExist(url: string, cacheType: CacheType = CacheType.Default, size: Size = {
width: 0,
height: 0
}): Promise<ImageKnifeData> {
return new Promise((resolve, reject) => {
let request = new RequestOption();
request.load(url)
.setImageViewSize(size)
this.generateDataCacheKey(request);
let loadComplete = (imageKnifeData: ImageKnifeData) => {
resolve(imageKnifeData);
}
let loadError = (err ?: BusinessError | string) => {
if (request.cacheType == CacheType.Default) {
this.loadMemoryDiskIsUrl(request, loadComplete, loadError);
}
reject(err);
}
if (request.cacheType == CacheType.Cache) {
this.loadMemoryCacheIsUrl(request, loadComplete, loadError);
} else if (request.cacheType == CacheType.Disk) {
this.loadMemoryDiskIsUrl(request, loadComplete, loadError);
}
else if (request.cacheType == CacheType.Default) {
this.loadMemoryCacheIsUrl(request, loadComplete, loadError);
}
})
}
loadMemoryCacheIsUrl(request: RequestOption, onComplete: (imageKnifeData: ImageKnifeData) => void | PromiseLike<ImageKnifeData>, onError: (err?: BusinessError | string) => void) {
let cache = this.memoryCacheProxy.loadMemoryCache(request.generateCacheKey, true);
if (cache == null || typeof cache == 'undefined') {
onError("No data in cache!")
} else {
cache.waitSaveDisk = false;
//2.网络缓存有数据，返回
onComplete(cache);
}
}
loadMemoryDiskIsUrl(request: RequestOption, onComplete: (imageKnifeData: ImageKnifeData) => void | PromiseLike<ImageKnifeData>, onError: (err?: BusinessError | string) => void) {
let cached: ArrayBuffer = DiskLruCache.getFileCacheByFile(this.diskMemoryCache.getPath() as string, request.generateDataKey) as ArrayBuffer;
if (cached != null) {
let filetype: string | null = this.fileTypeUtil.getFileType(cached);
if (filetype == null) {
onError('请检查数据源');
return;
}
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()
let success = (value: PixelMap) => {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, value);
onComplete(imageKnifeData);
}
svgParseImpl.parseSvg(request, cached, success, 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("No data in disk cache!")
}
}
generateDataCacheKey(request: RequestOption) {
let factories: EngineKeyInterface;
let cacheKey: string;

11
library/src/main/ets/components/imageknife/RequestOption.ets
View File

@ -64,9 +64,18 @@ export interface Size {
height: number
}
export enum CacheType {
Default,
//缓存
Cache,
//磁盘
Disk
}
export interface DetachFromLayout {
detach: () => void
}
export enum Priority {
HIGH = 0,
MEDIUM = 1,
@ -85,6 +94,8 @@ export class RequestOption {
addHeaderMap(map: Map<string, Object>) {
this.headers = map;
}
cacheType: CacheType = CacheType.Disk;
// 优先级
priority: Priority = Priority.MEDIUM;
uuid: string = '' // 唯一标识

2
sharedlibrary/src/main/ets/Index.ets
View File

@ -97,7 +97,7 @@ export { UPNG } from '@ohos/imageknife'
*/
export { ImageKnife } from '@ohos/imageknife'
export { ImageKnifeGlobal } from '@ohos/imageknife'
export {RequestOption,Size} from '@ohos/imageknife'
export {RequestOption,Size,CacheType} from '@ohos/imageknife'
export {ObjectKey} from '@ohos/imageknife'
export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing, Priority} from '@ohos/imageknife'
export { ImageKnifeDrawFactory } from '@ohos/imageknife'