screenClip

open

save

cancel

screenShot

论坛示例

为帮助用户更好更快的使用原生插件，论坛维护了一个示例，示例中包含示例代码供您参考。

概述

screenClip 原生插件封装了屏幕截图的功能，用户可加拖动选择截图的区域，生成的图片可指定保存路径，也可保存到本地相册。用户点击已选截图区域则保存图片并取消本次截图，点击非已选区域则直接取消本次截图。不支持截取视频画面。

不能同时添加的原生插件：shortCut

open

打开截图功能

open({params}, callback(ret, err))

params

bg：

  • 类型：字符串
  • 描述：（可选项）背景颜色设置，支持#，rgb，rgba

cutFrame：

  • 类型：JSON 对象
  • 描述：（可选项）截取框配置
  • 默认值：见内部字段
  • 内部字段:
{
    x:            //（可选项）数字类型；截图区域左上角点坐标；默认：10
    y:            //（可选项）数字类型；截图区域左上角点坐标；默认：128
    w:            //（可选项）数字类型；截图区域的宽；默认：当前屏幕宽减二十
    h:            //（可选项）数字类型；截图区域的高；默认：w
    borderColor:  //（可选项）字符串类型；边框颜色，支持 rgb、rgba、#；默认：#696969
    borderWidth:  //（可选项）数字类型；边框粗细；默认：2
    tipsSize:     //（可选项）数字类型；提示文字的大小；默认：12
    tipsPosition: //（可选项）字符串类型；提示文字位置，取值范围见提示文字位置；默认：center
    tipsColor:    //（可选项）字符串类型；提示文字颜色，支持#、rgb、rgba；默认：#696969
}

save：

  • 类型：JSON 对象
  • 描述：所生成的图片保存位置
  • 默认值：见内部字段
  • 内部字段：
{
    album:            //（可选项）布尔类型；是否保存到系统相册；默认：false
    imgPath:          //（可选项）字符串类型；保存的文件路径，不传则不保存，若路径不存在文件夹则创建此目录
    imgName:         //（可选项）字符串类型；保存的图片名字，不传则不保存，支持png和jpg格式，若不指定格式，则默认png
}

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:         //布尔类型；操作成功状态值，true|false
}

err：

  • 类型：JSON 对象
  • 内部字段：
{
    code:         //错误码，取值范围如下：
                  // -1：未知错误
                  // 0：保存到相册失败，无操作相册权限
                  // 1：保存到到指定路径失败，无指定保存图片路径
                  // 2：截图失败
                  // 3：用户取消
}

示例代码

var screenClip = api.require('screenClip');
screenClip.open(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统 可提供的1.0.0及更高版本

save

截取 open 接口内 cutFrame 参数指定的当前区域的图片，并保存到指定位置

save({params}, callback(ret, err))

params

album：

  • 类型：布尔类型
  • 描述：（可选项）是否保存到系统相册
  • 默认值：false

imgPath：

  • 类型：字符串类型
  • 描述：（可选项）保存的图片路径，若路径不存在文件夹则创建此目录，不传则不保存

imgName：

  • 类型：字符串类型
  • 描述：（可选项）保存的图片名字，不传则不保存，支持png和jpg格式，若不指定格式，则默认png

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:       //布尔类型；操作成功状态值，true|false
}

err：

  • 类型：JSON 对象
  • 内部字段：
{
    code:       //错误码，取值范围如下：
                //-1：未知错误
                // 0：保存到相册失败，无操作相册权限
                // 1：保存到到指定路径失败，无指定保存图片路径
                // 2：截图失败
                // 3：用户取消
}

示例代码

var screenClip = api.require('screenClip');
screenClip.save(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统 可提供的1.0.0及更高版本

cancel

取消截图

cancel()

示例代码

var screenClip = api.require('screenClip');
screenClip.cancel();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

screenShot

截屏

screenShot({params}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）截取屏幕的范围
  • 内部字段：
{
    x: 0,   //（可选项）数字类型；距离屏幕左侧的距离
    y: 0,   //（可选项）数字类型；距离屏幕顶部的距离
    w: 320, //（可选项）数字类型；截取图片的宽 （注意：截取屏幕的宽w+屏幕左侧距离x不能大于手机屏幕的宽）
    h: 200  //（可选项）数字类型；截取图片的高 （注意：截取屏幕的高h+屏幕顶部距离y不能大于手机屏幕的高）
}

corner:

  • 类型：数字类型
  • 描述：（可选项）截屏圆角（暂仅支持Android）
  • 默认：0

album：

  • 类型：布尔类型
  • 描述：（可选项）是否保存到系统相册
  • 默认值：false

imgPath：

  • 类型：字符串类型
  • 描述：（可选项）保存的图片路径，若路径不存在文件夹则创建此目录，不传则不保存

imgName：

  • 类型：字符串类型
  • 描述：（可选项）保存的图片名字，不传则不保存，支持png和jpg格式，若不指定格式，则默认png

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:       //布尔类型；操作成功状态值，true|false
}

err：

  • 类型：JSON 对象
  • 内部字段：
{
    code:        //错误码，取值范围如下：
                 //-1：未知错误
                 // 0：保存到相册失败，无操作相册权限
                 // 1：保存到到指定路径失败，无指定保存图片路径
                 // 2：截图失败
}

示例代码

var screenClip = api.require('screenClip');
screenClip.screenShot(function(ret, err) {
    if (ret.status) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统 可提供的1.0.0及更高版本

提示文字位置

截取框内提示文字的位置。字符串类型

取值范围

  • center //正中间
  • right_up //右上角
  • right_down //右下角
  • left_up //左上角
  • left_down //左下角
  • center_up //靠上边，左右居中
  • center_down //靠下边，左右居中
  • right_center //靠右上下居中
  • left_center //靠左上下居中
是否仍需要帮助？ 请保持联络！
最后更新于 2025/09/15