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

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

**平台差异说明**

study夏羽's avatar
study夏羽 已提交
7 8
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
9
|√|√|√|√|√|√|√|√|√|
Q
qiang 已提交
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

**object参数说明:**

|参数	|类型		|必填		|说明	|
|---|---|---|---|---|
|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	|否			|接口调用失败的回调函数|						
|complete	|Function	|否		|接口调用结束的回调函数(调用成功、失败都会执行)		|

**示例代码**

```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)
  } 
})
```

**Tips**

- H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。