【HarmonyOS】模仿个人中心头像图片,调用系统相机拍照,从系统相册选择图片和圆形裁剪显示 (二)

本文主要是介绍【HarmonyOS】模仿个人中心头像图片,调用系统相机拍照,从系统相册选择图片和圆形裁剪显示 (二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【HarmonyOS】模仿个人中心头像图片,调用系统相机拍照,从系统相册选择图片和圆形裁剪显示 (二)

Demo效果展示:

在这里插入图片描述

方案思路:

1.修改调用相机的方式,使用cameraKit进行相机的调用,拍照后返回图片url进行处理。
2.裁剪View,使用画布进行取景框的效果展示

手势拖动和放大缩小图片,裁剪计算在第三章进行讲解。

Demo示例代码:

UI主界面


import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { image } from '@kit.ImageKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import { router } from '@kit.ArkUI';
import { cameraPicker as picker } from '@kit.CameraKit';
import { camera } from '@kit.CameraKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { CropView } from './CropView';

struct Index {private TAG: string = "imageTest"; mUserPixel: image.PixelMap | undefined = undefined; mTargetPixel: image.PixelMap | undefined = undefined;/*** 拍照获取图片*/private async getPictureFromCamera(){try {let pickerProfile: picker.PickerProfile = {// 相机的位置。cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK};let pickerResult: picker.PickerResult = await picker.pick(getContext(),[picker.PickerMediaType.PHOTO],pickerProfile);console.log(this.TAG, "the pick pickerResult is:" + JSON.stringify(pickerResult));// 成功才处理if(pickerResult && pickerResult.resultCode == 0){await this.getImageByPath(pickerResult.resultUri);}} catch (error) {let err = error as BusinessError;console.error(this.TAG, `the pick call failed. error code: ${err.code}`);}}/*** 相册选择图片*/private async getPictureFromAlbum() {let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;PhotoSelectOptions.maxSelectNumber = 1;let photoPicker = new photoAccessHelper.PhotoViewPicker();let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);let albumPath = photoSelectResult.photoUris[0];console.info(this.TAG, 'getPictureFromAlbum albumPath= ' + albumPath);await this.getImageByPath(albumPath);}/*** 获取图片pixelMap* @param path*/private async getImageByPath(path: string) {console.info(this.TAG, 'getImageByPath path: ' + path);try {// 读取图片为bufferconst file = fs.openSync(path, fs.OpenMode.READ_ONLY);let photoSize = fs.statSync(file.fd).size;console.info(this.TAG, 'Photo Size: ' + photoSize);let buffer = new ArrayBuffer(photoSize);fs.readSync(file.fd, buffer);fs.closeSync(file);// 解码成PixelMapconst imageSource = image.createImageSource(buffer);console.log(this.TAG, 'imageSource: ' + JSON.stringify(imageSource));this.mUserPixel = await imageSource.createPixelMap({});} catch (e) {console.info(this.TAG, 'getImage e: ' + JSON.stringify(e));}}build() {Scroll(){Column() {Text("点击拍照").fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.getPictureFromCamera();})Text("相册选择").fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.getPictureFromAlbum();})Image(this.mUserPixel).objectFit(ImageFit.Fill).width('100%').aspectRatio(1)Text("图片裁剪").fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.cropImage();// router.pushUrl({//   url: "pages/crop"// })})CropView({ mImg: $mUserPixel }).width('100%').aspectRatio(1)Text("裁剪效果").fontSize(50).fontWeight(FontWeight.Bold)Image(this.mTargetPixel).width('100%').aspectRatio(1).borderRadius(200)}.height(3000).width('100%')}.height('100%').width('100%')}private async cropImage(){if(!this.mUserPixel){return;}let cp = await this.copyPixelMap(this.mUserPixel);let region: image.Region = { x: 0, y: 0, size: { width: 400, height: 400 } };cp.cropSync(region);}async copyPixelMap(pixel: PixelMap): Promise<PixelMap> {const info: image.ImageInfo = await pixel.getImageInfo();const buffer: ArrayBuffer = new ArrayBuffer(pixel.getPixelBytesNumber());await pixel.readPixelsToBuffer(buffer);const opts: image.InitializationOptions = {editable: true,pixelFormat: image.PixelMapFormat.RGBA_8888,size: { height: info.size.height, width: info.size.width }};return image.createPixelMap(buffer, opts);}}

CropView 裁剪View


interface LoadResult {width: number;height: number;componentWidth: number;componentHeight: number;loadingStatus: number;contentWidth: number;contentHeight: number;contentOffsetX: number;contentOffsetY: number;
}
export struct CropView {private TAG: string = "CropView";private mRenderingContextSettings: RenderingContextSettings = new RenderingContextSettings(true);private mCanvasRenderingContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mRenderingContextSettings); mImg: PixelMap;private onLoadImgComplete = (msg: LoadResult) => {}private onCanvasReady = ()=>{if(!this.mCanvasRenderingContext2D){console.error(this.TAG, "onCanvasReady error mCanvasRenderingContext2D null !");return;}let cr = this.mCanvasRenderingContext2D;// 画布颜色cr.fillStyle = '#AA000000';let height = cr.height;let width = cr.width;cr.fillRect(0, 0, width, height);// 圆形的中心点let centerX = width / 2;let centerY = height / 2;// 圆形半径let radius = Math.min(width, height) / 2 - 100;cr.globalCompositeOperation = 'destination-out'cr.fillStyle = 'white'cr.beginPath();cr.arc(centerX, centerY, radius, 0, 2 * Math.PI);cr.fill();cr.globalCompositeOperation = 'source-over';cr.strokeStyle = '#FFFFFF';cr.beginPath();cr.arc(centerX, centerY, radius, 0, 2 * Math.PI);cr.closePath();cr.lineWidth = 1;cr.stroke();}build() {Stack() {// 黑色底图Row().width("100%").height("100%").backgroundColor(Color.Black)// 用户图Image(this.mImg).objectFit(ImageFit.Fill).width('100%').aspectRatio(1).onComplete(this.onLoadImgComplete)// 取景框Canvas(this.mCanvasRenderingContext2D).width('100%').height('100%').backgroundColor(Color.Transparent).onReady(this.onCanvasReady).clip(true).backgroundColor("#00000080")}.width("100%").height("100%")}
}

这篇关于【HarmonyOS】模仿个人中心头像图片,调用系统相机拍照,从系统相册选择图片和圆形裁剪显示 (二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1121809

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

跨国公司撤出在华研发中心的启示:中国IT产业的挑战与机遇

近日,IBM中国宣布撤出在华的两大研发中心,这一决定在IT行业引发了广泛的讨论和关注。跨国公司在华研发中心的撤出,不仅对众多IT从业者的职业发展带来了直接的冲击,也引发了人们对全球化背景下中国IT产业竞争力和未来发展方向的深思。面对这一突如其来的变化,我们应如何看待跨国公司的决策?中国IT人才又该如何应对?中国IT产业将何去何从?本文将围绕这些问题展开探讨。 跨国公司撤出的背景与

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听