阿里云首页 移动开发平台 mPaaS

截屏

此接口用于截屏。

snapshot 的使用方法

AlipayJSBridge.call('snapshot', function(result) {
  console.log(result.success);
});

代码示例

<h1>点击下面按钮查看不同截图效果</h1>

<a href="javascript:void(0)" class="btn screen">截取屏幕并保存到相册</a>
<a href="javascript:void(0)" class="btn viewport">viewport 截图返回 fileURL</a>

<script>
function ready(callback) {
  // 如果 jsbridge 已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.screen').addEventListener('click', function() {
    AlipayJSBridge.call('snapshot', function(result) {
      alert(JSON.stringify(result));
    });
  });

  document.querySelector('.viewport').addEventListener('click', function() {
    AlipayJSBridge.call('snapshot', {
      range: 'viewport',
      dataType: 'fileURL',
      saveToGallery: false
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
});
</script>

API 说明

AlipayJSBridge.call('snapshot', {
  range, saveToGallery, dataType, imageFormat, quality,
  maxWidth, maxHeight
}, fn)

入参

属性

类型

描述

必填

默认值

range

string

快照范围:

  • screen:当前客户端整个屏幕。

  • viewport:网页可见区域。

  • document:整个网页。

注意

document 会截取全部网页,在安卓手机上,网页很多时候会存在浏览器内存溢出情况,请使用 screen 参数。

N

“screen”

saveToGallery

bool

是否保存到相册。

N

true

dataType

string

结果数据格式:

  • dataURL:base64 编码的图片数据。

  • fileURL:图片在文件系统中的 URL(图片存放于临时目录中,退出时被清除)。

  • none:不返回数据(用于保存到相册的情况)。

N

“none”

imageFormat

string

jpg、png。

N

“jpg”

quality

int

jpg 的图片质量,取值为 1 到 100。

N

75

maxWidth

int

图片的最大宽度,过大将被等比缩小。

N

-

maxHeight

int

图片的最大高度,过大将被等比缩小。

N

-

fn

function

回调函数。

N

-

出参

回调函数带入的参数 result: {success, fileUrl, dataURL}

属性

类型

描述

success

bool

是否处理成功。

fileUrl

string

图片在文件系统中的 URL。

dataURL

string

base64 编码的图片数据。

错误码

错误码

描述

10

相册保存失败。

11

图片文件保存失败。