HarmonyOS鸿蒙Next中获取网络图片的PixelMap如何进行center crop？

HarmonyOS鸿蒙Next中获取网络图片的PixelMap如何进行center crop？ 我们需要将网络图片传给TextReader组件，目前实现的方式是获取PixelMap，但是该方法是直接将图片的比例输出为1：1，不是center crop，导致图片显示比例异常。

获取PixelMap的代码：

private imagePixelMap: Map<string, PixelMap> = new Map()
private options: image.DecodingOptions = {
    sampleSize: 1,
    rotate: 0,
    editable: false,
    desiredSize: {
        width: 800,
        height: 800
    }
}

downLoadAndSave(imageUrl: string) {
    if (this.imagePixelMap.has(imageUrl)) {
        return
    }
    http.createHttp().request(imageUrl,
    (error: BusinessError, data: http.HttpResponse) => {
        if (error) {
            ZHGLog.error(`http request failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
            image.createImageSource(data.result as ArrayBuffer)
            .createPixelMap(this.options)
            .then((pixelMap: PixelMap) => {
                this.saveImagePixelMap(imageUrl, pixelMap)
            })
        }
    }
)
}

期望可实现将获取到的网络图片的pixelMap center crop


更多关于HarmonyOS鸿蒙Next中获取网络图片的PixelMap如何进行center crop？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

获取到pixelMap后，可调用crop方法，根据输入的尺寸对图片进行裁剪，关于这块使用可参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#crop9

或者如下链接中的裁切

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/image-transformation-V5#开发步骤

更多关于HarmonyOS鸿蒙Next中获取网络图片的PixelMap如何进行center crop？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，获取网络图片后，若需对PixelMap进行center crop操作，可以使用Image组件配合clipAlignment属性和clip属性来实现。首先，通过Image组件加载网络图片，获取PixelMap对象。然后，设置clipAlignment为Alignment.Center，确保裁剪区域居中。接着，使用clip属性指定裁剪区域的大小和位置，实现center crop效果。具体代码如下：

import image from '@ohos.multimedia.image';
import { Alignment } from '@ohos.arkui.common';
import { Image } from '@ohos.arkui.component';

// 假设已经获取到PixelMap对象
let pixelMap: image.PixelMap = ...;

// 使用Image组件进行center crop
Image(pixelMap)
  .clipAlignment(Alignment.Center)
  .clip({ width: 200, height: 200 });

在HarmonyOS鸿蒙Next中，要实现网络图片的center crop，可以按照以下步骤进行：

  1. 获取网络图片：使用ImageSource从网络加载图片。
  2. 解码图片：将图片解码为PixelMap。
  3. 计算裁剪区域：根据目标宽高比，计算出需要裁剪的区域。
  4. 裁剪图片：使用PixelMap的createPixelMap方法进行裁剪。

示例代码：

ImageSource source = ImageSource.create(url, null);
PixelMap pixelMap = source.createPixelmap(null);
int srcWidth = pixelMap.getWidth();
int srcHeight = pixelMap.getHeight();
int dstWidth = 300; // 目标宽度
int dstHeight = 300; // 目标高度
int x = (srcWidth - dstWidth) / 2;
int y = (srcHeight - dstHeight) / 2;
PixelMap croppedPixelMap = PixelMap.create(pixelMap, new Rect(x, y, x + dstWidth, y + dstHeight));

这样就实现了center crop操作。

回到顶部