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

举报
liuzhen007 发表于 2021/05/13 21:47:51 2021/05/13
【摘要】 前言 图片处理是目前移动端APP比较常用的需求之一，作为移动端系统平台，HarmonyOS图像模块已经支持了图像业务的开发。比如，常见的图像解码、图像编码、基本的位图操作、图像编辑等。当然，也支持通过接口组合来实现更复杂的图像处理逻辑。今天，我们就来看一下。 正文 本文以图片的旋转、剪裁、缩放、镜像四种常见操作为例，给大家介绍HarmonyOS图像编解码的相关开发技巧。

目录

前言

正文

步骤一、创建工程

步骤二、将图片转换为PixelMap

步骤三、图片参数设置

步骤四、图片镜像操作

步骤五、运行演示

结果

前言

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

正文

本文以图片的旋转、剪裁、缩放、镜像四种常见操作为例，给大家介绍HarmonyOS图像编解码的相关开发技巧。

说真的，这是本人第一次使用鸿蒙系统处理图像的API，上手不是那么快。

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

​

遇山开道、遇河搭桥。

来吧，走起！

步骤一、创建工程

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

传送门：【模块-Java布局】十分钟挑战鸿蒙Codelab组件

创建方式：

​

步骤二、将图片转换为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，使用模拟器运行时，有时会崩溃。

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

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
图像处理 镜像服务 IMS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入