canvasToTempFilePath.md 2.1 KB
Newer Older
1
### uni.canvasToTempFilePath(object, componentInstance)
Q
qiang 已提交
2 3 4 5 6

把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例,以操作组件内 `<canvas>` 组件。

**平台差异说明**

7
|App|H5|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
study夏羽's avatar
study夏羽 已提交
8
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
9
|√|√|√|√|√|√|√|√|√|
Q
qiang 已提交
10

D
DCloud_LXH 已提交
11 12
<!-- UNIAPPAPIJSON.canvasToTempFilePath.compatibility -->

Q
qiang 已提交
13 14 15
**object参数说明:**

|参数	|类型		|必填		|说明	|
D
DCloud_LXH 已提交
16
|---|---|---|---|
D
DCloud_LXH 已提交
17 18 19 20 21 22 23 24 25 26 27
|x	|Number		|否			|画布x轴起点(默认0)|
|y	|Number		|否			|画布y轴起点(默认0)|
|width	|Number		|否			|画布宽度(默认为canvas宽度-x)|
|height	|Number		|否			|画布高度(默认为canvas高度-y)|
|destWidth	|Number		|否			|输出图片宽度(默认为 width * 屏幕像素密度)|
|destHeight	|Number		|否			|输出图片高度(默认为 height * 屏幕像素密度)|
|canvasId	|String		|是			|画布标识,传入 ``<canvas/>`` 的 canvas-id(支付宝小程序是id、其他平台是canvas-id)|
|fileType	|String		|否			|目标文件的类型,只支持 'jpg' 或 'png'。默认为 'png'|
|quality	|Number		|否			|图片的质量,取值范围为 (0, 1],不在范围内时当作1.0处理|
|success	|Function	|否			|接口调用成功的回调函数|
|fail	|Function	|否			|接口调用失败的回调函数|
Q
qiang 已提交
28 29
|complete	|Function	|否		|接口调用结束的回调函数(调用成功、失败都会执行)		|

D
DCloud_LXH 已提交
30 31
<!-- UNIAPPAPIJSON.canvasToTempFilePath.param -->

Q
qiang 已提交
32 33 34 35 36 37 38 39 40 41 42 43 44 45
**示例代码**

```javascript
uni.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    // 在H5平台下,tempFilePath 为 base64
    console.log(res.tempFilePath)
D
DCloud_LXH 已提交
46
  }
Q
qiang 已提交
47 48 49 50 51
})
```

**Tips**

D
DCloud_LXH 已提交
52 53 54
- H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。

<!-- UNIAPPAPIJSON.canvasToTempFilePath.tutorial -->