Как создать скриншот вашего приложения в Cordova

Содержание

1 Требования
2 Реализация
3 Известные вопросы

Хотя требовать создания скриншота в вашем приложении не так часто, может быть полезно создавать подробные отчеты об ошибках (сделанные пользователем или даже автоматически). В этой статье вы узнаете, как легко создать скриншот в вашем приложении Cordova.

Требования

Чтобы создавать скриншоты в вашем приложении, мы будем зависеть от Cordova-скриншот плагин. Плагин Screenshot позволяет вашему приложению делать скриншоты текущего экрана и легко сохранять их в телефоне.

Чтобы установить этот плагин в свой проект, выполните в командной строке следующую команду:

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

Плагин Screenshot позволяет вашему приложению делать скриншоты текущего экрана и сохранять их в телефоне. Плагин создаст свойство с именем скриншот в объекте навигатора браузера и предоставит 2 метода (save а также URI).

Реализация

Что отличает этот плагин от других, так это то, что он проверяет, использует ли ваш проект Cordova (в Android), XWalkWebViewEngine или android web view и в соответствии с этим создаст скриншот соответственно. В iOS он создаст растровый контекст размера вашего экрана и создаст изображение с помощью UIGraphicsBeginImageContextWithOptions и UIGraphicsGetImageFromCurrentImageContext, наконец преобразует изображение в JPEG (в iOS поддерживается только JPEG) и затем сохранит его (или вернет base64 uri) ,

Создать и сохранить скриншот

Плагин, как в iOS, так и в Android, должен будет создать файл (изображение) в хранилище устройства (/ sdcard / Pictures for android). Тем не мение, Вы не можете установить местоположение скриншота., путь, где находится сгенерированный скриншот, будет возвращен в ответном обратном вызове (если вам нужно установить местоположение скриншота, вы можете получить изображение в формате Base64 и затем сохранить его, для получения дополнительной информации читайте следующий раздел Получить скриншот в Формат Base64).

screenshot.save Метод ожидает до 4 аргументов (3 необязательных):

callback: обратный вызов, который следует стилю асинхронного кода узла. Обратный вызов получает 2 параметра, ошибку [1] и ответ [2, объект со свойством filePath].
format: строка (png или jpg), которая указывает желаемый формат изображения.
quality: целое число от 0 до 100, которое определяет качество изображения, если оно доступно.
filename: вы можете изменить имя файла изображения, если хотите, в противном случае будет сгенерировано случайное имя (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

Вы можете сделать снимок экрана и получить его как URI данных, используя screenshot.URI метод. Этот метод ожидает 2 параметра (1 необязательный):

callback: обратный вызов, который следует стилю асинхронного кода узла. Обратный вызов получает 2 параметра, ошибку [1] и ответ [2, объект со свойством URI].
quality: целое число от 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);

Единственным ограничением этого плагина является настройка пути вывода файла, однако вы можете создать обходной путь, выполнив сохранение строки Base64 в качестве изображения на устройстве с помощью cordova-file-plugin, как указано в этой статье. Используя метод, описанный в статье, вы можете сохранить 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 (ionic):

.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:

Вы можете прочитать больше о ошибка здесь, однако эта проблема, кажется, решена начиная с Crosswalk 14.

Повеселись !