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

引言

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

樣例簡(jiǎn)介

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

使用說(shuō)明

添加相冊(cè)圖片：點(diǎn)擊首頁(yè)的添加圖片，選擇圖庫(kù)圖片，如無(wú)圖片可點(diǎn)擊拍照按鈕，拍攝完成后會(huì)默認(rèn)選擇剛拍攝的照片，再點(diǎn)擊完成按鈕，添加圖片成功。

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

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

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

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

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

樣例代碼拆解

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

權(quán)限申請(qǐng)：

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

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

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

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

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

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

添加相冊(cè)圖片：

1． 添加相冊(cè)圖片

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

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

c）首頁(yè)判斷imageList長(zhǎng)度大于0，通過(guò)Grid組件從imageList中獲取圖片，并設(shè)置點(diǎn)擊事件點(diǎn)擊進(jìn)入U(xiǎn)pdatePages頁(yè)面。

編輯圖片：

1．編輯圖片主頁(yè)面

a）添加圖片完成后，點(diǎn)擊圖片進(jìn)入編譯圖片updatePages頁(yè)面。

b）updatePages頁(yè)面中通過(guò)readImage獲取圖片。

c）通過(guò)imgae和Text組件繪制編輯圖標(biāo)和文字，點(diǎn)擊后進(jìn)入EditImages頁(yè)面。

d）編輯頁(yè)面底部菜單欄會(huì)根據(jù)this.currentTask狀態(tài)顯示，默認(rèn)為T(mén)ask.ADJUST狀態(tài)，即顯示this.getAdjustTool()和this.getFirstLvMenu()自定義組件。

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

2．裁剪

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

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

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

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

3．旋轉(zhuǎn)

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

4．調(diào)色

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

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

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

5．色域

a）點(diǎn)擊色域，進(jìn)入ColorSpacePage頁(yè)面。

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

結(jié)語(yǔ)

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

供稿：開(kāi)發(fā)者與活動(dòng)運(yùn)營(yíng)組 劉麗紅