#DAYU200體驗官# 為探究OpenHarmony 螢幕截圖API做的工作

(目錄)

想到就開始行動，比想更重要。

可以忽略的一些廢話😂😂😂

這篇文章到底為什麼存在？存在的價值到底在哪兒？

我并沒有思考這些，僅僅是想将在開發OpenHarmony應用程式路上遇到的一些問題或者解決方法記錄下來，以便于在某個天氣晴朗的下午我又遇到時可以友善查閱。~~

最終經曆了4個炎熱的10小時，我還是失敗了😂😂😂，

system_core

授權成功，截圖傳回

undefined

😒😒😒，赤裸裸的嘲諷😰😰😰~~

1 安裝VMware Workstation Player

1.1 下載下傳VMware Workstation Player（文章中别名：VM Player）

VM Player下載下傳位址

1.2 安裝VM Player

1.2.1 點選VMware-player-full-xxx.exe，進入安裝向導

1.2.2 勾選接受許可協定條款

1.2.3 更改安裝位置（如果僅有一個磁盤，請移至1.2.4）

1.2.4 使用者體驗設定，可預設，也可以取消勾選

1.2.5 快捷方式預設

1.2.6 開始安裝

1.2.7 完成安裝（個人使用跳過許可即可）

1.3 打開VM Player

1.4 設定USB插入後直接連接配接到主機（Player --> 檔案 --> 首選項）

＊═—═—═—═—═—═—＊至此VM Player安裝完成＊═—═—═—═—═—═—＊

2 準備Ubuntu20.04系統鏡像包

2.1 Ubuntu系統下載下傳 | Ubuntu

2.2 由于下載下傳下來的檔案格式為.torrent，需要使用迅雷下載下傳完整的ISO檔案。

＊═—═—═—═—═—═—＊Ubuntu鏡像包準備完畢＊═—═—═—═—═—═—＊

3. 建立OpenHarmony虛拟機

3.1 打開VM Player，點選首頁的建立新虛拟機

3.2 勾選稍後安裝作業系統，點選下一步

3.3 選擇客戶機作業系統和版本

3.4 設定虛拟機名稱和位置（如果有多個盤的話，建議存儲在非C槽中）

3.5 指定磁盤大小

3.6 完成虛拟機建立

3.7 編輯虛拟機設定

3.7.1 設定記憶體（建議多點）

3.7.2 指定ISO鏡像檔案位置

2.7.3 開啟共享檔案夾

3.7.4 移除USB控制器

＊═—═—═—═—═—═—＊名為OpenHarmony的Ubuntu虛拟機建立成功＊═—═—═—═—═—═—＊

4 開始安裝Ubuntu作業系統

4.1 點選VM Player首頁的播放虛拟機

4.2 在安裝向導界面左側語言欄選擇中文(簡體)，當然也可以使用預設

4.3 點選安裝向導界面試用Ubuntu（由于安裝時無法正常顯示，是以需要調分辨率）

4.4 在虛拟機桌面右鍵打開終端，輸入 `xrandr -s 1280x800` ,回車即可

4.5 點選虛拟機桌面安裝Ubuntu20.04LTS，進行安裝

4.5.1 以下圖不需要文字描述

4.5.2 點選選擇位置

4.5.3 填寫必要的資訊

4.5.4 等待安裝完成，耗時比較久，可以做點其他事

＊═—═—═—═—═—═—＊Ubuntu作業系統安裝成功＊═—═—═—═—═—═—＊

5 準備标準系統環境

5.1 搭建Ubuntu環境

5.1.1 将Ubuntu Shell 環境修改為 `bash`

a. 執行指令檢視是否為

bash

，如果不是則按照[b]操作，若是則跳過

b. 執行指令，将Shell由

dash

改為

bash

c. 更改成功

5.1.2 下載下傳華為內建開發環境IDE DevEco Device Tool下載下傳 | HarmonyOS裝置開發 Linux版本

5.1.3 解壓DevEco Device Tool軟體包，并對解壓後的檔案夾進行賦權

unzip devicetool-linux-tool-3.0.0.401.zip
chmod u+x devicetool-linux-tool-3.0.0.401.sh

5.1.4 執行指令按照DevEco Device Tool

sudo ./devicetool-linux-tool-3.0.0.401.sh

等待安裝完成

出現圖中紅框内容，則表示安裝成功

5.1.5 安裝SSH服務

a. 執行指令

sudo apt-get install openssh-server

安裝SSH服務

b. 執行指令

sudo systemctl start ssh

啟動SSH服務，執行指令

sudo systemctl status ssh

檢視狀态，為

active(running)

則啟動成功

5.1.6 擷取标準系統源碼

a. 執行指令

sudo apt-get install git git-lfs

安裝git用戶端和git-lfs

b. 配置使用者資訊

git config --global user.name "yourname"
git config --global user.email "your-email-address"
git config --global credential.helper store

c. 安裝碼雲repo工具

curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o /usr/local/bin/repo  #如果沒有權限，可下載下傳至其他目錄，并将其配置到環境變量中
chmod a+x /usr/local/bin/repo
pip3 install -i https://repo.huaweicloud.com/repository/pypi/simple requests

如果提示

Command 'curl' not found, but can be installed with: sudo apt install curl

則執行指令

sudo apt-get install curl

安裝

curl

若提示權限不夠，則在指令前加

sudo

d. 使用repo+https下載下傳釋出Tag節點源碼

建立源碼存放目錄

#DAYU200體驗官# 為探究OpenHarmony 螢幕截圖API做的工作
進入建立的源碼存放目錄，執行以下指令下載下傳源碼

repo init -u https://gitee.com/openharmony/manifest -b refs/tags/OpenHarmony-v3.2-Beta1 --no-repo-verify
repo sync -c
repo forall -c 'git lfs pull'

提示

/usr/bin/env: "python": 沒有那個檔案或目錄

,則執行指令

sudo ln -sf /usr/bin/python3 /usr/bin/python

建立一個連結

e. 在源碼目錄下執行

bash build/prebuilts_download.sh

安裝編譯器及二進制工具

5.2 搭建Windows環境

5.2.1 下載下傳華為內建開發環境IDE DevEco Device Tool下載下傳 | HarmonyOS裝置開發 Windows版本

5.2.2 安裝DevEco Device Tool

a. 點選devicetools-windows-tool-xxx.exe打開安裝向導

b. 選擇安裝位置

c. 同時安裝VSCode

d. 選擇python路徑（如果安裝過），沒有安裝，則選擇下載下傳安裝

e. 選擇其他元件，預設即可

f. 接受協定

g. 等待安裝完成，安裝過程會彈出python安裝界面，切勿操作。

h. 完成安裝

i. 打開VSCode，等待檢查更新完成後重新開機

5.2.3 安裝Remote-SSH

a. 在左側擴充中搜尋Remote-SSH，并安裝

b. 配置Ubuntu遠端連接配接

在Ubuntu虛拟機中執行

ifconfig

擷取虛拟機IP位址，若提示

Command 'ifconfig' not found, but can be installed with: sudo apt install net-tools

則執行

sudo apt-get install net-tools

指令，然後再次執行

ifconfig

擷取虛拟機IP位址

c. 輸入遠端連接配接資訊

ssh [email protected] -A

d. 選擇配置檔案

e. 在遠端資料總管中出現剛才配置的IP位址時，則配置成功

5.2.4 連接配接遠端Ubuntu

a. 選擇Linux

b. 選擇Continue

c. 輸入設定的password（兩個字竟然是敏感資訊）

若提示DevEco Device Tool需要重載，則點選重載即可。

5.2.5 為了不用頻繁輸入遠端虛拟機password，需要配置遠端通路Ubuntu環境公鑰

a. 打開Git bash指令（如果沒有安裝，則安裝Git），執行指令，生成SSH公鑰

ssh-keygen -t rsa
ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected]

b. 配置公鑰

c. 斷開連接配接，重新連接配接遠端Ubuntu，需要輸入配置SSH Key時輸入的password

＊═—═—═—═—═—═—＊OpenHarmony标準系統環境準備完畢＊═—═—═—═—═—═—＊

6 導入、編譯、燒錄

6.1 導入源碼工程

a. 打開VSCode，首先連接配接遠端虛拟機，然後點選左側DevEco，主界面 --> 首頁 --> 導入工程

b. 導入工程界面快速通路選擇虛拟機（tetcl），選擇源碼所在目錄

c. 首次導入時，會出現如下提示框，點選導入

d. 在選擇工程導入類型界面中選擇從OpenHarmony源碼導入

e. 導入工程界面中，産品選擇hihope下的rk3568，OpenHarmony版本選擇3.x，其他預設

f. 打開源碼，将在資料總管下看到源碼目錄結構

6.2 編譯源碼

a. 打開主界面工程，點選配置工程

c. 在toolchain頁簽中，會自動檢測依賴的編譯工具鍊是否完備，如果提示部分工具鍊缺失，點選安裝即可自動安裝。

c. 在blank配置頁中，設定源碼的編譯類型

build_type

，預設即可，然後單擊右上角儲存按鈕。

d. 在PROJECT TASKS中，點選對應的開發闆下的Build進行編譯。

e. 編譯成功後，會在out目錄下輸出對應開發闆所需的鏡像檔案

6.3 燒錄（由于VSCode無法配置燒錄分區選擇使用瑞芯微燒錄工具）

a. 打開瑞芯微燒錄工具

b. 将編譯好的鏡像檔案拷貝到windows磁盤中

c. 在瑞芯微燒錄工具加載鏡像視窗右鍵導入配置（并更改檔案所在路徑，確定能夠找到）

d. 連接配接開發闆，長按更新鍵，然後按RESET按鍵，再點選瑞芯微燒錄工具中的執行，在右側會顯示下載下傳Boot，然後松開更新鍵，等待燒錄完成。

7 制作截圖AppDemo

7.1 建立ScreenShot項目

7.2 選擇使用的Ability模闆

7.3 編寫代碼

7.3.1 導入子產品

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

import screenshot from '@ohos.screenshot';

// screenshot.save()傳回的是PixelMap，是以需要導入
import image from '@ohos.multimedia.image';

7.3.2 配置權限

module.json5

中配置權限

// ScreenShot/entry/src/main/module.json5
{
    "requestPermissions": [
      {
        "name": "ohos.permission.CAPTURE_SCREEN"
      }
    ],
}

b. 因為

screenshot

是

system_core

等級，不僅僅需要在config.json中配置，還要修改profile檔案中配置（Sdk/toolchains/版本/lib/UnsgnedReleasedProfileTemplate.json&UnsgnedDebugProfileTemplate.json）

c. 配置完成後，對應用進行簽名

7.3.3 檢視權限是否授予

// MainAbility.ts onWindowStageCreate()
    onWindowStageCreate(windowStage) {
        // Main window is created, set main page for this ability
        console.log("[Demo] MainAbility onWindowStageCreate")
        var context = this.context;
        let array: Array<string> = ['ohos.permission.CAPTURE_SCREEN'];
        context.requestPermissionsFromUser(array).then((data) => {
            console.log('ScreenShot ---> MainAbility ---> data type: ' + typeof(data));
            console.log('ScreenShot ---> MainAbility ---> data: ' + JSON.stringify(data));
            console.log('ScreenShot ---> MainAbility ---> data permissions: ' + data.permissions);
            console.log('ScreenShot ---> MainAbility ---> data result: ' + data.authResults);
        }).catch(err => {
            console.error('ScreenShot ---> MainAbility ---> err: ' + JSON.stringify(err));
        })

        windowStage.setUIContent(this.context, "pages/index", null)
    }

7.3.4 點選按鈕，實作截圖

// 擷取螢幕截圖
screenshot.save(options?: ScreenShotOptions, callback: AsyncCallback<image.PixelMap>):void

screenshot.save(options?: ScreenShotOptions): Promise<image.PixelMap>

// 設定截圖圖像的資訊
ScreenShotOptions = {
	screenRect: {
		"left": 200,
		"top": 100,
		"width": 200,
		"height": 200
	}, // 表示截圖圖像的區域，不傳值預設為全屏
	imageSize: {
		"width": 300,
		"height": 300
	}, // 表示截取圖像的大小，不傳值預設為全屏
	rotation: 0, // 表示截圖圖像的旋轉角度，目前僅支援輸入值為0，預設值為0
	displayId: 0// 表示截圖圖像的顯示裝置Display的ID号，API8以上
}

getScreen = (isFullScreen: boolean) => {
    let options: screenshot.ScreenshotOptions = {
      screenRect: { left: 0, top: 0, width: 400, height: 400 },
      imageSize: { width: 400, height: 400 },
      rotation: 0,
      displayId: 0
    }
    if (isFullScreen) {
      options = {
        rotation: 0
      }
    }
    screenshot.save(options, (err, data: image.PixelMap) => {
      if (err) {
        console.error('ScreenShot --> error: ' + JSON.stringify(err));
        return;
      }
      console.info('ScreenShot --> data: ' + JSON.stringify(data));
      this.image = data;
    })
  }

8 存在問題

8.1 `system_core` 授權回顯

8.2 `screenshot.save()` 傳回 `undefined`

如果有成功調用截圖Api的大佬，可以分享一下。

附件連結：

ScreenShot.rar（https://ost.51cto.com/resource/2117)

#DAYU200體驗官# 為探究OpenHarmony 螢幕截.pdf(https://ost.51cto.com/resource/2116)