swan.canvasGetImageData

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

方法参数

Object object

object参数说明

属性名类型必填默认值说明
canvasIdString是画布标识，传入 <canvas> 组件的 canvas-id 属性。
xNumber是将要被提取的图像数据矩形区域的左上角横坐标
yNumber是将要被提取的图像数据矩形区域的左上角纵坐标
widthNumber是将要被提取的图像数据矩形区域的宽度
heightNumber是将要被提取的图像数据矩形区域的高度
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数类型说明
widthnumber图像数据矩形的宽度
heightnumber图像数据矩形的高度
dataUint8ClampedArray图像像素点数据，一维数组，每四项表示一个像素点的rgba

示例

在开发者工具中预览效果

扫码体验

swan.canvasGetImageData - 图1请使用百度APP扫码

图片示例

swan.canvasGetImageData - 图2

swan.canvasGetImageData - 图3

swan.canvasGetImageData - 图4

代码示例

  1. <view class="wrap">
  2.     <canvas canvas-id="canvas"></canvas>
  3.     <button type="primary" bindtap="canvasGetImageData">canvasGetImageData</button>
  4. </view>
  1. Page({
  2.     onReady() {
  3.         const CanvasContext = swan.createCanvasContext('canvas');
  4.         CanvasContext.setFillStyle('#0f0f0f');
  5.         CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
  6.         CanvasContext.fill();
  7.         CanvasContext.beginPath();
  8.         CanvasContext.setStrokeStyle('#0000ff');
  9.         CanvasContext.moveTo(90, 70);
  10.         CanvasContext.lineTo(70, 80);
  11.         CanvasContext.lineTo(90, 80);
  12.         CanvasContext.closePath();
  13.         CanvasContext.stroke();
  14.         CanvasContext.beginPath();
  15.         CanvasContext.setStrokeStyle('#0000ff');
  16.         CanvasContext.moveTo(130, 70);
  17.         CanvasContext.lineTo(110, 80);
  18.         CanvasContext.lineTo(130, 80);
  19.         CanvasContext.closePath();
  20.         CanvasContext.stroke();
  21.         CanvasContext.beginPath();
  22.         CanvasContext.setFillStyle('#00ff00');
  23.         CanvasContext.arc(100, 100, 20, 0, 1 * Math.PI);
  24.         CanvasContext.fill();
  25.         CanvasContext.setFillStyle('#00ff00');
  26.         CanvasContext.setFontSize(12);
  27.         CanvasContext.fillText('haha', 165, 78);
  28.         CanvasContext.moveTo(100, 50);
  29.         CanvasContext.setStrokeStyle('#00ff00');
  30.         CanvasContext.bezierCurveTo(100, 25, 75, 25, 50, 50);
  31.         CanvasContext.stroke();
  32.         CanvasContext.moveTo(100, 50);
  33.         CanvasContext.quadraticCurveTo(75, 25, 50, 50);
  34.         CanvasContext.stroke();
  35.         CanvasContext.draw();
  36.     },
  37.     canvasGetImageData() {
  38.         swan.canvasGetImageData({
  39.             canvasId: 'canvas',
  40.             x: 0,
  41.            y: 0,
  42.             width: 100,
  43.             height: 100,
  44.             success: res => {
  45.                 console.log('canvasGetImageData success', res);
  46.             },
  47.             fail: err => {
  48.                 console.log('canvasGetImageData fail', err);
  49.             }
  50.         });
  51.     }
  52. });

错误码

Android

错误码说明
201解析失败，请检查调起协议是否合法

iOS

错误码说明
202解析失败，请检查参数是否正确