HarmonyOS鸿蒙Next中Canvas如何绘制app.media下面的图片

HarmonyOS鸿蒙Next中Canvas如何绘制app.media下面的图片

如图，我已经读取到的资源文件下面的图片了，拿到的数据是Uint8Array，我看Canvas只支持绘制ImageBitmap和PixelMap，我该如何把Unit8Array转为PixelMap对象去绘制？


更多关于HarmonyOS鸿蒙Next中Canvas如何绘制app.media下面的图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

// 这里修改为你获取到的Uint8Array const arr = new Uint8Array([1,2,3,4,5,6]); // 通过缓冲区创建图片源实例 const imageSource = image.createImageSource(arr.buffer); // 通过图片解码参数创建PixelMap对象 imageSource.createPixelMap().then(pixelmap => { // TODO }).catch(error => { // TODO })

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


请问，image是用的import image from '@ohos.multimedia.image';吗？我导入这个image调用createImageSource这里面只有一个入参是string类型的，没有buffer类型的参数，

是的，有的呀，3.2R的官方文档中也有说明： https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/apis/js-apis-image.md/#imagecreateimagesource9-3

HarmonyOS的开发者模式提供了很多实用的工具，方便我们进行调试和优化。

大佬，找到了，

总的来说，HarmonyOS是一款非常优秀的操作系统，期待它能在未来带给我们更多惊喜！

// 这里修改为你获取到的Uint8Array const arr = new Uint8Array([1,2,3,4,5,6]);

这一步 每台看懂呢？是这样操作吗？

const fileData = await resourceMgr.getMediaContent($r('app.media.icon')).then(value=>{
  // 这里修改为你获取到的Uint8Array
  const arr = new Uint8Array(value);
  // 通过缓冲区创建图片源实例
  const imageSource = image.createImageSource(arr.buffer);
  this.buffer=arr.buffer
  console.log('byteLength is a'+JSON.stringify(arr))

  // 通过图片解码参数创建PixelMap对象
  imageSource.createPixelMap().then(pixelmap => {
    // TODO
  }).catch(error => {
    // TODO
  })
});

在HarmonyOS鸿蒙Next中，使用Canvas绘制app.media下的图片可以通过以下步骤实现：

  1. 获取图片资源：首先，使用ResourceManager获取app.media下的图片资源。可以通过getMediaContent方法获取图片的二进制数据。

  2. 创建Image对象：使用Image类创建一个图像对象，并将获取到的图片数据加载到该对象中。

  3. 绘制图片：在Canvas的drawImage方法中，传入Image对象以及绘制的位置和尺寸参数，即可在Canvas上绘制图片。

示例代码如下：

import { CanvasRenderingContext2D, Image } from '@ohos.graphics';

// 获取图片资源
let resourceManager = getContext().resourceManager;
let imageData = resourceManager.getMediaContent($r('app.media.myImage'));

// 创建Image对象
let image = new Image();
image.src = imageData;

// 绘制图片
let canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

在HarmonyOS鸿蒙Next中，使用Canvas绘制app.media下的图片，步骤如下：

  1. 获取图片资源：通过ResourceManager获取app.media目录下的图片资源。
  2. 创建Image对象：使用ImageSource创建Image对象。
  3. 绘制图片：在Canvas上使用drawImage方法绘制图片。

示例代码：

const resourceManager = getContext().resourceManager;
const imageSource = await resourceManager.getMediaContent('your_image_name');
const image = new Image(imageSource);
const canvas = new Canvas('your_canvas_id');
canvas.drawImage(image, x, y, width, height);

确保图片路径和Canvas ID正确。

回到顶部