使用PixelMap完成图像变换
================

图片处理指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、[位图操作](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-pixelmap-operation)，本文介绍图像变换。

#### 开发步骤

图像变换相关API的详细介绍请参见[API参考](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-pixelmap)。

1.  完成[图片解码](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-decoding)，获取PixelMap对象。
    
2.  获取图片信息。
    
    import { BusinessError } from '@kit.BasicServicesKit';
    // 获取图片大小。
    pixelMap.getImageInfo().then( (info : image.ImageInfo) => {
      console.info('info.width = ' + info.size.width);
      console.info('info.height = ' + info.size.height);
    }).catch((err : BusinessError) => {
      console.error("Failed to obtain the image pixel map information.And the error is: " + err);
    });
    
3.  进行图像变换操作。
    
    原图：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/58/v3/2ovxeO5xTyCo1jEYSeyhdQ/zh-cn_image_0000002594668844.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=61443C0E909BAEB18FF4F94E63F622B4AE77E8BE3890533C3509F8A317C2C016)
    
    *   裁剪
        
        // x：裁剪起始点横坐标0。
        // y：裁剪起始点纵坐标0。
        // height：裁剪高度400，方向为从上往下（裁剪后的图片高度为400）。
        // width：裁剪宽度400，方向为从左到右（裁剪后的图片宽度为400）。
        pixelMap.crop({x: 0, y: 0, size: { height: 400, width: 400 } });
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/12/v3/3Pna19mdRfGDIiuQN4nYlQ/zh-cn_image_0000002594828772.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=E6E51F0F27F9A489238D5781AD32AE6F33CD7BCAA9D4CDEA702A2A00FC8E8776)
        
    *   缩放
        
        // 宽为原来的0.5。
        // 高为原来的0.5。
        pixelMap.scale(0.5, 0.5);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e9/v3/XFnCBD-wSmuCmDyQb1GgCw/zh-cn_image_0000002625188219.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=E4A8EB52BE8C1FC3BE59176C95AC8B68505FC439178809A907F354EFEA683F4C)
        
    *   偏移
        
        // 向下偏移100。
        // 向右偏移100。
        pixelMap.translate(100, 100);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6c/v3/gIm0cAaRQJimY6hyB72xew/zh-cn_image_0000002625108363.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=59C1891D23A26C7FD3E4DF596BEF2C8A8269627720355853C8D574D6781B21E4)
        
    *   旋转
        
        // 顺时针旋转90°。
        pixelMap.rotate(90);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a6/v3/LsUpJRlZRO-enMcLGDBVww/zh-cn_image_0000002594668846.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=C3388B2CCE94970FA32759C3D7B3CCEB48142A871824B919644F1B7F855EE823)
        
    *   翻转
        
        // 垂直翻转。
        pixelMap.flip(false, true);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6e/v3/52bYv77DRoaazxnQi4IxCw/zh-cn_image_0000002594828774.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=061AE374EE7FF2143095C8ABCE5FC506917FB3844E160DBA9FAD3D1C01743AB0)
        
        // 水平翻转。
        pixelMap.flip(true, false);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e1/v3/RHWFzKRXTAuc12DkW_71Gg/zh-cn_image_0000002625188221.jpeg?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=0B734BCAA0A9B3458ECBA41F580C9C3BC472912D8274BF82305658858EBBCCA6)
        
    *   透明度
        
        // 透明度0.5。
        pixelMap.opacity(0.5);
        
        ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f1/v3/UjvLCfelQqS2zAadFMJQbg/zh-cn_image_0000002625108365.png?HW-CC-KV=V1&HW-CC-Date=20260612T073518Z&HW-CC-Expire=86400&HW-CC-Sign=B2D9511576D3FE940165BDD3F14DB46B6300C83819FF95183005D8BE1F057574)
        

#### 示例代码

*   [拼图](https://gitcode.com/HarmonyOS_Samples/game-puzzle)