鸿蒙媒体开辟【拼图】照相和图片

拼图

介绍

该示例通过@ohos.multimedia.image和@ohos.file.photoAccessHelper接口实现获取图片，以及图片裁剪分割的功能。
效果预览

利用说明：

• 利用预置相机照相后启动应用，应用首页会读取设备内的图片文件并展示获取到的第一个图片，没有图片时图片位置表现空白；
  
• 点击开始按钮开始后，时间开始倒计时，在规定时间内未完成拼图则游戏结束。在游戏中，玩家点击重新开始举行游戏重置；
  
• 点击开始游戏后，玩家可以根据上方的大图，点击黄格四周的图片移动，点击后图片和黄格互换位置,最终拼成完整的图片；
  
• 不在游戏中时，玩家可以点击上方大图，选择自定义图片来举行拼图游戏。
  

详细实现

• 游戏中图片裁剪分割的效果实如今ImageModel中，源码参考[ImageModel]:
  

1. /*
2. * Copyright (c) 2022 Huawei Device Co., Ltd.
3. * Licensed under the Apache License, Version 2.0 (the "License");
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an "AS IS" BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
16. import { image } from '@kit.ImageKit';
17. import { photoAccessHelper } from '@kit.MediaLibraryKit';
18. import { dataSharePredicates } from '@kit.ArkData';
19. import { Context } from '@kit.AbilityKit';
20. import { fileIo } from '@kit.CoreFileKit';
21. import Logger from './Logger';
22. import PictureItem from './PictureItem';
23. import { CommonConstants as Common } from '../common/CommonConstants';
25. const TAG = '[ImageModel]';
27. export default class ImageModel {
28.   private phAccessHelper: photoAccessHelper.PhotoAccessHelper | null = null;
30.   constructor(context: Context) {
31.     this.phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
32.   }
34.   async getAllImg(): Promise<photoAccessHelper.PhotoAsset[]> {
35.     Logger.info('getAllImg');
36.     let photoList: Array<photoAccessHelper.PhotoAsset> = [];
37.     if (this.phAccessHelper === null) {
38.       Logger.info('phAccessHelper fail');
39.       return photoList;
40.     }
41.     let fileKeyType = photoAccessHelper.PhotoKeys.PHOTO_TYPE;
42.     let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
43.     Logger.info(fileKeyType);
44.     let fetchOptions: photoAccessHelper.FetchOptions = {
45.       fetchColumns: [],
46.       predicates: predicates
47.     };
49.     try {
50.       let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> =
51.         await this.phAccessHelper.getAssets(fetchOptions);
52.       if (fetchResult != undefined) {
53.         Logger.info('fetchResult success');
54.         let photoAsset: Array<photoAccessHelper.PhotoAsset> = await fetchResult.getAllObjects();
55.         if (photoAsset != undefined && photoAsset.length > 0) {
56.           for (let i = 0; i < photoAsset.length; i++) {
57.             if (photoAsset[i].photoType === 1) {
58.               photoList.push(photoAsset[i]);
59.             }
60.           }
61.         }
62.       }
63.     } catch (err) {
64.       Logger.error('getAssets failed, message = ', err);
65.     }
66.     Logger.info('photoList success');
67.     return photoList;
68.   }
70.   async splitPic(index: number): Promise<PictureItem[]> {
71.     let imagePixelMap: PictureItem[] = [];
72.     let imagesData: Array<photoAccessHelper.PhotoAsset> = await this.getAllImg();
73.     let imagePackerApi = image.createImagePacker();
74.     fileIo.open(imagesData[index].uri, fileIo.OpenMode.READ_ONLY).then(async (file: fileIo.File) => {
75.       let fd: number = file.fd;
76.       let imageSource = image.createImageSource(fd);
77.       let imageInfo = await imageSource.getImageInfo();
78.       Logger.info(TAG, `sizeImg createImageSource ${JSON.stringify(imageSource)}`);
79.       let height = imageInfo.size.height / Common.SPLIT_COUNT;
80.       for (let i = 0; i < Common.SPLIT_COUNT; i++) {
81.         for (let j = 0; j < Common.SPLIT_COUNT; j++) {
82.           let picItem: PictureItem;
83.           if (i === Common.SPLIT_COUNT - 1 && j === Common.SPLIT_COUNT - 1) {
84.             picItem = new PictureItem(Common.PICTURE_ITEM_NUMBER, {} as image.PixelMap);
85.             imagePixelMap.push(picItem);
86.           } else {
87.             Logger.info(TAG, `sizeImg x = ${imageInfo.size.width / Common.SPLIT_COUNT} y = ${height}`);
88.             let decodingOptions: image.DecodingOptions = {
89.               desiredRegion: {
90.                 size: {
91.                   height: height,
92.                   width: imageInfo.size.width / Common.SPLIT_COUNT
93.                 }, x: j * imageInfo.size.width / Common.SPLIT_COUNT, y: i * height
94.               }
95.             }
96.             imagePixelMap.push(
97.               new PictureItem(i * Common.SPLIT_COUNT + j, await imageSource.createPixelMap(decodingOptions)));
98.           }
99.         }
100.       }
101.       imagePackerApi.release();
102.       fileIo.closeSync(fd);
103.     })
104.     return imagePixelMap;
105.   }
106. }

复制代码

• 获取本地图片：首先利用getPhotoAccessHelper获取相册管理模块实例，然后利用getAssets方法获取文件资源，最后利用getAllObjects获取检索效果中的所有文件资产方便展示；
  
• 裁剪图片准备：裁剪图片必要利用@ohos.multimedia.image接口，裁剪前必要申请图片编辑权限，利用requestPermissionsFromUser申请，源码参考[Index.ets];
  

1. /*
2. * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
3. * Licensed under the Apache License, Version 2.0 (the "License");
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an "AS IS" BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
16. import { mediaquery } from '@kit.ArkUI';
17. import { Permissions, abilityAccessCtrl } from '@kit.AbilityKit';
18. import { emitter } from '@kit.BasicServicesKit';
19. import { photoAccessHelper } from '@kit.MediaLibraryKit';
20. import GameRules from '../model/GameRules';
21. import ImagePicker from '../common/ImagePicker';
22. import Logger from '../model/Logger';
23. import PictureItem from '../model/PictureItem';
24. import ImageModel from '../model/ImageModel';
25. import { CommonConstants as Common } from '../common/CommonConstants';
27. const PERMISSIONS: Array<Permissions> = [
28.   'ohos.permission.READ_MEDIA',
29.   'ohos.permission.WRITE_MEDIA',
30.   'ohos.permission.MEDIA_LOCATION',
31.   'ohos.permission.MANAGE_MISSIONS'
32. ];
34. @Entry
35. @Component
36. struct Index {
37.   @State numArray: PictureItem[] = [];
38.   @State imgData: Array<photoAccessHelper.PhotoAsset> = [];
39.   @State @Watch('onTimeOver') gameTime: number = Common.GAME_TIME;
40.   @State @Watch('onImageChange') index: number = Common.ZERO;
41.   @State isLand: boolean = false;
42.   @StorageLink('isGameStart') isGameStart: boolean = false;
43.   private listener = mediaquery.matchMediaSync('screen and (min-aspect-ratio: 1.5) or (orientation: landscape)');
44.   private ImageModel: ImageModel = new ImageModel(getContext(this));
45.   private game: GameRules = new GameRules();
46.   private timer: number = -1;
47.   private isRefresh: boolean = false;
49.   onLand = (mediaQueryResult: mediaquery.MediaQueryResult) => {
50.     Logger.info(`[eTSMediaQuery.Index]onLand: mediaQueryResult.matches=${mediaQueryResult.matches}`);
51.     this.isLand = mediaQueryResult.matches;
52.   };
53.   over = () => {
54.     Logger.info(Common.TAG, 'emitter on , eventID = 0');
55.     for (let i = Common.ZERO; i < Common.LOOP; i++) {
56.       this.numArray[i].index = i;
57.     }
58.     this.gameOver();
59.   };
60.   timeEnd = () => {
61.     Logger.info(Common.TAG, 'emitter on , eventID = 1');
62.     this.gameTime = Common.ZERO;
63.   };
65.   async aboutToAppear() {
66.     this.listener.on('change', this.onLand);
67.     await abilityAccessCtrl.createAtManager().requestPermissionsFromUser(getContext(this), PERMISSIONS);
68.     this.imgData = await this.ImageModel.getAllImg();
69.     Logger.info(Common.TAG, `images = ${this.imgData.length}`);
70.     this.numArray = await this.ImageModel.splitPic(this.index);
71.     // Test case. The game is simulated successfully.
72.     emitter.on({ eventId: Common.ZERO, priority: Common.ZERO }, this.over);
73.     // Test case. End of simulation time.
74.     emitter.on({ eventId: Common.ONE, priority: Common.ZERO }, this.timeEnd);
75.   }
77.   onTimeOver() {
78.     if (this.gameTime === Common.ZERO) {
79.       this.isGameStart = false;
80.       AlertDialog.show({ message: 'TimeOver' });
81.       clearInterval(this.timer);
82.     }
83.   }
85.   async onImageChange() {
86.     this.isRefresh = true;
87.     this.dialogController.close();
88.     this.numArray = [];
89.     this.numArray = await this.ImageModel.splitPic(this.index);
90.     this.init();
91.     this.isGameStart = false;
92.     this.isRefresh = false;
93.   }
95.   init() {
96.     this.gameTime = Common.GAME_TIME;
97.     clearInterval(this.timer);
98.   }
100.   gameOver() {
101.     let count = Common.ZERO;
102.     for (let i = Common.ZERO; i < Common.LOOP; i++) {
103.       if (this.numArray[i].index === i) {
104.         count++;
105.       } else {
106.         count = Common.ZERO;
107.         break;
108.       }
109.     }
110.     if (count === Common.LOOP) {
111.       this.isGameStart = false;
112.       AlertDialog.show({ message: $r('app.string.congratulations') });
113.       clearInterval(this.timer);
114.       this.gameTime = Common.GAME_TIME;
115.     }
116.   }
118.   start() {
119.     this.init();
120.     this.timer = setInterval(() => {
121.       this.gameTime--;
122.     }, Common.TIME_NUMBER)
123.   }
125.   dialogController: CustomDialogController = new CustomDialogController({
126.     builder: ImagePicker({
127.       imagesData: this.imgData,
128.       index: $index
129.     }),
130.     autoCancel: true,
131.     gridCount: Common.GRID_COUNT
132.   })
134.   @Builder
135.   ImageShow() {
136.     Image(this.imgData[this.index].uri)
137.       .id(Common.IMAGE_SHOW)
138.       .width(Common.IMAGE_WIDTH)
139.       .height($r('app.float.imageShow_height'))
140.       .objectFit(ImageFit.Fill)
141.       .onClick(async () => {
142.         if (this.isRefresh) {
143.           return;
144.         }
145.         this.imgData = await this.ImageModel.getAllImg();
146.         setTimeout(() => {
147.           this.dialogController.open();
148.         }, Common.TIME);
149.       })
150.   }
152.   @Builder
153.   ImageGrid(leftMargin: number, topMargin: number) {
154.     Grid() {
155.       ForEach(this.numArray, (item: PictureItem, index) => {
156.         GridItem() {
157.           Image(item.pixelMap)
158.             .width(Common.GRID_IMAGE_WIDTH)
159.             .objectFit(ImageFit.Fill)
160.             .height($r('app.float.grid_image_height'))
161.         }
162.         .id(`image${index}`)
163.         .backgroundColor(item.pixelMap === undefined ? $r('app.color.blank_picture_background') : $r('app.color.picture_background'))
164.         .onClick(() => {
165.           if (this.isRefresh) {
166.             return;
167.           }
168.           if (this.isGameStart) {
169.             this.isRefresh = true;
170.             this.numArray = this.game.gameInit(index, this.numArray);
171.             this.gameOver();
172.             this.isRefresh = false;
173.           }
174.         })
175.       }, (item: PictureItem) => JSON.stringify(item))
176.     }
177.     .id(Common.IMAGE_GRID)
178.     .columnsTemplate(Common.COLUMN_TEMPLATE)
179.     .columnsGap($r('app.float.gap'))
180.     .rowsGap($r('app.float.gap'))
181.     .width(Common.IMAGE_WIDTH)
182.     .height($r('app.float.grid_height'))
183.     .margin({ left: leftMargin, top: topMargin })
184.   }
186.   build() {
187.     Column() {
188.       Row() {
189.         Text(`Time:0${Math.floor(this.gameTime / Common.SECOND)}:${this.gameTime % Common.SECOND < Common.TEN
190.           ? Common.STRING_ZERO + this.gameTime % Common.SECOND : this.gameTime % Common.SECOND}`)
191.           .id(Common.TIME_STRING)
192.           .margin({ top: Common.MARGIN, bottom: Common.MARGIN })
193.       }
195.       if (this.imgData.length > Common.ZERO) {
196.         if (this.isLand) {
197.           Row() {
198.             this.ImageShow()
199.             this.ImageGrid(Common.TEN, Common.ZERO)
200.           }
201.           .margin({ top: Common.MARGIN })
202.         } else {
203.           Column() {
204.             this.ImageShow()
205.             this.ImageGrid(Common.ZERO, Common.FIVE)
206.           }
207.           .margin({ top: Common.MARGIN })
208.         }
209.       }
210.       Button($r('app.string.start'), { type: ButtonType.Capsule, stateEffect: true })
211.         .id(Common.START_BUTTON)
212.         .height($r('app.float.button_height'))
213.         .width(Common.FULL_WIDTH)
214.         .fontSize($r('app.float.button_font_size'))
215.         .margin({ top: Common.MARGIN })
216.         .backgroundColor(this.isGameStart ? $r('app.color.forbid') : $r('app.color.allow'))
217.         .enabled(!this.isGameStart)
218.         .onClick(() => {
219.           this.isGameStart = true;
220.           this.start();
221.           this.numArray = this.game.gameBegin(this.numArray);
222.         })
224.       Button($r('app.string.restart'), { type: ButtonType.Capsule, stateEffect: true })
225.         .id(Common.RESTART_BUTTON)
226.         .height($r('app.float.button_height'))
227.         .width(Common.FULL_WIDTH)
228.         .fontSize($r('app.float.button_font_size'))
229.         .margin({ top: Common.MARGIN })
230.         .backgroundColor(this.isGameStart ? $r('app.color.allow') : $r('app.color.forbid'))
231.         .enabled(this.isGameStart)
232.         .onClick(() => {
233.           this.isGameStart = true;
234.           this.start();
235.           this.numArray = this.game.gameBegin(this.numArray);
236.         })
237.     }
238.     .width(Common.FULL_WIDTH)
239.     .height(Common.FULL_HEIGHT)
240.     .padding({ left: Common.PERCENT, right: Common.PERCENT })
241.   }
242. }

复制代码

• 图片编辑：首先利用createImagePacker创建ImagePacker实例，然后利用fs.open打开文件，调用createImageSource接口创建图片源实例方便操作图片，接下来利用getImageInfo方法获取图片巨细便于分割，最后利用createPixelMap方法传入每一份的尺寸参数完成图片裁剪。
  

以上就是本篇文章所带来的鸿蒙开辟中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在末端找我可全部拿到！
下面是鸿蒙的完整学习门路，展示如下：

除此之外，根据这个学习鸿蒙全栈学习门路，也附带一整套完整的学习【文档+视频】，内容包含如下：
   内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开辟、鸿蒙项目实战）等技术知识点。资助各人在学习鸿蒙路上快速成长！
  鸿蒙【北向应用开辟+南向系统层开辟】文档

鸿蒙【底子+实战项目】视频

鸿蒙面经

为了避免各人在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢各人观看！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。