HarmonyOS 鸿蒙Next 使用canvas中的drawImage绘制图片无法显示

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

HarmonyOS 鸿蒙Next 使用canvas中的drawImage绘制图片无法显示

const resourcemanager = getContext(this).resourceManager;
const fileData: Uint8Array = await resourcemanager.getMediaContent($r('app.media.ic_home_mood_thinking'))
const buffer = fileData.buffer;
let imageSource:image.ImageSource = image.createImageSource(buffer);
const pixelMap: image.PixelMap = await imageSource.createPixelMap()

console.info(`pixelMap:${pixelMap}`)
// this.canvasContext?.save();
// this.canvasContext?.rotate(beginAngle * Math.PI / 180);
this.canvasContext?.drawImage(pixelMap, 50,
  50, 40,
  40);

更多关于HarmonyOS 鸿蒙Next 使用canvas中的drawImage绘制图片无法显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

Canvas(this.context) .onReady(async () => { const context = getContext(this); const resourceMgr: resourceManager.ResourceManager = context.resourceManager; const fileData: Uint8Array = await resourceMgr.getMediaContent($r(“app.media.icon”)) const buffer = fileData.buffer const imageSource: image.ImageSource = image.createImageSource(buffer) const pixelMap: image.PixelMap = await imageSource.createPixelMap() this.context.drawImage(pixelMap, 50, 50, 40, 40) }) .height(100) .width(‘100%’) .backgroundColor(Color.Pink)

用这种方法在模拟器和真机上均可以正常显示，如果不行，可以试一下升级版本

更多关于HarmonyOS 鸿蒙Next 使用canvas中的drawImage绘制图片无法显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，使用canvas的drawImage方法绘制图片无法显示的问题，可能由以下几个原因导致：

  1. 图片资源未正确加载：确保图片资源已被正确添加到项目中，并且路径正确无误。检查图片文件名、格式以及所在目录是否与代码中指定的路径一致。

  2. 图片格式不支持：鸿蒙系统可能对图片格式有特定要求。尝试使用常见的图片格式如PNG、JPG，并确保图片没有损坏。

  3. Canvas未正确初始化：确认canvas对象在使用前已被正确初始化，并且其尺寸设置合理，能够容纳绘制的图片。

  4. 绘制时机问题：确保drawImage方法在界面已准备好且canvas可用时调用。如果是在组件的onDraw等绘制相关回调中调用，需确保调用时机正确。

  5. 权限问题：如果图片来源于外部存储，需确保应用已获取读取外部存储的权限。

  6. 图片尺寸过大：尝试缩小图片尺寸，看是否能够正常显示，以排除因图片过大导致的绘制问题。

如果上述检查均无问题，但图片依旧无法显示，可能是系统bug或特定环境下的兼容性问题。此时，建议查阅最新的鸿蒙开发文档或社区论坛，看是否有其他开发者遇到并解决了类似问题。

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

回到顶部