## snapshot

### 功能描述

对页面内的唯一元素进行截图

> 基础库 `2.23.0` 开始支持

### 使用

**Ray 中使用**

```javascript
// @ray-js/ray 版本需 >1.6.24
import { snapshot } from '@ray-js/ray'
snapshot({ ... })
```

**原生小程序中使用**

```javascript
ty.snapshot({ ... })
```

### 请求参数

**Object object**

| 属性            | 类型       | 默认值 | 必填 | 说明                                                |
| --------------- | ---------- | ------ | ---- | --------------------------------------------------- |
| selector        | `string`   |        | 否   | 元素唯一ID 或唯一 class , 默认: 截取当前页面        |
| backgroundColor | `string`   |        | 否   | 背景颜色, 默认: jpeg #ffffff png 透明               |
| format          | `string`   |        | 否   | 图片格式, 默认: png 可选值: jpeg, png               |
| quality         | `number`   |        | 否   | 图片质量, 默认: 1 可选值: 0-1, 仅在 jpeg 格式下有效 |
| success         | `function` |        | 否   | 接口调用成功的回调函数                              |
| fail            | `function` |        | 否   | 接口调用失败的回调函数                              |
| complete        | `function` |        | 否   | 接口调用结束的回调函数                              |

> 注意: 可能由于页面样式的复杂度因素，截图结果可能会有所不同，如遇到此类问题，可尝试调整页面样式

## 回调对象

### success(result)

```ts
export interface SnapshotResult {
  imageDate: string, // base64 数据格式，可用于数据上传
  tempImagePath: string, // 临时文件地址（仅在真机下有效） 可用于保存到相册
  width: number, // 图片宽度
  height: number, // 图片高度
}
```

### fail(error)

```ts
export interface SnapshotError {
  errMsg: string // 失败信息描述
}
```

## 示例代码

```ts
import { snapshot } from '@ray-js/ray';

snapshot({
  selector: '#snapshot_1',  // 截取 id 为 snapshot_1 的元素
  backgroundColor: '#f00', // 背景颜色是红色
  success: function (res1) {
    console.log('snapshot', res1);
    const {tempImagePath} = res1;
    console.log('tempImagePath', tempImagePath);
    ty.showModal({
      title: '保存到相册?',
      content: '是否将截图保存到相册?',
      success({confirm}) {
        if (confirm) {
          ty.authorize({
            scope: 'scope.writePhotosAlbum', //  保存到相册权限
            success() {
              ty.saveImageToPhotosAlbum({ // 保存到相册
                filePath: tempImagePath,
                success(res4) {
                  console.log('saveImageToPhotosAlbum', res4);
                  ty.showToast({
                    title: '保存成功',
                  });
                },
                fail(res5) {
                  ty.showToast({
                    title: '保存失败',
                  });
                  console.log('saveImageToPhotosAlbum', res5);
                },
              });
            },
            fail(err) {
              console.log(err);
              ty.showToast({
                title: '授权失败',
              });
            },
          });
        }
      },
    });
  },
  fail: function (res) {
    console.log('snapshot', res);
  },
});
```

## 已知问题

1. `ty.snapshot` 在应对一些复杂布局, 以及 在 iOS 18 系统下可能无法正确截图的情况, 请使用 canvas 进行绘制进行 base64 转换后再进行图片的保存.