snapshot

功能描述

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

基础库 2.23.0 开始支持

使用

Ray 中使用

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

原生小程序中使用

ty.snapshot({ ... })

请求参数

Object object

属性类型默认值必填说明
selectorstring否元素唯一ID 或唯一 class , 默认: 截取当前页面
backgroundColorstring否背景颜色, 默认: jpeg #ffffff png 透明
formatstring否图片格式, 默认: png 可选值: jpeg, png
qualitynumber否图片质量, 默认: 1 可选值: 0-1, 仅在 jpeg 格式下有效
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数

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

回调对象

success(result)

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

fail(error)

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

示例代码

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 转换后再进行图片的保存.