如何在Cordova中为你的应用创建屏幕截图

本文概述

• 要求
• 实现
• 已知的问题

尽管要求在应用程序中创建屏幕截图并不常见, 但是创建详细的错误报告(由用户甚至自动生成)可能会很有用。在本文中, 你将学习如何在cordova应用程序中轻松创建屏幕截图。

要求

为了在你的应用中创建屏幕截图, 我们将依赖cordova-screenshot插件。屏幕快照插件使你的应用程序可以获取当前屏幕的屏幕截图, 并将其轻松保存到手机中。

要在你的项目中安装此插件, 请在命令提示符下执行以下命令：

cordova plugin add https://github.com/gitawego/cordova-screenshot.git

屏幕快照插件使你的应用程序可以获取当前屏幕的屏幕截图并将其保存到手机中。该插件将在浏览器的导航器对象中创建一个名为screenshot的属性, 并将公开2个方法(保存和URI)。

实现

该插件与其他插件不同的地方在于, 它会检查你的cordova项目(在Android中)是否使用XWalkWebViewEngine或android网络视图, 并根据此分别创建屏幕截图。在iOS中, 它将创建屏幕大小的位图上下文, 并使用UIGraphicsBeginImageContextWithOptions和UIGraphicsGetImageFromCurrentImageContext创建图像, 最后将图像转换为JPEG(在iOS中仅支持JPEG), 然后保存(或返回base64 uri) 。

创建并保存屏幕截图

iOS和Android中的插件都需要在设备存储中创建文件(图片)(/ s​​dcard / Pictures for android)。但是, 你无法设置屏幕截图的位置。生成的屏幕截图所在的路径将在响应回调中返回(如果你需要设置屏幕截图的位置, 则可以使用Base64格式检索图像, 然后将其保存, 以获取更多信息, 请阅读下一节”获取Base64格式的屏幕截图”。

screenshot.save方法最多需要4个参数(3个可选参数)：

• callback：遵循节点异步代码样式的回调。回调接收2个参数, 错误[1]和响应[2, 一个具有filePath属性的对象]。
• 格式：指定图像所需格式的字符串(png或jpg)。
• 质量：0到100之间的整数, 指定图像的质量(如果有)。
• 文件名：你可以根据需要更改图像的文件名, 否则将生成一个随机名称(screenshot_XXXXXXXXXX.jpg)。

要创建第一个屏幕截图, 可以使用：

navigator.screenshot.save(function(error, response){
    if(error){
        console.error(error);
        return;
    }
    
    // Something like: /storage/emulated/0/Pictures/screenshot_1477924039236.jpg
    console.log(response.filePath);
});

此外, 如果要更改质量和输出文件名, 则可以使用：

navigator.screenshot.save(function(error, response){
    if(error){
        console.error(error);
        return;
    }

    // Something like: /storage/emulated/0/Pictures/myScreenShot.jpg
    console.log(response.filePath);
}, 'jpg', 50, 'myScreenShot');

获取Base64格式的屏幕截图

你可以截取屏幕截图, 并使用screenshot.URI方法将其获取为数据URI。此方法需要2个参数(1个可选)：

• callback：遵循节点异步代码样式的回调。回调接收2个参数, 错误[1]和响应[2, 一个具有URI属性的对象]。
• 质量：0到100之间的整数, 指定图像的质量(如果有)。

screenshot.URI在设备存储中创建一个临时图像, 然后返回数据URI。如果你需要使用ajax调用来处理图像, 则可以使用此方法, 你可以像这样使用它：

navigator.screenshot.URI(function(error, response){
    if(error){
        console.error(error);
        return;
    }

    // Something like: data:image/jpeg;base64, /9j/4AAQSkZJ
    console.log(response.URI);
}, 50);

此插件的唯一限制是自定义文件的输出路径, 但是可以使用本文指定的cordova-file-plugin通过将Base64字符串另存为设备中的映像来创建解决方法。使用本文中描述的方法, 你可以将数据URI作为文件保存在设备中, 并具有所需的目标位置：

/** Process the type1 base64 string **/
var myBaseString = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAkYAAA.....";

// Split the base64 string in data and contentType
var block = myBaseString.split(";");
// Get the content type
var dataType = block[0].split(":")[1];// In this case "image/png"
// get the real base64 content of the file
var realData = block[1].split(", ")[1];// In this case "iVBORw0KGg...."

// The path where the file will be created
var folderpath = "file:///storage/emulated/0/";
// The name of your file, note that you need to know if is .png, .jpeg etc
var filename = "myimage.png";

savebase64AsImageFile(folderpath, filename, realData, dataType);

角度服务

如果你使用的是Angular(离子), 则可以在项目中添加以下服务：

.service('$cordovaScreenshot', ['$q', function ($q){
    return {
        capture: function (filename, extension, quality){
            extension = extension || 'jpg';
            quality = quality || '100';

            var defer = $q.defer();

            navigator.screenshot.save(function (error, res){
                if (error) {
                    console.error(error);
                    defer.reject(error);
                } else {
                    console.log('screenshot saved in: ', res.filePath);
                    defer.resolve(res.filePath);
                }
            }, extension, quality, filename);

            return defer.promise;
        }
    };
}])

已知的问题

在某些android平台上, 主要是在使用人行横道的项目中, 屏幕截图会显示黑色图像。为了防止这种行为, 可以在config.xml文件中添加以下参数：

<preference name="CrosswalkAnimatable" value="true" />

你可以在此处阅读有关该错误的更多信息, 但是自Crosswalk 14起, 该问题似乎已解决。

玩得开心 ！