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

补充文件缓存预加载接口preLoadCache、isUrlExist,请求头,以及ImageKnifeOption属性isCacheable、onlyRetrieveFromCache,请求头 

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-04-30 12:01:32 +08:00
parent 34cb7e64ea
commit 219164b278
15 changed files with 405 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,6 +1,13 @@
## 3.0.0-rc.1
- 新增从内存或文件缓存获取图片数据接口isUrlExist
- 新增图片预加载preLoadCache并会犯文件缓存路径
- ImageKnifeOption新增writeCacheStrategy存入策略
- ImageKnifeOption新增onlyRetrieveFromCache仅用缓存加载
- 新增单个和全局请求头
- 补齐自定key特性
## 3.0.0-rc.0
- 使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能
- 补齐自定key特性
较2.x版本增强点：
- 使用Image组件代替Canvas组件渲染

26
README.md
View File

@ -121,7 +121,33 @@ ImageKnifeComponent({ ImageKnifeOption:
}
}).width(100).height(100)
```
## 接口说明
### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
|-----------------------|--------------------------------|---------------|
| loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
| objectFit | ImageFit | 图片展示样式（可选） |
| writeCacheStrategy | WriteCacheStrategy_Type | 写入缓存策略(可选) |
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
| customGetImage | (context: Context, src: string | 自定义网络（可选） | | Resource | 错误占位图数据源 |
| border | BorderOptions | 边框圆角（可选） |
| priority | taskpool.Priority | 加载优先级（可选） |
| context | common.UIAbilityContext | 上下文（可选） |
| progressListener | (progress: number)=>void | 进度（可选） |
| signature | ObjectKey | 自定义缓存关键字 |
| headerOption | Array<HeaderOptions> | 设置请求头 |
### ImageKnife接口
| 参数名称 | 入参内容 | 功能简介 |
|--------------|---------------------------|-------------|
| preLoadCache | url:string | 预加载并返回文件缓存路径 |
| isUrlExist | url: string, cacheType: Cache_Type | 从内存或文件缓存中获取资源 |
| addHeader | key: string, value: Object | 全局设置请求头 |
| deleteHeader | key: string | 全局删除请求头 |
| setEngineKeyImpl | CustomEngineKeyImpl | 全局配置缓存key |
## 约束与限制
API11

3
entry/src/main/ets/entryability/EntryAbility.ets
View File

@ -37,6 +37,9 @@ export default class EntryAbility extends UIAbility {
// 初始化ImageKnife的文件缓存
await ImageKnife.getInstance().initFileCache(this.context, 256, 256 * 1024 * 1024)
ImageKnife.getInstance().setEngineKeyImpl(new CustomEngineKeyImpl())
// 全局配置请求头
ImageKnife.getInstance().addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
ImageKnife.getInstance().deleteHeader('refer');
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');

18
entry/src/main/ets/pages/Index.ets
View File

@ -68,6 +68,24 @@ struct Index {
});
})
Button("测试文件缓存预加载").onClick(()=>{
router.push({
uri: 'pages/TestPrefetchToFileCache',
});
})
Button("测试获取内存文件缓存").onClick(()=>{
router.push({
uri: 'pages/TestIsUrlExist',
});
})
Button("测试单个请求头").onClick(()=>{
router.push({
uri: 'pages/TestHeader',
});
})
}
.width('100%')

39
entry/src/main/ets/pages/TestHeader.ets Normal file
View File

@ -0,0 +1,39 @@
/*
* 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 { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/imageknife'
@Entry
@Component
struct TestPrefetchToFileCachePage {
@State imageKnifeOption: ImageKnifeOption = {
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
headerOption:[
{
key:"abc",
value:"单个"
}
]
}
build() {
Column() {
ImageKnifeComponent({
ImageKnifeOption: this.imageKnifeOption
}).width(300).height(300)
}
.height('100%') .width('100%')
}
}

77
entry/src/main/ets/pages/TestIsUrlExist.ets Normal file
View File

@ -0,0 +1,77 @@
/*
* 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 { ImageKnifeComponent,ImageKnife,ImageKnifeOption,ImageKnifeData,Cache_Type } from '@ohos/imageknife'
@Entry
@Component
struct TestIsUrlExist {
@State imageKnifeOption: ImageKnifeOption = {
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading')
}
@State source: PixelMap | string = ""
@State source1: PixelMap | string = ""
build() {
Column() {
Flex(){
Button("加载gif图").onClick(()=>{
this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
})
Button("内存缓存获取gif").onClick(()=>{
ImageKnife.getInstance()
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",Cache_Type.MemoryCache)
.then((data)=>{
this.source = data!.source
})
})
Button("文件缓存获取gif").onClick(()=>{
ImageKnife.getInstance()
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",Cache_Type.FileCache)
.then((data)=>{
this.source1 = data!.source
})
})
}
Flex(){
Button("加载静态图").onClick(()=>{
this.imageKnifeOption.loadSrc = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
})
Button("内存缓存获取").onClick(()=>{
ImageKnife.getInstance()
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',Cache_Type.MemoryCache)
.then((data)=>{
this.source = data!.source
})
})
Button("文件缓存获取").onClick(()=>{
ImageKnife.getInstance()
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',Cache_Type.FileCache)
.then((data)=>{
this.source1 = data!.source
})
})
}
ImageKnifeComponent({
ImageKnifeOption: this.imageKnifeOption
}).width(200).height(200)
Image(this.source)
.width(200).height(200).backgroundColor(Color.Pink)
Image(this.source1)
.width(200).height(200).backgroundColor(Color.Pink)
}
.height('100%') .width('100%')
}
}

42
entry/src/main/ets/pages/TestPrefetchToFileCache.ets Normal file
View File

@ -0,0 +1,42 @@
/*
* 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 { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/imageknife'
@Entry
@Component
struct TestPrefetchToFileCachePage {
@State imageKnifeOption: ImageKnifeOption = {
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading')
}
async preload(url:string) {
let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)
console.log("preload-fileCachePath=="+ fileCachePath)
}
build() {
Column() {
Button("磁盘预加载").onClick(async ()=>{
await this.preload("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
})
Button("加载图片").onClick(()=>{
this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
})
ImageKnifeComponent({
ImageKnifeOption: this.imageKnifeOption
}).width(300).height(300)
}
.height('100%') .width('100%')
}
}

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

@ -8,6 +8,9 @@
"pages/TransformPage",
"pages/UserPage",
"pages/TestImageFlash",
"pages/SignatureTestPage"
"pages/SignatureTestPage",
"pages/TestPrefetchToFileCache",
"pages/TestIsUrlExist",
"pages/TestHeader"
]
}

2
library/index.ets
View File

@ -14,6 +14,8 @@ export { IEngineKey } from './src/main/ets/key/IEngineKey'
export { ObjectKey } from './src/main/ets/model/ObjectKey'
export { ImageKnifeData , Cache_Type} from "./src/main/ets/model/ImageKnifeData"

100
library/src/main/ets/ImageKnife.ets
View File

@ -13,12 +13,18 @@
* limitations under the License.
*/
import { ImageKnifeRequest } from './ImageKnifeRequest';
import { ImageKnifeData } from './model/ImageKnifeData';
import { Cache_Type, ImageKnifeData } from './model/ImageKnifeData';
import { MemoryLruCache } from './utils/MemoryLruCache';
import { IMemoryCache } from './utils/IMemoryCache'
import { FileCache } from './utils/FileCache';
import { ImageKnifeDispatcher } from './ImageKnifeDispatcher';
import { IEngineKey } from './key/IEngineKey';
import { ImageKnifeOption } from './ImageKnifeOption';
import { DefaultEngineKey } from './key/DefaultEngineKey';
import { FileTypeUtil } from './utils/FileTypeUtil';
import { util } from '@kit.ArkTS';
import { image } from '@kit.ImageKit';
import { common } from '@kit.AbilityKit';
export class ImageKnife {
@ -28,6 +34,7 @@ export class ImageKnife {
// 文件缓存
private fileCache?: FileCache
private dispatcher: ImageKnifeDispatcher = new ImageKnifeDispatcher()
headerMap: Map<string, Object> = new Map<string, Object>(); //定义全局map
public static getInstance(): ImageKnife {
if (!ImageKnife.instance) {
@ -49,7 +56,14 @@ export class ImageKnife {
this.fileCache = new FileCache(context, size, memory)
this.fileCache.initFileCache()
}
//全局设置请求头调用方法
addHeader(key: string, value: Object) {
this.headerMap.set(key, value);
}
deleteHeader(key: string) {
this.headerMap.delete(key);
}
/**
* 设置自定义的内存缓存
* @param newMemoryCache 自定义内存缓存
@ -86,6 +100,87 @@ export class ImageKnife {
this.fileCache?.put(key, data)
}
getFileCache(): FileCache{
return this.fileCache as FileCache
}
// 预加载到文件缓存，并返回缓存路径
preLoadCache(url:string): Promise<string> {
return new Promise((resolve,reject)=>{
let imageKnifeOption = new ImageKnifeOption()
imageKnifeOption.loadSrc = url
let engineKeyImpl: IEngineKey = new DefaultEngineKey()
let keys = engineKeyImpl.generateCacheKey(url)
let cachePath = ImageKnife.getInstance().getFileCache().getFileToPath(keys)
if(cachePath == null || cachePath == "" || cachePath == undefined) {
let request = new ImageKnifeRequest(
imageKnifeOption,
imageKnifeOption.context !== undefined ? imageKnifeOption.context : getContext(this) as common.UIAbilityContext,
0,
0,
0,
{
showPixelMap(version: number, pixelMap: PixelMap | string) {
let cachePaths = ImageKnife.getInstance().getFileCache().getFileToPath(keys)
if(cachePaths != "") {
resolve(cachePaths)
} else {
reject(undefined)
}
}
}
)
this.execute(request)
} else {
resolve(cachePath)
}
})
}
// 从内存或文件缓存中获取资源
getCacheImage(url: string, cacheType: Cache_Type):Promise<ImageKnifeData | undefined> {
return new Promise((resolve,reject)=>{
let engineKeyImpl: IEngineKey = new DefaultEngineKey()
if(cacheType == Cache_Type.MemoryCache) {
let keys = engineKeyImpl.generateCacheKey(url)
let memoryCache:ImageKnifeData | undefined = ImageKnife.getInstance()
.loadFromMemoryCache(keys)
resolve(memoryCache)
} else if (cacheType == Cache_Type.FileCache) {
let keys = engineKeyImpl.generateCacheKey(url)
let buffer = ImageKnife.getInstance().loadFromFileCache(keys)
if(buffer != undefined) {
let fileTypeUtil = new FileTypeUtil();
let typeValue = fileTypeUtil.getFileType(buffer);
if (typeValue === 'gif' || typeValue === 'webp') {
let base64Help = new util.Base64Helper()
let base64str = "data:image/" + typeValue + ";base64," + base64Help.encodeToStringSync(new Uint8Array(buffer))
resolve({
source:base64str,
imageWidth: 0,
imageHeight: 0
})
}
let imageSource: image.ImageSource = image.createImageSource(buffer);
let decodingOptions: image.DecodingOptions = {
editable: true,
}
imageSource.createPixelMap(decodingOptions)
.then((pixelmap: PixelMap) => {
resolve({
source:pixelmap,
imageWidth: 0,
imageHeight: 0
})
imageSource.release()
})
} else {
resolve(undefined)
}
}
})
}
/**
* 清除所有文件缓存
* @returns
@ -115,6 +210,9 @@ export class ImageKnife {
}
async execute(request: ImageKnifeRequest): Promise<void> {
if (this.headerMap.size > 0) {
request.addHeaderMap(this.headerMap)
}
this.dispatcher.enqueue(request)
}

39
library/src/main/ets/ImageKnifeDispatcher.ets
View File

@ -23,7 +23,7 @@ import common from '@ohos.app.ability.common';
import { FileCache } from './utils/FileCache';
import fs from '@ohos.file.fs';
import { ImageKnife } from './ImageKnife';
import { ImageKnifeData } from './model/ImageKnifeData';
import { ImageKnifeData, WriteCacheStrategy_Type } from './model/ImageKnifeData';
import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import emitter from '@ohos.events.emitter';
@ -33,6 +33,7 @@ import { FileTypeUtil } from './utils/FileTypeUtil';
import util from '@ohos.util';
import { IEngineKey } from './key/IEngineKey';
import { DefaultEngineKey } from './key/DefaultEngineKey';
import { HeaderOptions } from './ImageKnifeOption';
export class ImageKnifeDispatcher {
// 最大并发
@ -110,7 +111,11 @@ export class ImageKnifeDispatcher {
context: currentRequest.context,
src: imageSrc,
key: key,
customGetImage: currentRequest.ImageKnifeOption.customGetImage
headers:currentRequest.ImageKnifeOption.headerOption,
allHeaders:currentRequest.headers,
customGetImage: currentRequest.ImageKnifeOption.customGetImage,
onlyRetrieveFromCache: currentRequest.ImageKnifeOption.onlyRetrieveFromCache,
requestSource
}
// 启动线程下载和解码主图
let task = new taskpool.Task(requestJob, request)
@ -153,9 +158,11 @@ export class ImageKnifeDispatcher {
}
// 保存内存缓存
if(currentRequest.ImageKnifeOption.writeCacheStrategy !== WriteCacheStrategy_Type.OnlyFile) {
ImageKnife.getInstance()
.saveMemoryCache(this.engineKeyImpl.generateCacheKey(imageSrc, currentRequest.ImageKnifeOption.signature), ImageKnifeData)
.saveMemoryCache(this.engineKeyImpl.generateCacheKey(imageSrc, currentRequest.ImageKnifeOption.signature),
ImageKnifeData)
}
if (requestList !== undefined) {
// todo 判断request生命周期，已销毁的不需要再绘制
@ -244,7 +251,7 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
if (request.src.indexOf("http://") == 0 || request.src.indexOf("https://") == 0) { //从网络下载
// 先从文件缓存获取
resBuf = FileCache.getFileCacheByFile(request.context, request.key)
if (resBuf === undefined) {
if (resBuf === undefined && request.onlyRetrieveFromCache != true && request.requestSource == 0) {
// // 模拟耗时验证
// let start = (new Date()).getTime();
// while ((new Date()).getTime() - start < 5000) {
@ -252,7 +259,18 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
// }
let httpRequest = http.createHttp();
let progress: number = 0
const headerObj: Record<string,object> = {}
if(request.headers != undefined) {
request.headers.forEach((value)=>{
headerObj[value.key] = value.value
})
} else if(request.allHeaders.size > 0) {
request.allHeaders.forEach((value,key)=>{
headerObj[key] = value
})
}
let promise = httpRequest.requestInStream(request.src, {
header:headerObj,
method: http.RequestMethod.GET,
connectTimeout: 6000,
readTimeout: 6000,
@ -303,7 +321,12 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
}
}
} else if ((request.src as Resource).id !== undefined) { //从资源文件获取
resBuf = FileCache.getFileCacheByFile(request.context, request.key)
if (resBuf == undefined && request.onlyRetrieveFromCache != true && request.requestSource == 0) {
resBuf = request.context.resourceManager.getMediaContentSync((request.src as Resource).id).buffer as ArrayBuffer
} else if (resBuf == undefined && request.requestSource != 0) {
resBuf = request.context.resourceManager.getMediaContentSync((request.src as Resource).id).buffer as ArrayBuffer
}
}
}
@ -364,5 +387,9 @@ interface RequestJobRequest {
context: common.UIAbilityContext,
src: string | PixelMap | Resource,
key: string,
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>
headers?:Array<HeaderOptions>,
allHeaders:Map<string,Object>,
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>,
onlyRetrieveFromCache?: boolean
requestSource:ImageKnifeRequestSource
}

12
library/src/main/ets/ImageKnifeOption.ets
View File

@ -15,7 +15,11 @@
import taskpool from '@ohos.taskpool';
import common from '@ohos.app.ability.common'
import { ObjectKey } from './model/ObjectKey';
import { WriteCacheStrategy_Type } from './model/ImageKnifeData';
export interface HeaderOptions {
key: string;
value: Object;
}
@Observed
export class ImageKnifeOption {
// 主图资源
@ -25,6 +29,8 @@ export class ImageKnifeOption {
// 失败占位图
errorholderSrc?: PixelMap | Resource;
headerOption?: Array<HeaderOptions>;
// 自定义缓存关键字
signature?: ObjectKey;
@ -33,6 +39,10 @@ export class ImageKnifeOption {
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>
border?: BorderOptions
// 缓存策略
writeCacheStrategy?: WriteCacheStrategy_Type
// 仅使用缓存加载数据
onlyRetrieveFromCache?: boolean = false;
priority? : taskpool.Priority = taskpool.Priority.LOW

15
library/src/main/ets/ImageKnifeRequest.ets
View File

@ -29,7 +29,7 @@ export class ImageKnifeRequest {
context: common.UIAbilityContext
ImageKnifeRequestCallback: ImageKnifeRequestCallback
componentVersion: number = 0
headers: Map<string,Object> = new Map<string,Object>()
constructor(option: ImageKnifeOption,
uIAbilityContext: common.UIAbilityContext,
width: number,
@ -43,6 +43,19 @@ export class ImageKnifeRequest {
this.componentVersion = version
this.ImageKnifeRequestCallback = ImageKnifeRequestCallback
}
// RequestOption调用header对于的方法
addHeader(key: string, value: Object) {
this.headers.set(key, value);
}
// 全局调用header对应的方法，包含RequestOption的形式
addHeaderMap(map: Map<string, Object>) {
map.forEach((value, key) => {
if (!this.headers.has(key)) {
this.addHeader(key, value);
}
})
}
}
export enum ImageKnifeRequestState {

10
library/src/main/ets/model/ImageKnifeData.ets
View File

@ -17,4 +17,14 @@ export interface ImageKnifeData {
imageWidth: number,
imageHeight: number
}
export enum Cache_Type {
// 内存缓存
MemoryCache = 0,
// 文件缓存
FileCache = 1
}
export enum WriteCacheStrategy_Type {
DEFAULT = 0,// 默认都开启
OnlyFile = 1 // 仅缓存文件
}

17
library/src/main/ets/utils/FileCache.ets
View File

@ -259,4 +259,21 @@ export class FileCache {
return FileUtils.getInstance()
.readFileSync(context.cacheDir + FileUtils.SEPARATOR + FileCache.CACHE_FOLDER + FileUtils.SEPARATOR + key)
}
/**
* 获取key缓存数据绝对路径
*
* @params key 数值
*/
getFileToPath(key: string): string {
if(!!!key) {
throw new Error("key is null,checking the parameter")
}
let path = this.path + key
if(FileUtils.getInstance().exist(path)) {
return path
} else {
return ""
}
}
}