npm 包 cordova-plugin-screenshot-mod 使用教程

前言

在移动端开发中，经常需要进行截屏操作。cordova-plugin-screenshot-mod 是 Cordova 的一个插件，可以方便地实现截屏并获取截屏图片。

本文将介绍 npm 包 cordova-plugin-screenshot-mod 的使用教程，包括如何安装和使用该插件，以及如何对截屏图片进行处理。

安装

在使用 cordova-plugin-screenshot-mod 前，需要先安装 Cordova，以及 Cordova 的截屏插件 cordova-plugin-screenshot。具体可参考 Cordova 官网的文档。

通过 npm 安装 cordova-plugin-screenshot-mod：

npm install cordova-plugin-screenshot-mod

使用

截屏

使用 cordova-plugin-screenshot-mod 进行截屏的方法如下：

navigator.screenshot.save(function(error, res) {
  if (error) {
    console.error(error);
  } else {
    console.log('截屏成功，截屏图片地址为：' + res.filePath);
  }
});

在该方法中，我们使用了 Cordova 原生截屏插件 cordova-plugin-screenshot 的 save 方法对屏幕进行截屏，并将截屏图片保存到设备中。同时，将回调函数传递给 save 方法，以处理截屏结果。在回调函数中，我们可以根据错误对象和结果对象，获取到截屏过程中的错误信息和截屏结果。

截屏处理

在获取到截屏结果后，可以对截屏图片进行一些处理。比如将截屏图片上传到服务器，或者对图片进行裁剪、压缩等操作。

图片转 base64

将截屏图片转为 base64，可以方便地将图片展示在网页上，或者将图片作为参数发送到服务器。使用 cordova-plugin-file 插件的 readFile 方法，可以将图片读取到内存中，使用 window.btoa 方法，将图片数据转为 base64：

function screenshotToBase64(filePath) {
  window.resolveLocalFileSystemURL(filePath, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function() {
        var base64Data = window.btoa(this.result);
        console.log('图片 base64：' + base64Data);
      };
      reader.readAsBinaryString(file);
    });
  });
}

在该方法中，我们使用了 Cordova 原生文件插件 cordova-plugin-file 的 resolveLocalFileSystemURL 方法，通过截屏图片地址获取 fileEntry 对象，再使用 file 方法获取 file 文件对象。通过 FileReader 对象的 onloadend 事件，将文件数据转为 base64 数据。最后，将 base64 数据打印在控制台中。

图片上传

将截屏图片上传到服务器可以有多种实现方法。这里我们只介绍一种基于 Cordova 原生文件上传插件 cordova-plugin-file-transfer 的实现方法。具体使用方法可参考 Cordova 官网的文档。

function uploadScreenshot(filePath, serverUrl) {
  var options = new FileUploadOptions();
  options.fileKey = 'file';
  options.fileName = filePath.substr(filePath.lastIndexOf('/') + 1);
  options.mimeType = 'image/jpeg';
  options.params = {}; // 其他参数
  var ft = new FileTransfer();
  ft.upload(filePath, encodeURI(serverUrl), function(res) {
    console.log('图片上传成功，服务器返回：' + res.response);
  }, function(error) {
    console.error('图片上传失败：' + error.code);
  }, options);
}

在该方法中，我们使用了 Cordova 原生文件上传插件 cordova-plugin-file-transfer 的 upload 方法，将截屏图片上传到服务器。其中 options 对象中，fileKey 属性表示服务器接收图片文件的 key，fileName 属性表示图片文件的名称，mimeType 属性表示图片文件的 MIME 类型，params 属性表示其他需要传递给服务器的参数。

示例代码

以下是完整截屏及处理的示例代码：

if (navigator.screenshot) {
  navigator.screenshot.save(function(error, res) {
    if (error) {
      console.error(error);
    } else {
      console.log('截屏成功，截屏图片地址为：' + res.filePath);
      screenshotToBase64(res.filePath);
      uploadScreenshot(res.filePath, 'http://example.com/upload');
    }
  });
} else {
  console.error('cordova-plugin-screenshot-mod 插件未安装！');
}

function screenshotToBase64(filePath) {
  window.resolveLocalFileSystemURL(filePath, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function() {
        var base64Data = window.btoa(this.result);
        console.log('图片 base64：' + base64Data);
      };
      reader.readAsBinaryString(file);
    });
  });
}

function uploadScreenshot(filePath, serverUrl) {
  var options = new FileUploadOptions();
  options.fileKey = 'file';
  options.fileName = filePath.substr(filePath.lastIndexOf('/') + 1);
  options.mimeType = 'image/jpeg';
  options.params = {}; // 其他参数
  var ft = new FileTransfer();
  ft.upload(filePath, encodeURI(serverUrl), function(res) {
    console.log('图片上传成功，服务器返回：' + res.response);
  }, function(error) {
    console.error('图片上传失败：' + error.code);
  }, options);
}

以上示例代码中，我们判断了 cordova-plugin-screenshot-mod 插件是否安装，如未安装，则输出错误信息。在截屏成功后，分别调用了截屏转 base64 和图片上传方法。在截屏转 base64 方法中，我们使用了 Cordova 原生文件插件 cordova-plugin-file 的 resolveLocalFileSystemURL 和 FileReader 方法，将截屏图片转为 base64 数据。在图片上传方法中，我们使用了 Cordova 原生文件上传插件 cordova-plugin-file-transfer 的 upload 方法，将截屏图片上传到服务器。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53ba6