HarmonyOS 鸿蒙Next 沙盒中的图片翻转并在Image组件中展示

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 沙盒中的图片翻转并在Image组件中展示

您好，我遇到一个情况，将沙盒中的jpg 图片进行 rotate 操作，然后通过block 回调传递给 Component，改变 state， Image 显示失败，但是如果我将 pixelMap 保存到沙盒文件中传递给 Image 组件，就可以正常展示

代码如下：

async showScanView(path: string) {
    const p = "/data/storage/el2/base/haps/entry/files/1731311629043_37.jpg"
    const pathUri = fileUri.getUriFromPath(p)
    let img = new ImageBitmap(pathUri)
    const screen = display.getDefaultDisplaySync()
    let canvas: OffscreenCanvas = new OffscreenCanvas(px2vp(screen.width), px2vp(screen.height))
    const settings: RenderingContextSettings = new RenderingContextSettings(true)
    const ctx = canvas.getContext("2d", settings)
    ctx.drawImage(img, 0, 0, img.width, img.height)
    let result = ctx.getPixelMap(0, 0, img.width, img.height)
    result.rotateSync(90)
    this.startScanCallback(result)
    // const savePath = getContext().filesDir + "/abc.jpg"
    // await this.savePixmap2SystemFileManager(result, savePath)
    // this.startScanCallback(fileUri.getUriFromPath(savePath))
}

该样式不展示，但是用最后三行就可以展示，请问我这个 pixelMap result 需要做什么处理吗？

Component 中的 state 和 Image 组件如下：

@Prop scanningImage: ResourceStr | PixelMap

...

Image(this.scanningImage)
.objectFit(ImageFit.Auto)
.align(Alignment.Bottom)
.width("80%")
.aspectRatio(3 / 4)

更多关于HarmonyOS 鸿蒙Next 沙盒中的图片翻转并在Image组件中展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

把@[Prop]换@[Link] 就可以显示了

更多关于HarmonyOS 鸿蒙Next 沙盒中的图片翻转并在Image组件中展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没那么麻烦，直接图片的沙盒路径前面加上file://，就能显示。旋转的话，直接Image设置rotate

在HarmonyOS鸿蒙Next沙盒环境中，若要实现图片的翻转并在Image组件中展示，你可以利用Canvas组件和图像处理API。以下是一个简要的实现步骤：

  1. 加载图片：首先，通过资源文件或网络加载图片到内存中。

  2. 创建Canvas：利用Canvas组件创建一个画布，该画布用于绘制和翻转图片。

  3. 绘制并翻转图片：

    • 使用Canvas的drawImage方法将图片绘制到画布上。
    • 调用Canvas的rotate方法，设置旋转角度（例如180度）和旋转中心点，实现图片翻转。

  4. 获取翻转后的图片：通过Canvas的toBitmap方法，将翻转后的图像转换为Bitmap对象。

  5. 展示图片：将得到的Bitmap对象设置到Image组件的src属性中，实现图片展示。

示例代码（伪代码，具体API需参考HarmonyOS官方文档）：

// 假设已加载图片到imageBitmap
let canvas = new Canvas(width, height);
let context = canvas.getContext('2d');
context.save();
context.translate(width/2, height/2);
context.rotate(Math.PI); // 180度翻转
context.drawImage(imageBitmap, -width/2, -height/2);
context.restore();
let flippedBitmap = canvas.toBitmap();
// 设置到Image组件
imageElement.src = flippedBitmap;

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部