写点什么

【图片旋转】十五分钟挑战鸿蒙 Codelab 组件

用户头像
liuzhen007
关注
发布于: 2021 年 05 月 11 日
【图片旋转】十五分钟挑战鸿蒙Codelab组件

目录

前言

正文

步骤一、创建工程

步骤二、将图片转换为 PixelMap

步骤三、图片参数设置

步骤四、图片镜像操作

步骤五、运行演示

结果

前言

图片处理是目前移动端 APP 比较常用的需求之一,作为移动端系统平台,HarmonyOS 图像模块已经支持了图像业务的开发。比如,常见的图像解码、图像编码、基本的位图操作、图像编辑等。当然,也支持通过接口组合来实现更复杂的图像处理逻辑。今天,我们就来看一下。

正文

本文以图片的旋转、剪裁、缩放、镜像四种常见操作为例,给大家介绍 HarmonyOS 图像编解码的相关开发技巧。说真的,这是本人第一次使用鸿蒙系统处理图像的 API,上手不是那么快。


第一次使用鸿蒙系统的图像 API,姿势不对的话,请各位老司机纠正。


遇山开道、遇河搭桥。

来吧,走起!

步骤一、创建工程

首先,创建一个空白的 java 工程,这种方式需要自己书写对应的图片操作执行类,也可以使用上一篇文章中的 demo,在其基础上进行修改。

创建方式:

步骤二、将图片转换为 PixelMap

鸿蒙系统图像 API 就是将所支持格式的存档图片解码成统一的 PixelMap 图像,再用于后续图像显示或其他处理。其中,常规的操作包括旋转、缩放、剪裁等。类似于点播系统将上传的各类视频和音频需要转换成统一的音频格式和视频格式,比如常见的 H264+AAC。


目前,鸿蒙系统图像 API 能够支持的格式,包括 JPEG、PNG、GIF、HEIF、WebP、BMP。


本文相向您介绍的函数 getPixelMapFromResource,其功能就是将 resources/base/media 目录下的图片资源转换为 PixelMap 图像,其中入参为图片的资源 ID,

getPixelMapFromResource 方法是本文的关键方法,具体实现如下:

/**     * 通过图片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;    }
复制代码

步骤三、图片参数设置

本文使用图片是 mac OS 10.15 系统的桌面背景图片,尺寸为 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);
复制代码

步骤四、图片镜像操作

图片镜像操作就是对图片以纵坐标为轴制作对称图片。image 绘制的时候会调用 onDraw 方法,本例采用对图像 Canvas 画布的镜像操作实现图片的镜像显示,示例代码如下所示:

private void mirrorImage(PixelMap pixelMap) {     scaleX = -scaleX;     image.addDrawTask(             new Component.DrawTask() {                 @Override                 public 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());                     }                 }             }); }
复制代码

步骤五、运行演示

截图是 IDE 的完整代码:

执行结果:

结果

本文虽然可以把 demo 运行起来了,但是不够完美,其实之前在 windows 上跑通过。但是这次用的是 mac OS 的本子,因为今天是最后的截止时间。没办法,自己又在 mac 上搞了一遍,不知道是不是鸿蒙图像 API 在 mac 上存在兼容问题,还是自己写出了新 bug,使用模拟器运行时,有时会崩溃。


但是,不管怎么说,鸿蒙也一直在进步,期待以后更好用。

发布于: 2021 年 05 月 11 日阅读数: 517
用户头像

liuzhen007

关注

敲代码,搞开发。 2021.05.01 加入

本人深耕音视频技术,走全栈路线,前后端通吃,兼顾各端与流媒体服务器。 博客主页地址:https://liuzhen.blog.csdn.net 微信公众号:玩转音视频 欢迎交流学习!

评论

发布
暂无评论
【图片旋转】十五分钟挑战鸿蒙Codelab组件