更新说明：

- 支持hsp多包图片资源
- 新增putCache写入缓存接口
- 修复入参为pixelMap图片不显示问题

Signed-off-by: 明月清风 <qiufeihu1@h-partners.com>

CHANGELOG.md

@@ -1,4 +1,9 @@
 
+## 3.0.0-rc.4
+- 支持hsp多包图片资源
+- 新增putCache写入缓存接口
+- 修复入参为pixelMap图片不显示问题
+
 ## 3.0.0-rc.3
 - 将请求默认并行从64调整到8，减少对taskpool execute内存消耗
 - 补充option参数：placeholderObjectFit，errorholderObjectFit分别支持占位图填充效果和错误图填充效果

README.md

@@ -23,23 +23,27 @@
 - 支持使用一个或多个图片变换，如模糊，高亮等
 
 待实现特性
+
 - gif/webp动图显示与控制
 - 内存降采样优化，节约内存的占用
 - 支持自定义图片解码
 
 注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
+
 - 使用Image组件代替Canvas组件渲染
 - 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
 - 支持通过initMemoryCache自定义策略内存缓存策略和大小
 - 支持option自定义实现图片获取/网络下载
 
 因此API及能力上，目前有部分差异，主要体现在：
+
 - 不支持drawLifeCycle接口，通过canvas自会图片
 - mainScaleType，border等参数，新版本与系统Image保持一致
 - gif/webp动图播放与控制
 - 抗锯齿相关参数
 
 ## 下载安装
+
 ```
 ohpm install @ohos/imageknife
 
@@ -48,7 +52,9 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
 ```
 
 ## 使用说明
+
 #### 1.显示本地资源图片
+
 ```
 ImageKnifeComponent({
   ImageKnifeOption: {
@@ -61,6 +67,7 @@ ImageKnifeComponent({
 ```
 
 #### 2.显示本地context files下文件
+
 ```
 ImageKnifeComponent({
   ImageKnifeOption: {
@@ -73,6 +80,7 @@ ImageKnifeComponent({
 ```
 
 #### 3.显示网络图片
+
 ```
 ImageKnifeComponent({
   ImageKnifeOption: {
@@ -85,6 +93,7 @@ ImageKnifeComponent({
 ```
 
 #### 4.自定义下载图片
+
 ```
 ImageKnifeComponent({
   ImageKnifeOption: {
@@ -106,6 +115,7 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
 ```
 
 #### 5.监听网络下载进度
+
 ```
 ImageKnifeComponent({
   ImageKnifeOption: {
@@ -114,7 +124,9 @@ ImageKnifeComponent({
   }
 }).width(100).height(100)
 ```
+
 #### 6.支持option传入border，设置边框，圆角
+
 ```
 ImageKnifeComponent({ ImageKnifeOption: 
 {
@@ -123,7 +135,9 @@ ImageKnifeComponent({ ImageKnifeOption:
   }
 }).width(100).height(100)
 ```
+
 #### 7.支持option图片变换
+
 ```
 ImageKnifeComponent({ ImageKnifeOption: 
 {
@@ -134,12 +148,12 @@ ImageKnifeComponent({ ImageKnifeOption:
 }).width(100).height(100)
 ```
 
-
 ## 接口说明
+
 ### ImageKnifeOption参数列表
 
 | 参数名称                  | 入参内容                           | 功能简介            |
-|-----------------------|---------------------------|-----------------|
+|-----------------------|--------------------------------|-----------------|
 | loadSrc               | string、PixelMap、Resource       | 主图展示            |
 | placeholderSrc        | PixelMap、Resource              | 占位图图展示（可选）      |
 | errorholderSrc        | PixelMap、Resource              | 错误图展示（可选）       |
@@ -158,20 +172,24 @@ ImageKnifeComponent({ ImageKnifeOption:
 | transformation        | PixelMapTransformation         | 图片变换（可选）        |
 
 ### ImageKnife接口
+
 | 参数名称             | 入参内容                                                                                                  | 功能简介          |
-|------------------|---------------------------|---------------|
+|------------------|-------------------------------------------------------------------------------------------------------|---------------|
 | initMemoryCache  | newMemoryCache: IMemoryCache                                                                          | 自定义内存缓存策略     |
 | initFileCache    | context: Context, size: number, memory: number                                                        | 初始化文件缓存数量和大小  |
-| preLoadCache     | url:string                | 预加载并返回文件缓存路径  |
+| preLoadCache     | loadSrc: string I ImageKnifeOption                                                                    | 预加载并返回文件缓存路径  |
-| getCacheImage    | url: string, cacheType: CacheType | 从内存或文件缓存中获取资源 |
+| getCacheImage    | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string)                | 从内存或文件缓存中获取资源 |
 | addHeader        | key: string, value: Object                                                                            | 全局添加http请求头   |
 | setHeaderOptions | Array<HeaderOptions>                                                                                  | 全局设置http请求头   |
 | deleteHeader     | key: string                                                                                           | 全局删除http请求头   |
 | setEngineKeyImpl | IEngineKey                                                                                            | 全局配置缓存key生成策略 |
+| putCacheImage    | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存      |
 
 ## 约束与限制
+
 在下述版本验证通过：  
 DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
+
 ## 贡献代码
 
 使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
@@ -182,4 +200,5 @@ DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
 本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
 
 ## 遗留问题
+
 - 添加组件闪动问题

entry/src/main/ets/pages/SingleImage.ets

@@ -14,13 +14,14 @@
  */
 import { ImageKnifeComponent,BlurTransformation } from '@ohos/imageknife';
 import fs from '@ohos.file.fs';
+import image from '@ohos.multimedia.image';
 
 @Entry
 @Component
 struct SingleImage {
   scroller: Scroller = new Scroller;
   localFile: string = getContext(this).filesDir + "/icon.png"
-
+  @State pixelMap:PixelMap | undefined = undefined;
   aboutToAppear(): void {
     // 拷贝本地文件
     let icon: Uint8Array = getContext(this).resourceManager.getMediaContentSync($r("app.media.startIcon"));
@@ -28,6 +29,9 @@ struct SingleImage {
     fs.writeSync(file.fd, icon.buffer);
     fs.fsyncSync(file.fd);
     fs.closeSync(file);
+    getContext().resourceManager.getMediaContentSync( $r("app.media.aaa"))
+      .buffer as ArrayBuffer;
+
   }
 
   build() {
@@ -80,11 +84,34 @@ struct SingleImage {
             transformation: new BlurTransformation(10)
           }
         }).width(100).height(100)
+        Text("自定义下载")
+          .fontSize(30)
+          .fontWeight(FontWeight.Bold)
+        ImageKnifeComponent({
+          imageKnifeOption: {
+            loadSrc: this.pixelMap,
+            placeholderSrc: $r("app.media.loading"),
+            errorholderSrc: $r("app.media.app_icon"),
+            objectFit: ImageFit.Contain,
+          }
+        }).width(100).height(100)
       }
       .width('100%')
     }
     .height('100%')
   }
+
+  changePic(buffer: ArrayBuffer){
+    let imageSource: image.ImageSource = image.createImageSource(buffer);
+    if (imageSource) {
+      let decodingOptions: image.DecodingOptions = {
+        editable: true,
+      }
+      imageSource.createPixelMap(decodingOptions,(err,pixelMap)=>{
+        this.pixelMap = pixelMap;
+      })
+    }
+  }
 }
 
 // 自定义下载方法

library/src/main/ets/ImageKnife.ets

@@ -73,15 +73,17 @@ export class ImageKnife {
   addHeader(key: string, value: Object) {
     this.headerMap.set(key, value);
   }
+
   /**
    * 全局设置请求头调用方法
    * @param options 请求头数组
    */
-  serHeaderOptions(options:Array<HeaderOptions>) {
+  serHeaderOptions(options: Array<HeaderOptions>) {
-    options.forEach((value)=>{
+    options.forEach((value) => {
-      this.headerMap.set(value.key,value.value)
+      this.headerMap.set(value.key, value.value)
     })
   }
+
   /**
    * 删除单个请求头属性
    * @param key 请求头属性
@@ -89,6 +91,7 @@ export class ImageKnife {
   deleteHeader(key: string) {
     this.headerMap.delete(key);
   }
+
   /**
    * 设置自定义的内存缓存
    * @param newMemoryCache 自定义内存缓存
@@ -125,22 +128,26 @@ export class ImageKnife {
     this.fileCache?.put(key, data)
   }
 
-  getFileCache(): FileCache{
+  getFileCache(): FileCache {
     return this.fileCache as FileCache
   }
+
   /**
    * 预加载到文件缓存
    * @param loadSrc 图片地址url
    * @returns 返回文件缓存路径
    */
-  preLoadCache(loadSrc: string): Promise<string> {
+  preLoadCache(loadSrc: string | ImageKnifeOption): Promise<string> {
-    return new Promise((resolve,reject)=>{
+    return new Promise((resolve, reject) => {
       let imageKnifeOption = new ImageKnifeOption()
-      imageKnifeOption.loadSrc = loadSrc
+      if (loadSrc instanceof ImageKnifeOption) {
-      let engineKeyImpl: IEngineKey = new DefaultEngineKey()
+        imageKnifeOption = loadSrc
-      let fileKey = engineKeyImpl.generateFileKey(loadSrc)
+      } else {
+        imageKnifeOption.loadSrc = loadSrc;
+      }
+      let fileKey = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature)
       let cachePath = ImageKnife.getInstance().getFileCache().getFileToPath(fileKey)
-      if(cachePath == null || cachePath == "" || cachePath == undefined) {
+      if (cachePath == null || cachePath == "" || cachePath == undefined) {
         let request = new ImageKnifeRequest(
           imageKnifeOption,
           imageKnifeOption.context !== undefined ? imageKnifeOption.context : getContext(this) as common.UIAbilityContext,
@@ -159,18 +166,21 @@ export class ImageKnife {
       }
     })
   }
+
   /**
    * 从内存或文件缓存中获取图片数据
    * @param url 图片地址url
    * @param cacheType 缓存策略
    * @returns 图片数据
+   * @param signature key自定义信息
    */
   getCacheImage(loadSrc: string,
-    cacheType: CacheStrategy = CacheStrategy.Default): Promise<ImageKnifeData | undefined> {
+                cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise<ImageKnifeData | undefined> {
     let option: ImageKnifeOption = {
-      loadSrc: loadSrc
+      loadSrc: loadSrc,
+      signature:signature
     }
-    let engineKeyImpl: IEngineKey = new DefaultEngineKey()
+    let engineKeyImpl: IEngineKey = this.getEngineKeyImpl();
 
     return new Promise((resolve, reject) => {
       if (cacheType == CacheStrategy.Memory) {
@@ -184,16 +194,50 @@ export class ImageKnife {
     })
   }
 
-  private readMemoryCache(loadSrc: string,option: ImageKnifeOption, engineKey: IEngineKey): ImageKnifeData | undefined {
+  /**
+   *
+   * @param url  图片地址url
+   * @param pixelMap 图片
+   * @param cacheType 缓存策略
+   * @param signature key自定义信息
+   */
+  putCacheImage(url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) {
+    let memoryKey = this.getEngineKeyImpl()
+      .generateMemoryKey(url, ImageKnifeRequestSource.SRC, { loadSrc: url, signature: signature });
+    let fileKey = this.getEngineKeyImpl().generateFileKey(url, signature);
+    let imageKnifeData: ImageKnifeData = { source: pixelMap, imageWidth: 0, imageHeight: 0 };
+    switch (cacheType) {
+      case CacheStrategy.Default:
+        this.saveMemoryCache(memoryKey, imageKnifeData);
+        this.saveFileCache(fileKey, this.pixelMapToArrayBuffer(pixelMap));
+        break;
+      case CacheStrategy.File:
+        this.saveFileCache(fileKey, this.pixelMapToArrayBuffer(pixelMap));
+        break
+      case CacheStrategy.Memory:
+        this.saveMemoryCache(memoryKey, imageKnifeData);
+        break
+    }
+  }
+
+  private pixelMapToArrayBuffer(pixelMap: PixelMap): ArrayBuffer {
+    let imageInfo = pixelMap.getImageInfoSync();
+    let readBuffer: ArrayBuffer = new ArrayBuffer(imageInfo.size.height * imageInfo.size.width * 4);
+    pixelMap.readPixelsToBufferSync(readBuffer);
+    return readBuffer
+
+  }
+
+  private readMemoryCache(loadSrc: string, option: ImageKnifeOption, engineKey: IEngineKey): ImageKnifeData | undefined {
     let memoryKey = engineKey.generateMemoryKey(loadSrc, ImageKnifeRequestSource.SRC, option)
     return ImageKnife.getInstance()
       .loadFromMemoryCache(memoryKey)
   }
 
-  private readFileCache(loadSrc:string,engineKey:IEngineKey,onComplete:(data:ImageKnifeData | undefined)=>void){
+  private readFileCache(loadSrc: string, engineKey: IEngineKey, onComplete: (data: ImageKnifeData | undefined) => void) {
     let keys = engineKey.generateFileKey(loadSrc)
     let buffer = ImageKnife.getInstance().loadFromFileCache(keys)
-    if(buffer != undefined) {
+    if (buffer != undefined) {
       let fileTypeUtil = new FileTypeUtil();
       let typeValue = fileTypeUtil.getFileType(buffer);
       if (typeValue === 'gif' || typeValue === 'webp') {
@@ -201,7 +245,7 @@ export class ImageKnife {
 
         let base64str = "data:image/" + typeValue + ";base64," + base64Help.encodeToStringSync(new Uint8Array(buffer))
         onComplete({
-          source:base64str,
+          source: base64str,
           imageWidth: 0,
           imageHeight: 0
         })
@@ -215,7 +259,7 @@ export class ImageKnife {
       imageSource.createPixelMap(decodingOptions)
         .then((pixelmap: PixelMap) => {
           onComplete({
-            source:pixelmap,
+            source: pixelmap,
             imageWidth: 0,
             imageHeight: 0
           })
@@ -225,6 +269,7 @@ export class ImageKnife {
       onComplete(undefined)
     }
   }
+
   /**
    * 清除所有文件缓存
    * @returns
@@ -268,4 +313,7 @@ export class ImageKnife {
     this.dispatcher.setEngineKeyImpl(impl);
   }
 
+  getEngineKeyImpl(): IEngineKey {
+    return this.dispatcher.getEngineKeyImpl();
+  }
 }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -32,7 +32,12 @@ import { FileTypeUtil } from './utils/FileTypeUtil';
 import util from '@ohos.util';
 import { IEngineKey } from './key/IEngineKey';
 import { DefaultEngineKey } from './key/DefaultEngineKey';
-import { ImageKnifeRequestWithSource , ImageKnifeRequestSource , RequestJobResult , RequestJobRequest } from './model/ImageKnifeData'
+import {
+  ImageKnifeRequestWithSource,
+  ImageKnifeRequestSource,
+  RequestJobResult,
+  RequestJobRequest
+} from './model/ImageKnifeData'
 
 export class ImageKnifeDispatcher {
   // 最大并发
@@ -45,8 +50,19 @@ export class ImageKnifeDispatcher {
   private engineKey: IEngineKey = new DefaultEngineKey();
 
   showFromMemomry(request: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): boolean {
-    let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance()
+    let memoryCache: ImageKnifeData | undefined;
-      .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption))
+    if ((typeof (request.imageKnifeOption.loadSrc as image.PixelMap).isEditable) == 'boolean') {
+      memoryCache = {
+        source: request.imageKnifeOption.loadSrc as image.PixelMap,
+        imageWidth: 0,
+        imageHeight: 0,
+      }
+    } else {
+      memoryCache = ImageKnife.getInstance()
+        .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption));
+    }
+
+
     if (memoryCache !== undefined) {
       // 画主图
       if (request.requestState === ImageKnifeRequestState.PROGRESS) {
@@ -95,7 +111,7 @@ export class ImageKnifeDispatcher {
    * 获取和显示图片
    */
   getAndShowImage(currentRequest: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): void {
-    let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc,requestSource, currentRequest.imageKnifeOption)
+    let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption)
     let requestList: List<ImageKnifeRequestWithSource> | undefined = this.executingJobMap.get(memoryKey)
     if (requestList == undefined) {
       requestList = new List()
@@ -109,12 +125,13 @@ export class ImageKnifeDispatcher {
     let request: RequestJobRequest = {
       context: currentRequest.context,
       src: imageSrc,
-      headers:currentRequest.imageKnifeOption.headerOption,
+      headers: currentRequest.imageKnifeOption.headerOption,
-      allHeaders:currentRequest.headers,
+      allHeaders: currentRequest.headers,
       customGetImage: currentRequest.imageKnifeOption.customGetImage,
       onlyRetrieveFromCache: currentRequest.imageKnifeOption.onlyRetrieveFromCache,
-      transformation:currentRequest.imageKnifeOption.transformation,
+      transformation: currentRequest.imageKnifeOption.transformation,
-      writeCacheStrategy: ImageKnife.getInstance().isFileCacheInit() ? currentRequest.imageKnifeOption.writeCacheStrategy : CacheStrategy.Memory, // 未初始化文件缓存时，不写文件缓存
+      writeCacheStrategy: ImageKnife.getInstance()
+        .isFileCacheInit() ? currentRequest.imageKnifeOption.writeCacheStrategy : CacheStrategy.Memory, // 未初始化文件缓存时，不写文件缓存
       engineKey: this.engineKey,
       signature: currentRequest.imageKnifeOption.signature,
       requestSource
@@ -160,7 +177,7 @@ export class ImageKnifeDispatcher {
       }
 
       // 保存内存缓存
-      if(currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.File) {
+      if (currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.File) {
         ImageKnife.getInstance()
           .saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption),
             ImageKnifeData)
@@ -215,6 +232,10 @@ export class ImageKnifeDispatcher {
   setEngineKeyImpl(impl: IEngineKey): void {
     this.engineKey = impl;
   }
+
+  getEngineKeyImpl(): IEngineKey {
+    return this.engineKey;
+  }
 }
 
 /**
@@ -259,18 +280,18 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
         if (resBuf === undefined && request.onlyRetrieveFromCache != true && request.requestSource === ImageKnifeRequestSource.SRC) {
           let httpRequest = http.createHttp();
           let progress: number = 0
-          const headerObj: Record<string,object> = {}
+          const headerObj: Record<string, object> = {}
-          if(request.headers != undefined) {
+          if (request.headers != undefined) {
-            request.headers.forEach((value)=>{
+            request.headers.forEach((value) => {
               headerObj[value.key] = value.value
             })
-          } else if(request.allHeaders.size > 0) {
+          } else if (request.allHeaders.size > 0) {
-            request.allHeaders.forEach((value,key)=>{
+            request.allHeaders.forEach((value, key) => {
               headerObj[key] = value
             })
           }
           let promise = httpRequest.requestInStream(request.src, {
-            header:headerObj,
+            header: headerObj,
             method: http.RequestMethod.GET,
             connectTimeout: 6000,
             readTimeout: 6000,
@@ -321,10 +342,17 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
         }
       }
     } else if ((request.src as Resource).id !== undefined) { //从资源文件获取
+      let res = request.src as Resource;
       if (resBuf == undefined && request.onlyRetrieveFromCache != true && request.requestSource == ImageKnifeRequestSource.SRC) {
-        resBuf = request.context.resourceManager.getMediaContentSync((request.src as Resource).id).buffer as ArrayBuffer
+        resBuf = request.context.createModuleContext(res.moduleName)
+          .resourceManager
+          .getMediaContentSync(res.id)
+          .buffer as ArrayBuffer;
       } else if (resBuf == undefined && request.requestSource != ImageKnifeRequestSource.SRC) {
-        resBuf = request.context.resourceManager.getMediaContentSync((request.src as Resource).id).buffer as ArrayBuffer
+        resBuf = request.context.createModuleContext(res.moduleName)
+          .resourceManager
+          .getMediaContentSync(res.id)
+          .buffer as ArrayBuffer;
       }
     }
   }