返回发烧友论坛
发 帖  

[文章]基于HarmonyOS图像编解码，实现图片的旋转、剪裁、缩放、镜像

红旧衫
2021-09-17 17:19:30
阅读量0
HarmonyOS
0
5
1. 介绍      
HarmonyOS图像模块支持图像业务的开发，常见功能如图像解码、图像编码、基本的位图操作、图像编辑等。当然，也支持通过接口组合来实现更复杂的图像处理逻辑。本教程以图库图片中旋转、剪裁、缩放、镜像四种常见操作为例，给大家介绍HarmonyOS图像编解码的相关开发指导。

2. 搭建HarmonyOS环境   
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试
3. 将图片转换为PixelMap      
图像解码就是将所支持格式的存档图片解码成统一的PixelMap图像，用于后续图像显示或其他处理，比如旋转、缩放、剪裁等。当前支持格式包括JPEG、PNG、GIF、HEIF、WebP、BMP。本例为您提供了getPixelMapFromResource函数，可以将resources/base/media目录下的图片资源转换为PixelMap图像，其中入参为图片的资源ID，
  1. private PixelMap getPixelMapFromResource(int resourceId) {
  2.     InputStream inputStream = null;
  3.     try {
  4.         // 创建图像数据源ImageSource对象
  5.         inputStream = getContext().getResourceManager().getResource(resourceId);
  6.         ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
  7.         srcOpts.formatHint = "image/jpg";
  8.         ImageSource imageSource = ImageSource.create(inputStream, srcOpts);


  11.         // 设置图片参数
  12.         ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  13.         return imageSource.createPixelmap(decodingOptions);
  14.     } catch (IOException e) {
  15.         HiLog.info(LABEL_LOG, "IOException");
  16.     } catch (NotExistException e) {
  17.         HiLog.info(LABEL_LOG, "NotExistException");
  18.     } finally {
  19.         if (inputStream != null) {
  20.             try {
  21.                 inputStream.close();
  22.             } catch (IOException e) {
  23.                 HiLog.info(LABEL_LOG, "inputStream IOException");
  24.             }
  25.         }
  26.     }
  27.     return null;
  28. }
复制代码
4. 图片参数设置
本例使用图片像素的尺寸为1024*768，点击一次旋转按钮会进行90度的旋转，缩放是按照2：1的比例进行缩放，剪裁是保证宽度不变的情况下对高度进行400像素的剪裁，相关参数设置如下所示：
  1. // 设置图片参数
  2. ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  3. // 旋转
  4. decodingOptions.rotateDegrees = 90 * whirlCount;
  5. // 缩放
  6. decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);
  7. // 剪裁
  8. decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);
复制代码
5. 图片镜像操作
图片镜像操作就是对图片以纵坐标为轴制作对称图片。image绘制的时候会调用onDraw方法，本例采用对图像Canvas画布的镜像操作实现图片的镜像显示，示例代码如下所示：
  1. private void mirrorImage(PixelMap pixelMap) {
  2.     scaleX = -scaleX;
  3.     image.addDrawTask(
  4.             new Component.DrawTask() {
  5.                 [url=home.php?mod=space&uid=2735960]@Override[/url]
  6.                 public void onDraw(Component component, Canvas canvas) {
  7.                     if (isMirror) {
  8.                         isMirror = false;
  9.                         PixelMapHolder pmh = new PixelMapHolder(pixelMap);
  10.                         canvas.scale(
  11.                                 scaleX,
  12.                                 1.0f,
  13.                                 (float) pixelMap.getImageInfo().size.width / 2,
  14.                                 (float) pixelMap.getImageInfo().size.height / 2);
  15.                         canvas.drawPixelMapHolder(
  16.                                 pmh,
  17.                                 0,
  18.                                 0,
  19.                                 new Paint());
  20.                     }
  21.                 }
  22.             });
  23. }
复制代码
6. 完整示例   
以手机为例，初始化页面如图1所示，依次点击按钮可以实现图片的旋转、剪裁、缩放、镜像，效果如下所示（您需要准备一张像素尺寸为1024*768的图片，放到ImageDemoentrysrcmainresourcesbasemedia目录下）：
示例代码如下：
  1. import com.huawei.codelab.ResourceTable;

  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.Button;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.Image;
  8. import ohos.agp.render.Canvas;
  9. import ohos.agp.render.Paint;
  10. import ohos.agp.render.PixelMapHolder;
  11. import ohos.global.resource.NotExistException;
  12. import ohos.hiviewdfx.HiLog;
  13. import ohos.hiviewdfx.HiLogLabel;
  14. import ohos.media.image.ImageSource;
  15. import ohos.media.image.PixelMap;
  16. import ohos.media.image.common.PixelFormat;
  17. import ohos.media.image.common.Rect;
  18. import ohos.media.image.common.Size;

  20. import java.io.IOException;
  21. import java.io.InputStream;

  23. /**
  24. * 图像主页面
  25. */
  26. public class MainAbilitySlice extends AbilitySlice {
  27.     private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "MainAbilitySlice");
  28.     Image image;
  29.     PixelMap imagePixelMap;
  30.     Button whirlImageBtn;
  31.     Button cropImageBtn;
  32.     Button scaleImageBtn;
  33.     Button mirrorImageBtn;
  34.     private int whirlCount = 0;
  35.     private boolean isCorp = false;
  36.     private boolean isScale = false;
  37.     private boolean isMirror = false;
  38.     private float scaleX = 1.0f;

  40.     @Override
  41.     public void onStart(Intent intent) {
  42.         super.onStart(intent);
  43.         super.setUIContent(ResourceTable.Layout_ability_main);
  44.         initView();
  45.     }

  47.     private void initView() {
  48.         if (findComponentById(ResourceTable.Id_whirl_image) instanceof Button) {
  49.             whirlImageBtn = (Button) findComponentById(ResourceTable.Id_whirl_image);
  50.         }
  51.         if (findComponentById(ResourceTable.Id_crop_image) instanceof Button) {
  52.             cropImageBtn = (Button) findComponentById(ResourceTable.Id_crop_image);
  53.         }
  54.         if (findComponentById(ResourceTable.Id_scale_image) instanceof Button) {
  55.             scaleImageBtn = (Button) findComponentById(ResourceTable.Id_scale_image);
  56.         }
  57.         if (findComponentById(ResourceTable.Id_mirror_image) instanceof Button) {
  58.             mirrorImageBtn = (Button) findComponentById(ResourceTable.Id_mirror_image);
  59.         }
  60.         if (findComponentById(ResourceTable.Id_image) instanceof Image) {
  61.             image = (Image) findComponentById(ResourceTable.Id_image);
  62.         }
  63.         whirlImageBtn.setClickedListener(new ButtonClick());
  64.         cropImageBtn.setClickedListener(new ButtonClick());
  65.         scaleImageBtn.setClickedListener(new ButtonClick());
  66.         mirrorImageBtn.setClickedListener(new ButtonClick());
  67.     }

  69.     private class ButtonClick implements Component.ClickedListener {
  70.         @Override
  71.         public void onClick(Component component) {
  72.             int btnId = component.getId();
  73.             switch (btnId) {
  74.                 case ResourceTable.Id_whirl_image:
  75.                     // 旋转图片
  76.                     whirlCount++;
  77.                     isCorp = false;
  78.                     isScale = false;
  79.                     isMirror = false;
  80.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);
  81.                     image.setPixelMap(imagePixelMap);
  82.                     break;
  83.                 case ResourceTable.Id_crop_image:
  84.                     // 剪裁图片
  85.                     whirlCount = 0;
  86.                     isCorp = !isCorp;
  87.                     isScale = false;
  88.                     isMirror = false;
  89.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);
  90.                     image.setPixelMap(imagePixelMap);
  91.                     break;
  92.                 case ResourceTable.Id_scale_image:
  93.                     // 缩放图片
  94.                     whirlCount = 0;
  95.                     isCorp = false;
  96.                     isScale = !isScale;
  97.                     isMirror = false;
  98.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);
  99.                     image.setPixelMap(imagePixelMap);
  100.                     break;
  101.                 case ResourceTable.Id_mirror_image:
  102.                     // 镜像图片
  103.                     whirlCount = 0;
  104.                     isCorp = false;
  105.                     isScale = false;
  106.                     isMirror = true;
  107.                     imagePixelMap = getPixelMapFromResource(ResourceTable.Media_shanghai);
  108.                     mirrorImage(imagePixelMap);
  109.                     image.setPixelMap(imagePixelMap);
  110.                     break;
  111.                 default:
  112.                     break;
  113.             }
  114.         }
  115.     }

  117.     private void mirrorImage(PixelMap pixelMap) {
  118.         scaleX = -scaleX;
  119.         image.addDrawTask(
  120.                 new Component.DrawTask() {
  121.                     @Override
  122.                     public void onDraw(Component component, Canvas canvas) {
  123.                         if (isMirror) {
  124.                             isMirror = false;
  125.                             PixelMapHolder pmh = new PixelMapHolder(pixelMap);
  126.                             canvas.scale(
  127.                                     scaleX,
  128.                                     1.0f,
  129.                                     (float) pixelMap.getImageInfo().size.width / 2,
  130.                                     (float) pixelMap.getImageInfo().size.height / 2);
  131.                             canvas.drawPixelMapHolder(
  132.                                     pmh,
  133.                                     0,
  134.                                     0,
  135.                                     new Paint());
  136.                         }
  137.                     }
  138.                 });
  139.     }

  141.     /**
  142.      * 通过图片ID返回PixelMap
  143.      *
  144.      * [url=home.php?mod=space&uid=3142012]@param[/url] resourceId 图片的资源ID
  145.      * [url=home.php?mod=space&uid=1141835]@Return[/url] 图片的PixelMap
  146.      */
  147.     private PixelMap getPixelMapFromResource(int resourceId) {
  148.         InputStream inputStream = null;
  149.         try {
  150.             // 创建图像数据源ImageSource对象
  151.             inputStream = getContext().getResourceManager().getResource(resourceId);
  152.             ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
  153.             srcOpts.formatHint = "image/jpg";
  154.             ImageSource imageSource = ImageSource.create(inputStream, srcOpts);

  156.             // 设置图片参数
  157.             ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  158.             // 旋转
  159.             decodingOptions.rotateDegrees = 90 * whirlCount;
  160.             // 缩放
  161.             decodingOptions.desiredSize = new Size(isScale ? 512 : 0, isScale ? 384 : 0);
  162.             // 剪裁
  163.             decodingOptions.desiredRegion = new Rect(0, 0, isCorp ? 1024 : 0, isCorp ? 400 : 0);
  164.             decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;
  165.             return imageSource.createPixelmap(decodingOptions);
  166.         } catch (IOException e) {
  167.             HiLog.info(LABEL_LOG, "IOException");
  168.         } catch (NotExistException e) {
  169.             HiLog.info(LABEL_LOG, "NotExistException");
  170.         } finally {
  171.             if (inputStream != null) {
  172.                 try {
  173.                     inputStream.close();
  174.                 } catch (IOException e) {
  175.                     HiLog.info(LABEL_LOG, "inputStream IOException");
  176.                 }
  177.             }
  178.         }
  179.         return null;
  180.     }

  182.     @Override
  183.     public void onActive() {
  184.         super.onActive();
  185.     }

  187.     @Override
  188.     public void onForeground(Intent intent) {
  189.         super.onForeground(intent);
  190.     }
  191. }
复制代码
布局代码如下：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">

  8.     <Text
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:layout_alignment="horizontal_center"
  12.         ohos:text="HarmonyOS图像开发"
  13.         ohos:text_size="80"
  14.         ohos:top_margin="40vp"
  15.         />

  17.     <DirectionalLayout
  18.         xmlns:ohos="http://schemas.huawei.com/res/ohos"
  19.         ohos:height="match_content"
  20.         ohos:width="match_content"
  21.         ohos:layout_alignment="horizontal_center"
  22.         ohos:orientation="horizontal"
  23.         ohos:top_margin="20vp">

  25.         <Button
  26.             ohos:id="$+id:whirl_image"
  27.             ohos:height="match_content"
  28.             ohos:width="match_content"
  29.             ohos:background_element="$graphic:background_button"
  30.             ohos:padding="12vp"
  31.             ohos:right_margin="5vp"
  32.             ohos:text="旋转"
  33.             ohos:text_size="20vp"
  34.             ohos:top_margin="10vp">
  35.         </Button>

  37.         <Button
  38.             ohos:id="$+id:crop_image"
  39.             ohos:height="match_content"
  40.             ohos:width="match_content"
  41.             ohos:background_element="$graphic:background_button"
  42.             ohos:left_margin="5vp"
  43.             ohos:padding="12vp"
  44.             ohos:text="剪裁"
  45.             ohos:text_size="20vp"
  46.             ohos:top_margin="10vp">
  47.         </Button>

  49.         <Button
  50.             ohos:id="$+id:scale_image"
  51.             ohos:height="match_content"
  52.             ohos:width="match_content"
  53.             ohos:background_element="$graphic:background_button"
  54.             ohos:left_margin="5vp"
  55.             ohos:padding="12vp"
  56.             ohos:text="缩放"
  57.             ohos:text_size="20vp"
  58.             ohos:top_margin="10vp">
  59.         </Button>

  61.         <Button
  62.             ohos:id="$+id:mirror_image"
  63.             ohos:height="match_content"
  64.             ohos:width="match_content"
  65.             ohos:background_element="$graphic:background_button"
  66.             ohos:left_margin="5vp"
  67.             ohos:padding="12vp"
  68.             ohos:text="镜像"
  69.             ohos:text_size="20vp"
  70.             ohos:top_margin="10vp"/>
  71.     </DirectionalLayout>

  73.     <Image
  74.         ohos:id="$+id:image"
  75.         ohos:height="match_content"
  76.         ohos:width="match_content"
  77.         ohos:image_src="$media:shanghai.jpg"
  78.         ohos:layout_alignment="horizontal_center"
  79.         ohos:top_margin="20vp">
  80.     </Image>

  82. </DirectionalLayout>
复制代码
此外您还需在resource/base/graphic目录下添加background_button.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.        ohos:shape="rectangle">
  4.     <corners
  5.         ohos:radius="40"/>
  6.     <solid
  7.         ohos:color="#e9e9e9"/>
  8. </shape>
复制代码
说明
以上代码仅demo演示参考使用，产品化的代码需要考虑数据校验和国际化。
7. 恭喜你
通过对本教程的学习，你已经学会HarmonyOS图像编解码的基本操作。


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友