鸿蒙5.0开发进阶：JS组件-基础组件（ImageData对象）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

ImageData对象

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

ImageData对象可以存储canvas组件渲染的像素数据。

属性

属性	类型	描述
width	number	矩形区域实际像素宽度。
height	number	矩形区域实际像素高度。
data	<Uint8ClampedArray>	一维数组，保存了相应的颜色数据，数据值范围为0到255。

示例

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillRect(0,0,200,200)
    var imageData = ctx.createImageData(1,1)
    promptAction.showToast({
      message:imageData,
      duration:5000
    })
  }
}