如何在Canva中绘制资源文件下的图片 HarmonyOS 鸿蒙Next

如何在Canva中绘制资源文件下的图片 HarmonyOS 鸿蒙Next 需要绘制资源文件中的一张图片，但是canva.drawImg需要使用BitmapImg，没找该怎么将资源文件转成bitmaoImg的方法，请问这个怎么去实现？

3 回复

您这边可以用getMediaContent 拿到本地资源图片后，转成PixelMap格式

```javascript
import image from '[@ohos](/user/ohos).multimedia.image'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = '点击获取图片尺寸';
  [@State](/user/State) imagePixelMap: PixelMap | undefined = undefined;
  [@State](/user/State) imageWidth: number = -1;
  [@State](/user/State) imageHeight: number = -1;

  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(30)
          .width(350)
          .height(150)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            getContext(this).resourceManager.getMediaContent($r("app.media.startIcon")).then((data) => {
              let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset)
              let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);
              imageSource.getImageInfo((err,
                value) => { //获取图片资源的尺寸
                console.log(`图片的尺寸为：width:${value.size.width}height:${value.size.height}`)
                if (err) {
                  return;
                } // 转PixelMap
                let opts: image.DecodingOptions = {
                  editable: true,
                  desiredSize: {
                    height: value.size.height,
                    width: value.size.width
                  } // desiredSize: { height: 300, width: 200 }
                };
                imageSource.createPixelMap(opts, (err, pixelMap) => {
                  this.imagePixelMap = pixelMap
                  this.imagePixelMap.getImageInfo().then((value) => {
                    this.imageWidth = value.size.width
                    this.imageHeight = value.size.height
                  })
                })
              })
            })
          })
        Image(this.imagePixelMap).width(this.imageWidth).height(this.imageHeight)
        Text(`图片尺寸信息：width: ${this.imageWidth}, height: ${this.imageHeight}`)
      }
    }
  }
}

更多关于如何在Canva中绘制资源文件下的图片 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


private settings: RenderingContextSettings = new RenderingContextSettings(true)
private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

let data = await getContext(this).resourceManager.getMediaContent($r('app.media.consult_price_slider'))
let imageSource = image.createImageSource(data.buffer)
this.img = await imageSource.createPixelMap();

this.ctx.drawImage(this.img, 左上角x坐标, 左上角y坐标, 绘制宽度, 绘制高度)

这样可以，之前卡了我一天，论坛的回答总是少一句。

在HarmonyOS鸿蒙Next中，若需在Canva中绘制资源文件下的图片，可通过以下步骤实现：

  1. 导入资源文件：确保图片资源已放置在项目的resources目录下，例如resources/base/media/。

  2. 获取资源管理器：使用ResourceManager获取图片资源。通过getResourceManager()方法获取资源管理器实例。

  3. 获取图片资源：使用ResourceManager的getMediaContent()方法获取图片资源的InputStream，并将其转换为PixelMap对象。

  4. 绘制图片：在Canvas中使用drawPixelMap()方法将PixelMap绘制到画布上。

示例代码如下：

import resourceManager from '@ohos.resourceManager';
import image from '@ohos.multimedia.image';

// 获取资源管理器
let resMgr = resourceManager.getResourceManager();

// 获取图片资源
let imageStream = await resMgr.getMediaContent($r('app.media.my_image'));
let imageSource = image.createImageSource(imageStream);
let pixelMap = await imageSource.createPixelMap();

// 绘制图片
let canvas = new Canvas();
canvas.drawPixelMap(pixelMap, 0, 0);
回到顶部