!117 imageKnife 防盗链设置，header请求头属性设置

Merge pull request !117 from 张琥珀/master

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.1.2-rc.6
 - 修复手机调节显示大小时图片消失
+- imageKnife防盗链，header请求头属性设置
 - pngWorker线程改为taskpool
 - 修复正方形裁剪有些图片裁剪创建pixelMap失败
 

entry/src/main/ets/entryability/EntryAbility.ets

@@ -49,6 +49,9 @@ export default class EntryAbility extends UIAbility {
       imageKnife.setEngineKeyImpl(new CustomEngineKeyImpl())
       // 设置全局内存缓存大小张数
       imageKnife.setLruCacheSize(100, 100 * 1204 * 1024)
+      // 全局配置请求头
+      imageKnife.addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
+      imageKnife.deleteHeader('refer');
     }
     // 开启ImageKnife所有级别日志开关
     LogUtil.mLogLevel = LogUtil.ALL

entry/src/main/ets/pages/RequestOptionLoadImage.ets

@@ -19,7 +19,8 @@ import {
   Size,
   ImageKnife,
   ImageKnifeGlobal,
-  ImageKnifeComponent
+  ImageKnifeComponent,
+  ObjectKey
 } from '@ohos/libraryimageknife'
 import { BusinessError } from '@ohos.base'
 
@@ -34,6 +35,10 @@ struct RequestOptionLoadImage {
   load(src: string | image.PixelMap | Resource) {
     clearTimeout(timeId)
     let request = new RequestOption()
+    //*requestOption调用*
+    request.addHeader('refer', 'http://1.94.37.200:7070/AntiTheftChain/downloadImage');
+    //通过时间戳去清除缓存
+    request.signature = new ObjectKey(new Date().getTime().toString())
     request.load(src)
       .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
         if (data.isPixelMap()) {

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

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

entry/src/main/ets/pages/index.ets

@@ -17,7 +17,8 @@ import {
   ImageKnifeComponent,
   ImageKnifeOption,
   ImageKnifeGlobal,
-  ImageKnife
+  ImageKnife,
+  HeaderOptions
 } from '@ohos/libraryimageknife'
 
 import { ObjectKey } from '@ohos/libraryimageknife';
@@ -25,21 +26,23 @@ import { ObjectKey } from '@ohos/libraryimageknife';
 @Entry
 @Component
 struct IndexFunctionDemo {
-
+  @State headerOptions1: HeaderOptions = {
+    key: "refer",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-
       placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed')
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
     };
-
   @State imageKnifeOption2: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-
       placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed')
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
     };
 
   build() {
@@ -51,7 +54,6 @@ struct IndexFunctionDemo {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.pngSample'),
-
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 signature: new ObjectKey('ccccccc')

entry/src/main/ets/pages/testImageKnifeHttpRequestHeader.ets

@@ -0,0 +1,256 @@
+/*
+ * 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 {
+  HeaderOptions,ImageKnife,ImageKnifeComponent,ImageKnifeData,ImageKnifeGlobal,RequestOption,ImageKnifeOption,ObjectKey
+} from '@ohos/libraryimageknife'
+import image from '@ohos.multimedia.image'
+import { BusinessError } from '@ohos.base'
+
+const TAG = "TEST-"
+let timeId = -1
+
+@Entry
+@Component
+struct testImageKnifeHttpRequestHeader {
+  @State pixelMap: PixelMap | undefined = undefined;
+  @State pixelMap1: PixelMap | undefined = undefined;
+  @State pixelMap2: PixelMap | undefined = undefined;
+  @State pixelMap3: PixelMap | undefined = undefined;
+  @State domeType1: boolean = false;
+  @State domeType2: boolean = false;
+  @State domeType3: boolean = false;
+  @State domeType4: boolean = false;
+  @State domeType5: boolean = false;
+  @State domeType6: boolean = false;
+  @State successHeader: string = "requestOption调用成功";
+  @State errorHeader: string = "requestOption调用失败";
+  @State successHeader1: string = "全局调用imageKnife成功";
+  @State errorHeader1: string = "全局调用imageKnife失败";
+  @State successHeader2: string = "单个imageKnife组件调用成功";
+  @State errorHeader2: string = "单个imageKnife组件调用失败";
+
+  @State message: string = "图片header属性测试";
+  @State headerOptions1: HeaderOptions = {
+    key: "refer",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
+  @State headerOptions2: HeaderOptions = {
+    key: "xx",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
+    };
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions2]
+    };
+
+  // RequestOption调用
+  load(src: string | image.PixelMap | Resource, type: string, num: number) {
+    clearTimeout(timeId)
+    let request = new RequestOption()
+    if (type == 'error') {
+      request.addHeader('xx', src)
+    } else {
+      request.addHeader('refer', src)
+    }
+    //清理缓存
+    request.signature = new ObjectKey(new Date().getTime().toString())
+    request.load(src)
+      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
+        if (data.isPixelMap()) {
+          if (data.drawPixelMap) {
+            let pixelmap = data.drawPixelMap.imagePixelMap
+            if (pixelmap) {
+              if (num == 1) {
+                this.pixelMap = pixelmap
+              } else if (num == 2) {
+                this.pixelMap1 = pixelmap
+              } else if (num == 3) {
+                this.pixelMap2 = pixelmap
+              } else if (num == 4) {
+                this.pixelMap3 = 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 (num == 1) {
+                        this.pixelMap = pixelmap
+                      } else if (num == 2) {
+                        this.pixelMap1 = pixelmap
+                      } else if (num == 3) {
+                        this.pixelMap2 = pixelmap
+                      } else if (num == 4) {
+                        this.pixelMap3 = pixelmap
+                      }
+                    }
+                    index++;
+                    if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
+                      index = 0
+                    }
+                    timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
+                  }
+                }
+              }
+              renderGif()
+            }
+          }
+        }
+        if (err) {
+          console.log(TAG + "error:" + JSON.stringify(err));
+        }
+        return false
+      }
+      })
+    let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if (imageknife != undefined) {
+      imageknife.call(request)
+    }
+  }
+
+  @Builder
+  setHeader() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader3() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap1 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader1() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap2 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader4() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap3 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader2() {
+    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+      .margin(16)
+      .width(200)
+      .height(200)
+  }
+  @Builder
+  setHeader5() {
+    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
+      .margin(16)
+      .width(200)
+      .height(200)
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        Text(`${this.message}`)
+          .width("300vp")
+          .height("60vp")
+          .textAlign(TextAlign.Center)
+          .fontSize("30fp")
+          .fontWeight(FontWeight.Bold)
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
+          Button(this.successHeader)
+            .margin(16)
+            .onClick(() => {
+              this.domeType1 = !this.domeType1
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 1)
+            })
+          if (this.domeType1) {
+            this.setHeader()
+          }
+          Button(this.errorHeader)
+            .margin(16)
+            .onClick(() => {
+              this.domeType2 = !this.domeType2
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 2)
+            })
+          if (this.domeType2) {
+            this.setHeader3()
+          }
+          Button(this.successHeader1)
+            .margin(16)
+            .onClick(() => {
+              this.domeType3 = !this.domeType3
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 3)
+            })
+          if (this.domeType3) {
+            this.setHeader1()
+          }
+          Button(this.errorHeader1)
+            .margin(16)
+            .onClick(() => {
+              this.domeType4 = !this.domeType4
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 4)
+            })
+          if (this.domeType4) {
+            this.setHeader4()
+          }
+          Button(this.successHeader2)
+            .margin(16)
+            .onClick(() => {
+              this.domeType5 = !this.domeType5
+            })
+          if (this.domeType5) {
+            this.setHeader2()
+          }
+          Button(this.errorHeader2)
+            .margin(16)
+            .onClick(() => {
+              this.domeType6 = !this.domeType6
+            })
+          if (this.domeType6) {
+            this.setHeader5()
+          }
+        }
+      }.width("100%")
+      .justifyContent(FlexAlign.Start)
+    }
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -38,6 +38,7 @@
     "pages/testImageAntiAliasingWithPage",
     "pages/testImageKnifeRouter1",
     "pages/testImageKnifeRouter2",
-    "pages/RequestOptionLoadImage"
+    "pages/RequestOptionLoadImage",
+    "pages/testImageKnifeHttpRequestHeader"
   ]
 }

library/index.ets

@@ -99,7 +99,7 @@ export { ObjectKey } from './src/main/ets/components/imageknife/ObjectKey'
 export {RequestOption,Size,DetachFromLayout} 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} from './src/main/ets/components/imageknife/ImageKnifeOption'
+export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions,HeaderOptions} from './src/main/ets/components/imageknife/ImageKnifeOption'
 export { ImageKnifeData } from './src/main/ets/components/imageknife/ImageKnifeData'
 export {IAllCacheInfoCallback,AllCacheInfo,ResourceCacheInfo,MemoryCacheInfo,DataCacheInfo}  from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback'
 export {IParseImage} from './src/main/ets/components/imageknife/interface/IParseImage'

library/src/main/ets/components/imageknife/ImageKnife.ets

@@ -50,7 +50,7 @@ export class ImageKnife {
   resourceFetch: IResourceFetch<ArrayBuffer>;
   filesPath: string = ""; // data/data/包名/files目录
 
-
+  headerMap: Map<string, Object> = new Map<string, Object>(); //定义全局map
   placeholderCache: string = "placeholderCache"
   runningMaps: EasyLinkedHashMap<string, RequestOption>;
   pendingMaps: EasyLinkedHashMap<string, RequestOption>;
@@ -99,6 +99,14 @@ export class ImageKnife {
 
 
   }
+  //全局设置请求头调用方法
+  addHeader(key: string, value: Object) {
+    this.headerMap.set(key, value);
+  }
+
+  deleteHeader(key: string) {
+    this.headerMap.delete(key);
+  }
 
   getMemoryCache(): MemoryLruCache {
     return this.memoryCache;
@@ -279,6 +287,10 @@ export class ImageKnife {
     // 每个request 公共信息补充
     request.setFilesPath(this.filesPath);
 
+    if (this.headerMap.size > 0) {
+      request.addHeaderMap(this.headerMap)
+    }
+
     // 首先执行占位图 解析任务
     if (request.placeholderSrc) {
       PlaceHolderManager.execute(request)

library/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -23,6 +23,7 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
 import { LogUtil } from '../imageknife/utils/LogUtil'
 import { BusinessError } from '@ohos.base'
 import common from '@ohos.app.ability.common'
+import { ObjectKey } from './ObjectKey'
 
 @Component
 export struct ImageKnifeComponent {
@@ -222,6 +223,14 @@ export struct ImageKnifeComponent {
   }
 
   configDisplay(request: RequestOption) {
+    //单个image组件多个请求头调用
+    if (this.imageKnifeOption.headerOption != undefined && this.imageKnifeOption.headerOption?.length > 0) {
+      for (let i = 0; i < this.imageKnifeOption.headerOption.length; i++) {
+        let headerOptions = this.imageKnifeOption.headerOption[i];
+        request.addHeader(headerOptions.key, headerOptions.value);
+        request.signature = new ObjectKey(new Date().getTime().toString())
+      }
+    }
     if (this.imageKnifeOption.placeholderSrc) {
       request.placeholder(this.imageKnifeOption.placeholderSrc, {asyncSuccess:(data:ImageKnifeData) => {
         LogUtil.log('ImageKnifeComponent request.placeholder callback')

library/src/main/ets/components/imageknife/ImageKnifeOption.ets

@@ -57,9 +57,15 @@ export interface TransformOptions{
   rotateImage?: number
 }
 
+export interface HeaderOptions {
+  key: string;
+  value: string;
+}
+
 @Observed
 export class ImageKnifeOption {
-
+  // header请求列表
+  headerOption?: Array<HeaderOptions>;
   // 主图资源
   loadSrc: string | PixelMap | Resource = '';
   mainScaleType?: ScaleType = ScaleType.FIT_CENTER

library/src/main/ets/components/imageknife/RequestOption.ets

@@ -60,6 +60,17 @@ export interface DetachFromLayout{
 }
 
 export class RequestOption {
+  // 遍历添加图片http请求头
+  headers: Map<string, Object> = new Map<string, Object>();
+  // RequestOption调用header对于的方法
+  addHeader(key: string, value: Object) {
+    this.headers.set(key, value);
+  }
+  // 全局调用header对应的方法，包含RequestOption的形式
+  addHeaderMap(map: Map<string, Object>) {
+    this.headers = map;
+  }
+
   uuid:string ='' // 唯一标识
   loadSrc: string | PixelMap | Resource = '';
   strategy: DiskStrategy = new AUTOMATIC();

library/src/main/ets/components/imageknife/networkmanage/HttpDownloadClient.ets

@@ -45,7 +45,6 @@ export class HttpDownloadClient implements IDataFetch {
         // 下载数据流多次返回
         arrayBuffers.push(data);
       })
-
       httpRequest.on('dataReceiveProgress', (data: RequestData) => {
         // 下载进度
         if(data != undefined && (typeof data.receiveSize == 'number') && (typeof  data.totalSize == 'number') ) {
@@ -55,21 +54,26 @@ export class HttpDownloadClient implements IDataFetch {
           }
         }
       })
-
       httpRequest.on('dataEnd', () => {
         // 下载完毕
         let combineArray = this.combineArrayBuffers(arrayBuffers);
         onComplete(combineArray)
       })
 
+      const headerObj: Record<string, Object> = {}
+      request.headers.forEach((value, key) => {
+        headerObj[key] = value
+      })
       httpRequest.requestInStream(
         request.loadSrc as string,
         {
+          header: headerObj,
           method: http.RequestMethod.GET,
           expectDataType: http.HttpDataType.ARRAY_BUFFER,
           connectTimeout: 60000, // 可选 默认60000ms
           readTimeout: 0, // 可选, 默认为60000ms
           usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定
+          usingCache: false
         }
       ).then((data)=>{
         if(data == 200) {

sharedlibrary/src/main/ets/Index.ets

@@ -101,7 +101,7 @@ export {RequestOption,Size} from '@ohos/imageknife'
 export {ObjectKey} from '@ohos/imageknife'
 export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from '@ohos/imageknife'
 export { ImageKnifeDrawFactory } from '@ohos/imageknife'
-export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from '@ohos/imageknife'
+export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions,HeaderOptions} from '@ohos/imageknife'
 export { ImageKnifeData } from '@ohos/imageknife'
 export {IAllCacheInfoCallback,AllCacheInfo,ResourceCacheInfo,MemoryCacheInfo,DataCacheInfo}  from '@ohos/imageknife'
 export {IParseImage} from '@ohos/imageknife'