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

同步主仓3.x代码 

Signed-off-by: tyBrave <tianyong21@h-partners.com>
This commit is contained in:
tyBrave 2024-10-21 12:31:35 +08:00
parent 83e63a7ff5
commit 163d02ffd7
8 changed files with 70 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -1,3 +1,6 @@
## 3.0.3-rc.0
- Custom network method to add request header parameters
## 3.0.2 ## 3.0.2
- Added new image reloading interface reload - Added new image reloading interface reload
- Added return request preload interface preload - Added return request preload interface preload

44
README_zh.md
View File

@ -287,27 +287,27 @@ ImageKnifeAnimatorComponent({
### ImageKnifeOption参数列表 ### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 | | 参数名称 | 入参内容 | 功能简介 |
|-----------------------|-------------------------------------------------------|-----------------| |-----------------------|---------------------------------------------------------------------------------------------------------------------------------------|---------------|
| loadSrc | string、PixelMap、Resource | 主图展示 | | loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） | | placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） | | errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
| objectFit | ImageFit | 主图填充效果（可选） | | objectFit | ImageFit | 主图填充效果（可选） |
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） | | placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） | | errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) | | writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） | | onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 | | customGetImage | customGetImage?:(context: Context, src: string、PixelMap、Resource ,headers?: Record<string, Object>) => Promise<ArrayBuffer、undefined> | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
| border | BorderOptions | 边框圆角（可选） | | border | BorderOptions | 边框圆角（可选） |
| priority | taskpool.Priority | 加载优先级（可选） | | priority | taskpool.Priority | 加载优先级（可选） |
| context | common.UIAbilityContext | 上下文（可选） | | context | common.UIAbilityContext | 上下文（可选） |
| progressListener | (progress: number)=>void | 进度（可选） | | progressListener | (progress: number)=>void | 进度（可选） |
| signature | String | 自定义缓存关键字（可选） | | signature | String | 自定义缓存关键字（可选） |
| headerOption | Array<HeaderOptions> | 设置请求头（可选） | | headerOption | Array<HeaderOptions> | 设置请求头（可选） |
| transformation | PixelMapTransformation | 图片变换（可选） | | transformation | PixelMapTransformation | 图片变换（可选） |
| drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） | | drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） |
| onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） | | onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） |
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 | | onLoadListener | onLoadStart: () => void，onLoadSuccess: (data: string、PixelMap、undefined) => void，onLoadFailed: (err: string) => void | 监听图片加载成功与失败 |
### ImageKnife接口 ### ImageKnife接口
@ -323,7 +323,7 @@ ImageKnifeAnimatorComponent({
| addHeader | key: string, value: Object | 全局添加http请求头 | | addHeader | key: string, value: Object | 全局添加http请求头 |
| setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 | | setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 |
| deleteHeader | key: string | 全局删除http请求头 | | deleteHeader | key: string | 全局删除http请求头 |
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 | | setCustomGetImage | customGetImage?: (context: Context, src: string、PixelMap、Resource ,headers?: Record<string, Object>) => Promise<ArrayBuffer、undefined> | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 |
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 | | setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 | | putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 |
| removeMemoryCache | url: string | ImageKnifeOption | 清理指定内存缓存 | | removeMemoryCache | url: string | ImageKnifeOption | 清理指定内存缓存 |

9
entry/src/main/ets/pages/SingleImage.ets
View File

@ -88,6 +88,10 @@ struct SingleImage {
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"), errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
headerOption:[{
key:"refer",
value:"xx.xx.xx.xx"
}],
customGetImage: custom, customGetImage: custom,
transformation: new BlurTransformation(10) transformation: new BlurTransformation(10)
} }
@ -124,8 +128,9 @@ struct SingleImage {
// 自定义下载方法 // 自定义下载方法
@Concurrent @Concurrent
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> { async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>): Promise<ArrayBuffer | undefined> {
console.info("ImageKnife:: custom download：" + src) let refer = headers!["refer"] as string
console.info("ImageKnife:: custom download：" + src,"refer:"+refer)
// 举例写死从本地文件读取，也可以自己请求网络图片 // 举例写死从本地文件读取，也可以自己请求网络图片
return context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer return context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer
} }

2
library/oh-package.json5
View File

@ -14,7 +14,7 @@
"main": "index.ets", "main": "index.ets",
"repository": "https://gitee.com/openharmony-tpc/ImageKnife", "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
"type": "module", "type": "module",
"version": "3.0.2", "version": "3.0.3-rc.0",
"dependencies": { "dependencies": {
"@ohos/gpu_transform": "^1.0.2" "@ohos/gpu_transform": "^1.0.2"
}, },

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

@ -38,9 +38,7 @@ export class ImageKnife {
private _isRequestInSubThread: boolean = true; private _isRequestInSubThread: boolean = true;
//定义全局网络请求header map //定义全局网络请求header map
headerMap: Map<string, Object> = new Map<string, Object>(); headerMap: Map<string, Object> = new Map<string, Object>();
customGetImage: ((context: Context, customGetImage: ((context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>) | undefined = undefined
src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>) | undefined = undefined
public static getInstance(): ImageKnife { public static getInstance(): ImageKnife {
if (!ImageKnife.instance) { if (!ImageKnife.instance) {
ImageKnife.instance = new ImageKnife(); ImageKnife.instance = new ImageKnife();
@ -66,9 +64,9 @@ export class ImageKnife {
* @param memory 内存大小 * @param memory 内存大小
* @param path 文件目录 * @param path 文件目录
*/ */
async initFileCache(context: Context, size: number = 256, memory: number = 256 * 1024 * 1024, path?: string) { async initFileCache(context: Context, size: number = 256, memory: number = 256 * 1024 * 1024,path?: string) {
this.fileCache = new FileCache(context, size, memory) this.fileCache = new FileCache(context, size, memory)
if (path != undefined) { if ( path != undefined ) {
await this.fileCache.initFileCache(path) await this.fileCache.initFileCache(path)
} else { } else {
await this.fileCache.initFileCache() await this.fileCache.initFileCache()
@ -82,7 +80,6 @@ export class ImageKnife {
public isFileCacheInit(): boolean { public isFileCacheInit(): boolean {
return this.fileCache === undefined ? false : this.fileCache.isFileCacheInit() return this.fileCache === undefined ? false : this.fileCache.isFileCacheInit()
} }
/** /**
* 重新加载 * 重新加载
*/ */
@ -92,7 +89,6 @@ export class ImageKnife {
ImageKnife.getInstance().execute(request) ImageKnife.getInstance().execute(request)
} }
} }
/** /**
* 全局添加单个请求头header * 全局添加单个请求头header
* @param key 请求头属性 * @param key 请求头属性
@ -146,17 +142,15 @@ export class ImageKnife {
} else { } else {
imageKnifeOption = url; imageKnifeOption = url;
} }
let key = this.getEngineKeyImpl() let key = this.getEngineKeyImpl().generateMemoryKey(imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC, imageKnifeOption);
.generateMemoryKey(imageKnifeOption.loadSrc, ImageKnifeRequestSource.SRC, imageKnifeOption);
this.memoryCache.remove(key); this.memoryCache.remove(key);
} }
/** /**
* 预加载 * 预加载
* @param loadSrc 图片地址url * @param loadSrc 图片地址url
* @returns 图片请求request * @returns 图片请求request
*/ */
preload(loadSrc: string | ImageKnifeOption): ImageKnifeRequest { preload(loadSrc:string | ImageKnifeOption):ImageKnifeRequest{
let imageKnifeOption = new ImageKnifeOption() let imageKnifeOption = new ImageKnifeOption()
if (typeof loadSrc == "string") { if (typeof loadSrc == "string") {
imageKnifeOption.loadSrc = loadSrc imageKnifeOption.loadSrc = loadSrc
@ -177,15 +171,13 @@ export class ImageKnife {
this.execute(request) this.execute(request)
return request return request
} }
/** /**
* 取消图片请求 * 取消图片请求
* @param request 图片请求request * @param request 图片请求request
*/ */
cancel(request: ImageKnifeRequest) { cancel(request:ImageKnifeRequest) {
request.requestState = ImageKnifeRequestState.DESTROY request.requestState = ImageKnifeRequestState.DESTROY
} }
/** /**
* 预加载图片到文件缓存 * 预加载图片到文件缓存
* @param loadSrc 图片地址url * @param loadSrc 图片地址url
@ -199,12 +191,12 @@ export class ImageKnife {
} else { } else {
imageKnifeOption = loadSrc; imageKnifeOption = loadSrc;
} }
LogUtil.log("ImageKnife_DataTime_preLoadCache-imageKnifeOption:" + loadSrc) LogUtil.log("ImageKnife_DataTime_preLoadCache-imageKnifeOption:"+loadSrc)
let fileKey = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature) let fileKey = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature)
let cachePath = ImageKnife.getInstance().getFileCache().getFileToPath(fileKey) let cachePath = ImageKnife.getInstance().getFileCache().getFileToPath(fileKey)
if (cachePath == null || cachePath == "" || cachePath == undefined) { if (cachePath == null || cachePath == "" || cachePath == undefined) {
imageKnifeOption.onLoadListener = { imageKnifeOption.onLoadListener = {
onLoadSuccess() { onLoadSuccess(){
resolve(ImageKnife.getInstance().getFileCache().getFileToPath(fileKey)) resolve(ImageKnife.getInstance().getFileCache().getFileToPath(fileKey))
}, },
onLoadFailed(err) { onLoadFailed(err) {
@ -213,8 +205,7 @@ export class ImageKnife {
} }
let request = new ImageKnifeRequest( let request = new ImageKnifeRequest(
imageKnifeOption, imageKnifeOption,
imageKnifeOption.context !== undefined ? imageKnifeOption.context : imageKnifeOption.context !== undefined ? imageKnifeOption.context : getContext(this) as common.UIAbilityContext,
getContext(this) as common.UIAbilityContext,
0, 0,
0, 0,
0, 0,
@ -238,10 +229,10 @@ export class ImageKnife {
* @param signature key自定义信息 * @param signature key自定义信息
*/ */
getCacheImage(loadSrc: string, getCacheImage(loadSrc: string,
cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise<ImageKnifeData | undefined> { cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise<ImageKnifeData | undefined> {
let option: ImageKnifeOption = { let option: ImageKnifeOption = {
loadSrc: loadSrc, loadSrc: loadSrc,
signature: signature signature:signature
} }
let engineKeyImpl: IEngineKey = this.getEngineKeyImpl(); let engineKeyImpl: IEngineKey = this.getEngineKeyImpl();
@ -292,7 +283,6 @@ export class ImageKnife {
await this.fileCache.removeAll() await this.fileCache.removeAll()
} }
} }
/* /*
* 清除指定文件缓存 * 清除指定文件缓存
* */ * */
@ -420,15 +410,13 @@ export class ImageKnife {
} }
private readMemoryCache(loadSrc: string, option: ImageKnifeOption, private readMemoryCache(loadSrc: string, option: ImageKnifeOption, engineKey: IEngineKey): ImageKnifeData | undefined {
engineKey: IEngineKey): ImageKnifeData | undefined {
let memoryKey = engineKey.generateMemoryKey(loadSrc, ImageKnifeRequestSource.SRC, option) let memoryKey = engineKey.generateMemoryKey(loadSrc, ImageKnifeRequestSource.SRC, option)
return ImageKnife.getInstance() return ImageKnife.getInstance()
.loadFromMemoryCache(memoryKey) .loadFromMemoryCache(memoryKey)
} }
private readFileCache(loadSrc: string, engineKey: IEngineKey, private readFileCache(loadSrc: string, engineKey: IEngineKey, onComplete: (data: ImageKnifeData | undefined) => void) {
onComplete: (data: ImageKnifeData | undefined) => void) {
let keys = engineKey.generateFileKey(loadSrc) let keys = engineKey.generateFileKey(loadSrc)
let buffer = ImageKnife.getInstance().loadFromFileCache(keys) let buffer = ImageKnife.getInstance().loadFromFileCache(keys)
if (buffer != undefined) { if (buffer != undefined) {
@ -475,13 +463,13 @@ export class ImageKnife {
return false return false
} }
async execute(request: ImageKnifeRequest, isAnimator?: boolean): Promise<void> { async execute(request: ImageKnifeRequest,isAnimator?: boolean): Promise<void> {
LogUtil.log("ImageKnife_DataTime_execute.start:" + request.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_execute.start:"+request.imageKnifeOption.loadSrc)
if (this.headerMap.size > 0) { if (this.headerMap.size > 0) {
request.addHeaderMap(this.headerMap) request.addHeaderMap(this.headerMap)
} }
this.dispatcher.enqueue(request, isAnimator) this.dispatcher.enqueue(request,isAnimator)
LogUtil.log("ImageKnife_DataTime_execute.end:" + request.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_execute.end:"+request.imageKnifeOption.loadSrc)
} }
setEngineKeyImpl(impl: IEngineKey): void { setEngineKeyImpl(impl: IEngineKey): void {
@ -491,18 +479,14 @@ export class ImageKnife {
getEngineKeyImpl(): IEngineKey { getEngineKeyImpl(): IEngineKey {
return this.dispatcher.getEngineKeyImpl(); return this.dispatcher.getEngineKeyImpl();
} }
/** /**
* 全局设置自定义下载 * 全局设置自定义下载
* @param customGetImage 自定义请求函数 * @param customGetImage 自定义请求函数
*/ */
setCustomGetImage(customGetImage?: (context: Context, setCustomGetImage(customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>) {
src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>) {
this.customGetImage = customGetImage this.customGetImage = customGetImage
} }
getCustomGetImage(): undefined | ((context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>){
getCustomGetImage(): undefined | ((context: Context,
src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>) {
return this.customGetImage return this.customGetImage
} }
} }

28
library/src/main/ets/ImageKnifeLoader.ets
View File

@ -193,7 +193,19 @@ export class ImageKnifeLoader {
return ImageKnifeLoader.makeEmptyResult("ImageKnifeAnimatorComponent组件仅支持动态图") return ImageKnifeLoader.makeEmptyResult("ImageKnifeAnimatorComponent组件仅支持动态图")
} }
} }
static getHeaderObj(request:RequestJobRequest){
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
})
}
return headerObj
}
// 获取图片资源 // 获取图片资源
static async getImageArrayBuffer(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined,fileKey:string): Promise<ArrayBuffer> { static async getImageArrayBuffer(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined,fileKey:string): Promise<ArrayBuffer> {
let resBuf: ArrayBuffer | undefined let resBuf: ArrayBuffer | undefined
@ -205,7 +217,8 @@ export class ImageKnifeLoader {
if (resBuf === undefined) { if (resBuf === undefined) {
LogUtil.log("start customGetImage src=" + request.src) LogUtil.log("start customGetImage src=" + request.src)
try { try {
resBuf = await request.customGetImage(request.context, request.src) const headerObj: Record<string, Object> = ImageKnifeLoader.getHeaderObj(request)
resBuf = await request.customGetImage(request.context, request.src,headerObj)
LogUtil.log("end customGetImage src=" + request.src) LogUtil.log("end customGetImage src=" + request.src)
} catch (err) { } catch (err) {
throw new Error('customGetImage loadFile failed! err = ' + err) throw new Error('customGetImage loadFile failed! err = ' + err)
@ -234,16 +247,7 @@ export class ImageKnifeLoader {
let httpRequest = http.createHttp(); let httpRequest = http.createHttp();
let progress: number = 0 let progress: number = 0
let arrayBuffers = new Array<ArrayBuffer>() let arrayBuffers = new Array<ArrayBuffer>()
const headerObj: Record<string, object> = {} const headerObj: Record<string, Object> = ImageKnifeLoader.getHeaderObj(request)
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
})
}
httpRequest.on("dataReceive", (data: ArrayBuffer) => { httpRequest.on("dataReceive", (data: ArrayBuffer) => {
arrayBuffers.push(data) arrayBuffers.push(data)
}); });

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

@ -91,7 +91,7 @@ export interface RequestJobRequest {
allHeaders: Map<string, Object>, allHeaders: Map<string, Object>,
componentWidth: number, componentWidth: number,
componentHeight: number, componentHeight: number,
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>, customGetImage?: (context: Context, src: string | PixelMap | Resource ,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>,
onlyRetrieveFromCache?: boolean onlyRetrieveFromCache?: boolean
requestSource: ImageKnifeRequestSource requestSource: ImageKnifeRequestSource
transformation?: PixelMapTransformation transformation?: PixelMapTransformation

2
library/src/main/ets/model/ImageKnifeOption.ets
View File

@ -61,7 +61,7 @@ export class ImageKnifeOption {
placeholderObjectFit?: ImageFit placeholderObjectFit?: ImageFit
// 错误图填充效果 // 错误图填充效果
errorholderObjectFit?: ImageFit errorholderObjectFit?: ImageFit
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>
border?: BorderOptions border?: BorderOptions
// 缓存策略 // 缓存策略
writeCacheStrategy?: CacheStrategy writeCacheStrategy?: CacheStrategy