diff --git a/README.md b/README.md index e830e9c..18ce877 100644 --- a/README.md +++ b/README.md @@ -452,7 +452,7 @@ request.skipMemoryCache(true) 在下述版本验证通过： -DevEco Studio: 3.1Beta2(3.1.0.400), SDK: API9 Release(3.2.11.9) +DevEco Studio版本: 4.0Canary1(4.0.0.112), SDK: API10(4.0.7.3) ## 目录结构 diff --git a/entry/src/main/ets/pages/pngjTestCasePage.ets b/entry/src/main/ets/pages/pngjTestCasePage.ets index 661da94..7145b43 100644 --- a/entry/src/main/ets/pages/pngjTestCasePage.ets +++ b/entry/src/main/ets/pages/pngjTestCasePage.ets @@ -22,7 +22,14 @@ import ArkWorker from '@ohos.worker' @Entry @Component struct PngjTestCasePage { - pngSource: ArrayBuffer = new ArrayBuffer(0); + pngSource1: ArrayBuffer = undefined; + pngSource2: ArrayBuffer = undefined; + pngSource3: ArrayBuffer = undefined; + pngSource4: ArrayBuffer = undefined; + pngdecodeRun1: boolean = false; + pngdecodeRun2: boolean = false; + pngdecodeRun3: boolean = false; + pngdecodeRun4: boolean = false; rootFolder: string = ''; @State hint1: string = 'readPngImageInfo内容展示' @State hint2: string = 'readPngImage内容展示' @@ -31,132 +38,193 @@ struct PngjTestCasePage { @State hint5: string = '测试readMetadata' @State hint6: string = '测试writeMetadata' @State hint7: string = '首先点击获取PNG图片buffer' + @State hint8: string = '首先点击获取PNG图片buffer' + @State hint9: string = '首先点击获取PNG图片buffer' + @State hint10: string = '首先点击获取PNG图片buffer' build() { Scroll() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text('pngj接口测试列表').fontSize(20) - Button(this.hint7).fontSize(30) - .onClick(() => { - - this.rootFolder = globalThis.ImageKnife.getImageKnifeContext().filesDir; - - - globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.pngSample').id) - .then(data => { - this.pngSource = FileUtils.getInstance().uint8ArrayToBuffer(data); - this.hint7 = '获取buffer成功，可以测试' - }) - .catch(err => { - console.log('点击获取Png图片buffer err=' + err) - }) - }) - - -// Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { -// Button('测试readPngImageInfo') -// .onClick(() => { -// let pngj = new Pngj(); -// pngj.readPngImageInfo(this.pngSource, (sender, value) => { -// this.hint1 = JSON.stringify(value); -// }) -// }).margin({ top: 5, left: 10 }) -// Button('测试readPngImage') -// .onClick(() => { -// let pngj = new Pngj(); -// pngj.readPngImage(this.pngSource, (sender, value) => { -// this.hint2 = 'img with=' + value.width + ' img height=' + value.height -// + ' img depth=' + value.depth + ' img ctype=' + value.ctype -// console.log('png data =' + value.data); -// }) -// }).margin({ top: 5, left: 10 }) -// Button('测试writePngWithString') -// .onClick(() => { -// let pngj = new Pngj(); -// pngj.writePngWithString('hello world', this.pngSource, (sender, value) => { -// -// FileUtils.getInstance().createFileProcess( -// this.rootFolder + '/pngj', -// this.rootFolder + '/pngj/newPng.png', -// value) -// let png1 = new Uint8Array(value) -// this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增' -// }) -// }).margin({ top: 5, left: 10 }) -// Button('测试writePng') -// .onClick(() => { -// let pngj = new Pngj(); -// pngj.writePng(this.pngSource, (sender, value) => { -// FileUtils.getInstance().createFileProcess( -// this.rootFolder + '/pngj', -// this.rootFolder + '/pngj/newPng2.png', -// value) -// let png2 = new Uint8Array(value) -// this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增' -// }) -// }).margin({ top: 5, left: 10 }) -// }.width('100%') -// .height(60).backgroundColor(Color.Pink) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + + Button(this.hint7).fontSize(30) + .onClick(() => { + this.rootFolder = globalThis.ImageKnife.getImageKnifeContext().filesDir; + globalThis.ImageKnife.getImageKnifeContext() + .resourceManager + .getMedia($r('app.media.pngSample').id) + .then(data => { + this.pngSource1 = FileUtils.getInstance().uint8ArrayToBuffer(data); + this.hint7 = '获取buffer成功，可以测试' + }) + .catch(err => { + console.log('点击获取Png图片buffer err=' + err) + }) + }) Button('测试readPng') .onClick(() => { - let pngj = new Pngj(); - pngj.readPngImageInfo(this.pngSource, (sender, value) => { - this.hint1 = JSON.stringify(value); - }) + + if (this.pngSource1) { + if (!this.pngdecodeRun1) { + this.pngdecodeRun1 = true; + let pngj = new Pngj(); + pngj.readPngImageInfo(this.pngSource1, (sender, value) => { + this.hint1 = JSON.stringify(value); + this.pngdecodeRun1 = false; + }) + + } else { + this.hint7 = '已经在执行了,请稍等' + } + } else { + this.hint7 = '请先点击此处获取buffer' + } }).margin({ top: 5, left: 10 }) + + + }.width('100%') + .height(60).backgroundColor(Color.Pink) + + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button(this.hint8).fontSize(30) + .onClick(() => { + this.rootFolder = globalThis.ImageKnife.getImageKnifeContext().filesDir; + globalThis.ImageKnife.getImageKnifeContext() + .resourceManager + .getMedia($r('app.media.pngSample').id) + .then(data => { + this.pngSource2 = FileUtils.getInstance().uint8ArrayToBuffer(data); + this.hint8 = '获取buffer成功，可以测试' + }) + .catch(err => { + console.log('点击获取Png图片buffer err=' + err) + }) + }) Button('readPngAsync') .onClick(() => { - let pngj = new Pngj(); - let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { - type: 'classic', - name: 'readPngImageAsync' - }) - pngj.readPngImageAsync(worker, this.pngSource, (sender, value) => { - this.pngSource = sender - this.hint2 = 'img with=' + value.width + ' img height=' + value.height - + ' img depth=' + value.depth + ' img ctype=' + value.ctype - }) + + if (this.pngSource2) { + if (!this.pngdecodeRun2) { + this.pngdecodeRun2 = true; + let pngj = new Pngj(); + let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { + type: 'classic', + name: 'readPngImageAsync' + }) + pngj.readPngImageAsync(worker, this.pngSource1, (sender, value) => { + this.pngSource1 = sender + this.hint2 = 'img with=' + value.width + ' img height=' + value.height + + ' img depth=' + value.depth + ' img ctype=' + value.ctype + this.pngdecodeRun2 = false; + }) + + } else { + this.hint8 = '已经在执行了,请稍等' + } + } else { + this.hint8 = '请先点击此处获取buffer' + } + }).margin({ top: 5, left: 10 }) }.width('100%') .height(60).backgroundColor(Color.Pink) - Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button(this.hint9).fontSize(30) + .onClick(() => { + this.rootFolder = globalThis.ImageKnife.getImageKnifeContext().filesDir; + globalThis.ImageKnife.getImageKnifeContext() + .resourceManager + .getMedia($r('app.media.pngSample').id) + .then(data => { + this.pngSource3 = FileUtils.getInstance().uint8ArrayToBuffer(data); + this.hint9 = '获取buffer成功，可以测试' + }) + .catch(err => { + console.log('点击获取Png图片buffer err=' + err) + }) + }) Button('测试writePngWithString') .onClick(() => { - let pngj = new Pngj(); - let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { - type: 'classic', - name: 'writePngWithStringAsync' - }) - pngj.writePngWithStringAsync(worker, 'hello world', this.pngSource, (sender, value) => { - this.pngSource = sender - FileUtils.getInstance().createFileProcess( - this.rootFolder + '/pngj', - this.rootFolder + '/pngj/newPng.png', - value) - let png1 = new Uint8Array(value) - this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增' - }) + + if (this.pngSource3) { + if (!this.pngdecodeRun3) { + this.pngdecodeRun3 = true; + let pngj = new Pngj(); + let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { + type: 'classic', + name: 'writePngWithStringAsync' + }) + pngj.writePngWithStringAsync(worker, 'hello world', this.pngSource3, (sender, value) => { + this.pngSource3 = sender + FileUtils.getInstance().createFileProcess( + this.rootFolder + '/pngj', + this.rootFolder + '/pngj/newPng.png', + value) + let png1 = new Uint8Array(value) + this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增' + this.pngdecodeRun3 = false; + }) + } else { + this.hint9 = '已经在执行了,请稍等' + } + } else { + this.hint9 = '请先点击此处获取buffer' + } + }).margin({ top: 5, left: 10 }) + + }.width('100%') + .height(60).backgroundColor(Color.Pink) + + + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + + Button(this.hint10).fontSize(30) + .onClick(() => { + this.rootFolder = globalThis.ImageKnife.getImageKnifeContext().filesDir; + globalThis.ImageKnife.getImageKnifeContext() + .resourceManager + .getMedia($r('app.media.pngSample').id) + .then(data => { + this.pngSource4 = FileUtils.getInstance().uint8ArrayToBuffer(data); + this.hint10 = '获取buffer成功，可以测试' + }) + .catch(err => { + console.log('点击获取Png图片buffer err=' + err) + }) + }) Button('writePng') .onClick(() => { - let pngj = new Pngj(); - let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { - type: 'classic', - name: 'writePngAsync' - }) - pngj.writePngAsync(worker, this.pngSource, (sender, value) => { - this.pngSource = sender - FileUtils.getInstance().createFileProcess( - this.rootFolder + '/pngj', - this.rootFolder + '/pngj/newPng2.png', - value) - let png2 = new Uint8Array(value) - this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增' - }) + + if (this.pngSource4) { + if (!this.pngdecodeRun4) { + this.pngdecodeRun4 = true; + let pngj = new Pngj(); + let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', { + type: 'classic', + name: 'writePngAsync' + }) + pngj.writePngAsync(worker, this.pngSource4, (sender, value) => { + this.pngSource4 = sender + FileUtils.getInstance().createFileProcess( + this.rootFolder + '/pngj', + this.rootFolder + '/pngj/newPng2.png', + value) + let png2 = new Uint8Array(value) + this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增' + this.pngdecodeRun4 = false; + }) + } else { + this.hint10 = '已经在执行了,请稍等' + } + } else { + this.hint10 = '请先点击此处获取buffer' + } + }).margin({ top: 5, left: 10 }) }.width('100%') .height(60).backgroundColor(Color.Pink) diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 7973da5..31abc5d 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -249,6 +249,17 @@ export struct ImageKnifeComponent { }) } } + + + + configRenderGpu(request: RequestOption){ + if(this.imageKnifeOption.enableGpu){ + request.enableGPU() + }else{ + // 如果enableGpu未设置则不启动GPU渲染 + } + } + // imageknife 第一次启动和数据刷新后重新发送请求 imageKnifeExecute() { if (this.imageKnifeOption == null || this.imageKnifeOption.loadSrc == null) { @@ -265,6 +276,7 @@ export struct ImageKnifeComponent { this.configNecessary(request); this.configCacheStrategy(request); this.configDisplay(request); + this.configRenderGpu(request); globalThis.ImageKnife.call(request); } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets index e8be662..3c39d3d 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -30,6 +30,8 @@ export class ImageKnifeOption { loadSrc: string | PixelMap | Resource; mainScaleType?: ScaleType = ScaleType.FIT_CENTER + enableGpu?:boolean = true; + // 磁盘缓存策略 strategy?: DiskStrategy = new AUTOMATIC();