我正在尝试使用ionic构建一个基于cordova的应用程序。在我的应用程序中,有一个部分,用户可以从我们的服务器中选择图像并移动它们或对其执行一些操作(如缩放和旋转...)。最后,我希望他们能够在我们的网站和社交媒体上分享结果。我的问题是,我如何从他们构建的布局中截取屏幕截图?我已经看过html2canvas库了,但它在保存在我们的服务器上的外部源图像方面存在问题,并且没有截取它们的屏幕截图。
发布于 2015-12-13 21:38:30
在您的项目中安装以下插件
cordova plugin add https://github.com/gitawego/cordova-screenshot.git将此服务添加到您的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;
}
};
}]);然后,您只需添加一个按钮即可使用此服务截取屏幕。
我这里有一个很好的例子,可以截图并分享到Facebook上:
//Take a picture
$cordovaScreenshot.capture()
.then(function(result) {
//on success you get the image url
//post on facebook (image & link can be null)
$cordovaSocialSharing
.shareViaFacebook("Text to post here...", result, "Link to share")
.then(function(result) {
//do something on post success or ignore it...
}, function(err) {
console.log("there was an error sharing!");
});
}, function(err) {
console.log("there was an error taking a a screenshot!");
});请注意,此示例使用的是ngCordova的社交共享插件:http://ngcordova.com/docs/plugins/socialSharing/
发布于 2015-10-10 21:05:10
文件Screenshot.js to:
var formats = ['png','jpg'];
function Screenshot() {
}
Screenshot.prototype.save = function (callback,format,quality, filename) {
format = (format || 'png').toLowerCase();
filename = filename || 'screenshot_'+Math.round((+(new Date()) + Math.random()));
if(formats.indexOf(format) === -1){
return callback && callback(new Error('invalid format '+format));
}
quality = typeof(quality) !== 'number'?100:quality;
cordova.exec(function(res){
callback && callback(null,res);
}, function(error){
callback && callback(error);
}, "Screenshot", "saveScreenshot", [format, quality, filename]);
};
Screenshot.install = function () {
if (!window.plugins) {
window.plugins = {};
}
window.plugins.screenshot = new Screenshot();
return window.plugins.screenshot;
};
cordova.addConstructor(Screenshot.install);
This way I can make the call with the following code:
window.plugins.screenshot.save(function(error,res){
if(error){
alert(error);
}else{
alert('ok',res.filePath); //should be path/to/myScreenshot.jpg
}
},'jpg',50,'myScreenShot');这在我的Android智能手机上运行得很好。
我还在res / xml / config.xml文件中添加了:
<feature name="Screenshot">
<param name="android-package" value="org.apache.cordova.screenshot.Screenshot"/>
</feature>在AndroidManifest.xml文件中:
java并在下面的包中添加了类:
所有这些配置都包含插件的plugin.xml文件中的信息
发布于 2015-10-10 23:32:35
最简单的方法是使用这个插件:
https://stackoverflow.com/questions/33054248
复制相似问题