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

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

Signed-off-by: 张琥珀 <zhanghupo3@h-partners.com>
This commit is contained in:
张琥珀 2024-02-20 09:21:57 +08:00
parent 59d80e5c55
commit 6c5d709777
14 changed files with 334 additions and 16 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.6
- 修复手机调节显示大小时图片消失
- imageKnife防盗链，header请求头属性设置
- pngWorker线程改为taskpool
- 修复正方形裁剪有些图片裁剪创建pixelMap失败

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

@ -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

7
entry/src/main/ets/pages/RequestOptionLoadImage.ets
View File

@ -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()) {

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

@ -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%')

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

@ -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')

256
entry/src/main/ets/pages/testImageKnifeHttpRequestHeader.ets Normal file
View File

@ -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)
}
}
}

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

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

2
library/index.ets
View File

@ -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'

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

@ -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)

9
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -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')

8
library/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -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

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

@ -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();

8
library/src/main/ets/components/imageknife/networkmanage/HttpDownloadClient.ets
View File

@ -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) {

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

@ -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'