swan.canvasPutImageData

解释:将像素数据绘制到画布的方法。在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 <canvas> 组件。

Web 态说明:由于 Web 态遵循浏览器对 W3C 标准的实现程度,在 W3C 规范中,putImageData 方法的入参中的 width、height、data 需要遵循 data.length === 4 width height 的关系,否则会进入 fail 回调。但是在百度 APP 内的小程序环境下,客户端不会校验 data 的大小。为了避免 Web 态运行异常,请尽量保证入参符合标准。

(如果你是如 代码示例 所示的用法,通过 canvasGetImageData 获取 data 并传入 putImageData,则只需要保证 width 和 height 与 canvasGetImageData 中的 width 和 height 一致即可)

方法参数

Object object

object参数说明

属性名类型必填默认值说明Web 态说明
canvasIdString画布标识,传入 <canvas>组件的 canvas-id 属性。
xNumber将要被提取的图像数据矩形区域的左上角横坐标
yNumber将要被提取的图像数据矩形区域的左上角纵坐标
widthNumber将要被提取的图像数据矩形区域的宽度
heightNumber将要被提取的图像数据矩形区域的高度
dataUint8ClampedArray图像像素点数据,一维数组,每四项表示一个像素点的 rgba数组长度必须为 4 width height
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例

在开发者工具中预览效果

扫码体验

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

图片示例

swan.canvasPutImageData - 图2

swan.canvasPutImageData - 图3

swan.canvasPutImageData - 图4

代码示例

  1. <view class="wrap">
  2. <canvas canvas-id="canvas1"></canvas>
  3. <canvas canvas-id="canvas2"></canvas>
  4. <button type="primary" bindtap="canvasPutImageData">canvasPutImageData</button>
  5. </view>
  1. Page({
  2. onReady() {
  3. const CanvasContext = swan.createCanvasContext('canvas1');
  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. canvasPutImageData() {
  38. swan.canvasGetImageData({
  39. canvasId: 'canvas1',
  40. x: 0,
  41. y: 0,
  42. width: 200,
  43. height: 200,
  44. success: res => {
  45. swan.canvasPutImageData({
  46. canvasId: 'canvas2',
  47. x: 0,
  48. y: 0,
  49. width: 200,
  50. height: 200,
  51. data: res.data,
  52. success: res => {
  53. console.log('canvasPutImageData success', res);
  54. },
  55. fail: err => {
  56. console.log('canvasPutImageData fail', err);
  57. }
  58. })
  59. },
  60. fail: err => {
  61. console.log('canvasGetImageData fail', err);
  62. }
  63. });
  64. }
  65. });
  1. .wrap {
  2. padding: 50rpx 30rpx;
  3. }

错误码

Android

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

iOS

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