[鸿蒙/Harmony] HarmonyOS Codelab挑战赛记录之图片的四种常见操作

2023-10-25 10:51
文章标签 常见 操作 图片 记录 四种 挑战赛 鸿蒙 harmonyos harmony codelab

本文主要是介绍[鸿蒙/Harmony] HarmonyOS Codelab挑战赛记录之图片的四种常见操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上一期介绍了组件模块-Java 布局，这一期主要展示图片的四种常见操作

目录

1.HarmonyOS开发工具的安装

2.组件模块-Java 布局

3.基于图像模块实现图库图片的四种常见操作

 1.准备一张像素尺寸为1024*768的图片

放到ImageDemo\entry\src\main\resources\base\media目录下

2.设计布局样式。功能上我打算能使图片旋转、裁剪、缩放、镜像

所以我需要创建的布局里边有四个按钮，以及一个图片控件。我创建了一个ability_pixel_map的layout样式

相对来讲比较简单，

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><DirectionalLayoutohos:height="200"ohos:width="match_parent"ohos:orientation="horizontal"ohos:layout_direction="locale"ohos:top_margin="20vp"><Buttonohos:id="$+id:whirl_image"ohos:height="50"ohos:width="200"ohos:text="旋转"ohos:text_size="18fp"/><Buttonohos:id="$+id:crop_image"ohos:height="50"ohos:width="200"ohos:text="裁剪"ohos:text_size="18fp"/><Buttonohos:id="$+id:scale_image"ohos:height="50"ohos:width="200"ohos:text="缩放"ohos:text_size="18fp"/><Buttonohos:id="$+id:mirror_image"ohos:height="50"ohos:width="200"ohos:text="镜像"ohos:text_size="18fp"/></DirectionalLayout><Imageohos:id="$+id:image"ohos:height="1024"ohos:width="1024"ohos:background_element="#000"/></DirectionalLayout>

设计效果（为了更直观看到Image，我给他设置了黑色背景）

3.在slice文件夹下继续创建一个类：PixelMapSlice 并且继承 AbilitySlice

4.编写一个图片转换的方法，可以将图片的资源id转换成PixelMap

（这里的代码主要展示对图片处理的核心操作）

    /*** 通过图片ID返回PixelMap ** @param resourceId 图片的资源ID * @return 图片的PixelMap*/private PixelMap getPixelMapFromResource(int resourceId) {InputStream inputStream = null;try {// 创建图像数据源ImageSource对象 inputStream = getContext().getResourceManager().getResource(resourceId);ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();srcOpts.formatHint = "image/jpg";ImageSource imageSource = ImageSource.create(inputStream, srcOpts);// 设置图片参数。本例使用图片像素的尺寸为1024*768// 点击一次旋转按钮会进行90度的旋转，// 缩放是按照2：1的比例进行缩放，// 剪裁是保证宽度不变的情况下对高度进行400像素的剪裁，ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();// 旋转（通过改变whirlCount变量控制旋转）decodingOptions.rotateDegrees = 90 * whirlCount;// 缩放（通过改变isScale变量控制缩放）decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);// 剪裁（通过改变isCorp变量控制裁剪区域）decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;return imageSource.createPixelmap(decodingOptions);} catch (IOException e) {HiLog.info(LABEL_LOG, "IOException");} catch (NotExistException e) {HiLog.info(LABEL_LOG, "NotExistException");} finally {if (inputStream != null) {try {inputStream.close();} catch (IOException e) {HiLog.info(LABEL_LOG, "inputStream IOException");}}}return null;}

5.完整代码

package com.huawei.codelab.slice;import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Image;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.render.PixelMapHolder;
import ohos.global.resource.NotExistException;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.media.image.ImageSource;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Rect;
import ohos.media.image.common.Size;import java.io.IOException;
import java.io.InputStream;/*** 图像主页面 */
public class PixelMapSlice extends AbilitySlice {private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "PixelMapSlice");Image image;PixelMap imagePixelMap;Button whirlImageBtn;Button cropImageBtn;Button scaleImageBtn;Button mirrorImageBtn;private int whirlCount = 0;private boolean isCorp = false;private boolean isScale = false;private boolean isMirror = false;private float scaleX = 1.0f;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_pixel_map);initView();}private void initView() {if (findComponentById(ResourceTable.Id_whirl_image) instanceof Button) {whirlImageBtn = (Button) findComponentById(ResourceTable.Id_whirl_image);}if (findComponentById(ResourceTable.Id_crop_image) instanceof Button) {cropImageBtn = (Button) findComponentById(ResourceTable.Id_crop_image);}if (findComponentById(ResourceTable.Id_scale_image) instanceof Button) {scaleImageBtn = (Button) findComponentById(ResourceTable.Id_scale_image);}if (findComponentById(ResourceTable.Id_mirror_image) instanceof Button) {mirrorImageBtn = (Button) findComponentById(ResourceTable.Id_mirror_image);}if (findComponentById(ResourceTable.Id_image) instanceof Image) {image = (Image) findComponentById(ResourceTable.Id_image);}whirlImageBtn.setClickedListener(new ButtonClick());cropImageBtn.setClickedListener(new ButtonClick());scaleImageBtn.setClickedListener(new ButtonClick());mirrorImageBtn.setClickedListener(new ButtonClick());}private class ButtonClick implements Component.ClickedListener {@Overridepublic void onClick(Component component) {int btnId = component.getId();switch (btnId) {case ResourceTable.Id_whirl_image:// 旋转图片 whirlCount++;isCorp = false;isScale = false;isMirror = false;imagePixelMap = getPixelMapFromResource(ResourceTable.Media_ic_sponge_baby);image.setPixelMap(imagePixelMap);break;case ResourceTable.Id_crop_image:// 剪裁图片 whirlCount = 0;isCorp = !isCorp;isScale = false;isMirror = false;imagePixelMap = getPixelMapFromResource(ResourceTable.Media_ic_sponge_baby);image.setPixelMap(imagePixelMap);break;case ResourceTable.Id_scale_image:// 缩放图片 whirlCount = 0;isCorp = false;isScale = !isScale;isMirror = false;imagePixelMap = getPixelMapFromResource(ResourceTable.Media_ic_sponge_baby);image.setPixelMap(imagePixelMap);break;case ResourceTable.Id_mirror_image:// 镜像图片 whirlCount = 0;isCorp = false;isScale = false;isMirror = true;imagePixelMap = getPixelMapFromResource(ResourceTable.Media_ic_sponge_baby);mirrorImage(imagePixelMap);image.setPixelMap(imagePixelMap);break;default:break;}}}private void mirrorImage(PixelMap pixelMap) {scaleX = -scaleX;image.addDrawTask(new Component.DrawTask() {@Overridepublic void onDraw(Component component, Canvas canvas) {if (isMirror) {isMirror = false;PixelMapHolder pmh = new PixelMapHolder(pixelMap);canvas.scale(scaleX,1.0f,(float) pixelMap.getImageInfo().size.width / 2,(float) pixelMap.getImageInfo().size.height / 2);canvas.drawPixelMapHolder(pmh,0,0,new Paint());}}});}/*** 通过图片ID返回PixelMap ** @param resourceId 图片的资源ID * @return 图片的PixelMap*/private PixelMap getPixelMapFromResource(int resourceId) {InputStream inputStream = null;try {// 创建图像数据源ImageSource对象 inputStream = getContext().getResourceManager().getResource(resourceId);ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();srcOpts.formatHint = "image/jpg";ImageSource imageSource = ImageSource.create(inputStream, srcOpts);// 设置图片参数。本例使用图片像素的尺寸为1024*768// 点击一次旋转按钮会进行90度的旋转，// 缩放是按照2：1的比例进行缩放，// 剪裁是保证宽度不变的情况下对高度进行400像素的剪裁，ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();// 旋转 decodingOptions.rotateDegrees = 90 * whirlCount;// 缩放 decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);// 剪裁 decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;return imageSource.createPixelmap(decodingOptions);} catch (IOException e) {HiLog.info(LABEL_LOG, "IOException");} catch (NotExistException e) {HiLog.info(LABEL_LOG, "NotExistException");} finally {if (inputStream != null) {try {inputStream.close();} catch (IOException e) {HiLog.info(LABEL_LOG, "inputStream IOException");}}}return null;}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

6.运行应用。我们通过上期组件模块-Java 布局 MainAbilitySlice类的点击事件，更改TabListSlice为PixelMapSlice启动我们的布局

运行效果

 

点击这里可以去到HarmonyOS开发文档学习基于图像模块实现图库图片的四种常见操作

 

这篇关于[鸿蒙/Harmony] HarmonyOS Codelab挑战赛记录之图片的四种常见操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/282063。

相关文章

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

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

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

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

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring MVC 图片上传

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-
阅读更多...
记录每次更新到仓库 —— Git 学习笔记 10

记录每次更新到仓库 —— Git 学习笔记 10

记录每次更新到仓库 文章目录 文件的状态三个区域检查当前文件状态跟踪新文件取消跟踪（un-tracking）文件重新跟踪（re-tracking）文件暂存已修改文件忽略某些文件查看已暂存和未暂存的修改提交更新跳过暂存区删除文件移动文件参考资料 咱们接着很多天以前的 取得Git仓库 这篇文章继续说。 文件的状态 不管是通过哪种方法，现在我们已经有了一个仓库，并从这个仓
阅读更多...
Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式，需要不断条件和优化提示词。记录一下调整好的提示词，以后在继续优化迭代。 1. 提示词 英文版本： You are an AI assistant tasked with extracting the content of
阅读更多...
动手学深度学习【数据操作+数据预处理】

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA
阅读更多...
线程的四种操作

线程的四种操作

所属专栏：Java学习        1. 线程的开启 start和run的区别： run：描述了线程要执行的任务，也可以称为线程的入口 start：调用系统函数，真正的在系统内核中创建线程（创建PCB，加入到链表中），此处的start会根据不同的系统，分别调用不同的api，创建好之后的线程，再单独去执行run（所以说，start的本质是调用系统api，系统的api
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2