【拆·應(yīng)用】是為開源鴻蒙應(yīng)用開發(fā)者打造的技術(shù)分享平臺，是匯聚開發(fā)者的技術(shù)洞見與實踐經(jīng)驗、提供開發(fā)心得與創(chuàng)新成果的展示窗口。誠邀您踴躍發(fā)聲，期待您的真知灼見與技術(shù)火花！

引言

本期內(nèi)容介紹基于開源鴻蒙在RK3568上開發(fā)圖片編輯樣例的全流程，分為上篇和下篇，本篇為上篇，主要介紹添加相冊圖片、編譯圖片功能。

樣例簡介

在開源鴻蒙生態(tài)建設(shè)中，多媒體能力是構(gòu)建豐富用戶體驗的核心要素。本樣例首先使用@ohos.file.photoAccessHelper拉起圖庫選擇圖片，然后使用image.createImageSource創(chuàng)建圖片源實例，接下來使用createPixelMap創(chuàng)建PixelMap對象，便于實現(xiàn)圖片的編輯功能，使用effectKit.getHighestSaturationColor() 接口實現(xiàn)對圖片的高亮調(diào)節(jié)，利用Image、Text組件的組合給圖片添加文字、貼紙，再使用OffscreenCanvasRenderingContext2D進行離屏繪制保存新的pixelMap。

使用說明

添加相冊圖片：點擊首頁的添加圖片，選擇圖庫圖片，如無圖片可點擊拍照按鈕，拍攝完成后會默認選擇剛拍攝的照片，再點擊完成按鈕，添加圖片成功。

編輯圖片選項：添加圖片成功后，點擊編輯，主編輯選項為調(diào)整和標(biāo)記，其中調(diào)整包括裁剪、旋轉(zhuǎn)、調(diào)色、色域等，標(biāo)記包括文字和貼紙。

圖片裁剪：可選擇4:3，16:9，1:1比例裁剪圖片。

圖片裁剪：順時針90度，逆時針90度旋轉(zhuǎn)。

亮度調(diào)節(jié)：通過拖拉進度條調(diào)節(jié)圖片亮度。

色域：給圖片設(shè)置不同的色域。

樣例代碼拆解

下面是各個功能模塊代碼邏輯詳細分解。樣例源碼鏈接：https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/Image

權(quán)限申請：

本樣例中需要申請受限權(quán)限：可直接修改HarmonyAppProvision配置文件

1． 打開HarmonyAppProvision配置文件，即SDK目錄下的“Sdk/openharmony/_{Version} _/toolchains/lib/UnsgnedReleasedProfileTemplate.json”文件。

2． 在配置文件中添加需要使用的受限權(quán)限。

a）不攜帶權(quán)限數(shù)據(jù)的受限權(quán)限通過修改 "acls" > "allowed-acls" 字段添加。

b）攜帶權(quán)限數(shù)據(jù)的受限權(quán)限可通過修改 "app-services-capabilities" 字段添加。

c）并重新進行應(yīng)用簽名。

添加相冊圖片：

1． 添加相冊圖片

a）Cloumn容器中包含Image和Text組件，點擊后調(diào)用GetPictures.getImage()。

b）在GetPictures.getImage()中首先使用@ohos.file.photoAccessHelper拉起圖庫選擇圖片，然后將選擇的圖片用imgaeList數(shù)組保存路徑，點擊完成跳轉(zhuǎn)到首頁。

c）首頁判斷imageList長度大于0，通過Grid組件從imageList中獲取圖片，并設(shè)置點擊事件點擊進入UpdatePages頁面。

編輯圖片：

1．編輯圖片主頁面

a）添加圖片完成后，點擊圖片進入編譯圖片updatePages頁面。

b）updatePages頁面中通過readImage獲取圖片。

c）通過imgae和Text組件繪制編輯圖標(biāo)和文字，點擊后進入EditImages頁面。

d）編輯頁面底部菜單欄會根據(jù)this.currentTask狀態(tài)顯示，默認為Task.ADJUST狀態(tài)，即顯示this.getAdjustTool()和this.getFirstLvMenu()自定義組件。

e）this.getAdjustTool()通過List組件展示裁剪、旋轉(zhuǎn)、調(diào)試、色域等編輯選項，點擊裁剪后將this.currentTask設(shè)置為裁剪狀態(tài)，點擊其他的編輯選項，設(shè)置this.currentTask其他的狀態(tài)，并設(shè)置this.cancelOkText，從而刷新底部菜單欄的顯示。

2．裁剪

a）通過List組件展示比例選項，包括原圖、4:3、16:9、1:1四種比例，設(shè)置點擊事件，

獲取當(dāng)前比例，根據(jù)當(dāng)前比例調(diào)用this.cropImage()方法進行裁剪。

b）在this.cropImage()中調(diào)用pixmap.crop方法，并傳入計算后的size和坐標(biāo)進行圖片按比例裁剪。

c）裁剪完成后點擊√保存，并返回主編輯菜單，其他編輯操作也是點擊保存并返回。

3．旋轉(zhuǎn)

旋轉(zhuǎn)分為順時針和逆時針90度旋轉(zhuǎn)，調(diào)用this.pixmap.rotate()接口，旋轉(zhuǎn)后也是點擊右下角√保存旋轉(zhuǎn)后的結(jié)果，返回主編輯菜單。

4．調(diào)色

a）調(diào)色目前實現(xiàn)的功能是調(diào)節(jié)亮度，通過Slider滑動組件直觀展示亮度進度條，監(jiān)聽

onChange滑動事件調(diào)用this.brightChange()調(diào)節(jié)圖片亮度。

b）brightChange中，先將this.pixelMap賦值給this.brightnessOriginBM，再通過createEffect創(chuàng)建Filter實例，通過Filter圖像效果類中的brightness，實現(xiàn)亮度調(diào)節(jié)。

5．色域

a）點擊色域，進入ColorSpacePage頁面。

b）通過ForEach展示SRGB，DisplayP3，DCI_P3，ADOBE_RGB色域，this.pixelMap!.applyColorSpace設(shè)置色域。

結(jié)語

以上是本樣例具體功能模塊的實現(xiàn)，通過本樣例讓開發(fā)者們了解到如何拉起圖庫選擇圖片、創(chuàng)建圖片源實例、實現(xiàn)圖片的編輯功能，標(biāo)記圖片以及進行離屏繪制保存新圖片的功能將在下篇介紹。除此之外，開源鴻蒙也提供了豐富的基礎(chǔ)組件和其他功能模塊，依托開源特性可靈活定制底層功能，借助分布式架構(gòu)實現(xiàn) “一次開發(fā)，多端部署”，大幅降低跨設(shè)備協(xié)同開發(fā)成本，一系列配套的開發(fā)工具和教程可讓開發(fā)者快速上手，歡迎更多的開發(fā)者加入到開源鴻蒙應(yīng)用開發(fā)中，創(chuàng)造更多奇思妙想的應(yīng)用。

供稿：開發(fā)者與活動運營組 劉麗紅