!33 1.ImageKnifeComponent组件默认开启GPU渲染

Merge pull request !33 from zhoulisheng1/enablegpu

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)
 
 ## 目录结构
 

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)

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

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