【ARK UI】HarmonyOS 從相冊選擇圖片並顯示到Image組件上

​ 參考資料

【Harmony OS】【ARK UI】ETS 上下文基本操作

【Harmony OS】【ARK UI】ets使用startAbility或startAbilityForResult方式調起Ability

Image

程式碼運行

許可權申請

申請文件讀取許可權，在config.json寫如下程式碼

 "reqPermissions": [
      {
        "name": "ohos.permission.READ_USER_STORAGE"
      },
      {
        "name": "ohos.permission.WRITE_USER_STORAGE"
      }
    ],

在ets文件動態申請讀寫許可權

 requestMyPermissionsFromUser(){
    var context = featureAbility.getContext();
    context.requestPermissionsFromUser(
      [
        "ohos.permission.READ_USER_STORAGE",
        "ohos.permission.WRITE_USER_STORAGE"
      ],
      1,(err, data)=>{
      console.info("====>requestdata====>" + JSON.stringify(data));
      console.info("====>requesterrcode====>" + JSON.stringify(err.code));
    }
    )
  }
跳轉相冊

在Ets文件寫一個跳轉按鈕跳轉到相冊，選擇相片，返回data的 decodedPath路徑就是dataability顯示的路徑，跳轉程式碼如下

startAlbumAbility(){
    var str = {
      "want": {
        "deviceId": "",
        "bundleName": "",
        "abilityName": "",
        "uri": "",
        "action": "android.intent.action.GET_CONTENT",//todo 跳轉相冊的action
        "type":"image/*" //todo 文件類型
      },
    };
    //todo 開始跳轉到相冊介面
    featureAbility.startAbilityForResult(str, (error, data) => {
      if (error) {
        console.error('Operation failed. Cause: ' + error);
        return;
      }
      if(data.resultCode==-1){//todo 返回到該介面並且得到了結果
         console.info('Operation succeeded: '+JSON.stringify(data) );
        this.IsLocalFlag=false//todo 設置不是本地路徑
        this.src="dataability://"+data.want.uri.decodedPath//todo dataability 顯示方式
      }else{//todo 返回到該介面沒有選擇相片
        console.info('Operation fail: ' );
      }

    });
  }
介面顯示

定義一個boolean欄位判斷是否是本地欄位，如果是顯示本地圖片，如果不是顯示從相冊中選擇的圖片，

Image的dataability的使用 支援dataability://路徑前綴的字元串，用於訪問通過data ability提供的圖片路徑。

 Image(this.IsLocalFlag?$r('app.media.icon'):this.src).width(300).height(300)

 

全部程式碼

import featureAbility from '@ohos.ability.featureAbility'
@Entry
@Component
struct Index {
  @State IsLocalFlag:boolean=true;
  @State src: string = ""
  //todo 動態申請文檔讀寫許可權
  requestMyPermissionsFromUser(){
    var context = featureAbility.getContext();
    context.requestPermissionsFromUser(
      [
        "ohos.permission.READ_USER_STORAGE",
        "ohos.permission.WRITE_USER_STORAGE"
      ],
      1,(err, data)=>{
      console.info("====>requestdata====>" + JSON.stringify(data));
      console.info("====>requesterrcode====>" + JSON.stringify(err.code));
    }
    )
  }

  startAlbumAbility(){
    var str = {
      "want": {
        "deviceId": "",
        "bundleName": "",
        "abilityName": "",
        "uri": "",
        "action": "android.intent.action.GET_CONTENT",//todo 跳轉相冊的action
        "type":"image/*" //todo 文件類型
      },
    };
    //todo 開始跳轉到相冊介面
    featureAbility.startAbilityForResult(str, (error, data) => {
      if (error) {
        console.error('Operation failed. Cause: ' + error);
        return;
      }
      if(data.resultCode==-1){//todo 返回到該介面並且得到了結果
         console.info('Operation succeeded: '+JSON.stringify(data) );
        this.IsLocalFlag=false//todo 設置不是本地路徑
        this.src="dataability://"+data.want.uri.decodedPath
      }else{//todo 返回到該介面沒有選擇相片
        console.info('Operation fail: ' );
      }

    });

  }

  build() {
    Row() {
      Column() {
        Text("申請許可權")
          .fontSize(50)
          .width(100+"%")
          .height("100")
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
        .onClick(this.requestMyPermissionsFromUser.bind(this))
        Text("打開相冊")
          .fontSize(50)
          .width(100+"%")
          .height("100")
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
          .onClick(this.startAlbumAbility.bind(this))
        .backgroundColor("#ED6262")
          Image(this.IsLocalFlag?$r('app.media.icon'):this.src).width(300).height(300)
      }
      .width('100%')
    }
    .height('100%')
  }
}

運行效果

e91e68989b7116ae684c7913a2dc700e_1885x1040.gif%40900-0-90-f.gif​

​

欲了解更多更全技術文章，歡迎訪問//developer.huawei.com/consumer/cn/forum/?ha_source=zzh

Tags:

VirMach 便宜 VPS