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解析失败,请检查参数是否正确