小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext

xhs.canvasGetImageData

开发
>
JS API
>
画布
>
canvasGetImageData
>
更新时间:2025-04-11 19:17:55

以Promise风格调用: 支持

返回一个数组,用来描述 canvas 区域隐含的像素数据。在自定义组件下,操作组件内 <canvas> 组件。

参数

Object object

属性
类型
默认值
必填
说明
xnumber将要被提取的图像数据矩形区域的左上角横坐标
ynumber将要被提取的图像数据矩形区域的左上角纵坐标
widthnumber将要被提取的图像数据矩形区域的宽度
heightnumber将要被提取的图像数据矩形区域的高度
canvasIdstring画布标识,传入<canvas/>的 canvas-id
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性
类型
说明
errMsgstring
cancelboolean是否取消
confirmboolean是否确认

代码示例

function getCanvasImageData(canvasId, x, y, width, height) {
  return new Promise((resolve, reject) => {
    xhs.canvasGetImageData({
      canvasId, // 画布标识,传入 <canvas/> 的 canvas-id
      x, // 提取区域的左上角横坐标
      y, // 提取区域的左上角纵坐标
      width, // 提取区域的宽度
      height, // 提取区域的高度
      success: (res) => {
        console.log('获取图像数据成功:', res);
        resolve(res); // 返回图像数据
      },
      fail: (err) => {
        console.error('获取图像数据失败:', err);
        reject(err); // 返回错误信息
      },
      complete: () => {
        console.log('获取图像数据操作完成');
      }
    });
  });
}

// 调用示例
getCanvasImageData('myCanvas', 0, 0, 100, 100)
  .then((res) => {
    console.log('图像数据:', res);
  })
  .catch((err) => {
    console.error('操作失败:', err);
  });