index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div>
<img src="http://p1.bqimg.com/567571/cedca293f269ba11.jpg" width="100%" />
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
<p>dddd</p>
</div>
<script src="js/mui.min.js"></script>
<script src="js/drawScreen.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
// 截屏图片比例 5:4
let descWidth = document.body.clientWidth;
let descHeight = descWidth / (5 / 4);
var options = {
successCB: function(e) {//截图返回本地路径
console.log(JSON.stringify(e))
},
errorCB: function(e) {//截图失败
console.log(JSON.stringify(e))
},
quality: 80,//截图清晰度 0~100，默认50
clip: {//截图区域
top: '20px',//iOS机型，bitmap.save时，clip的top参数无效，但在self.draw时，是有效的。
left: '0px',
width: descWidth,
height: descHeight
}
}
drawScreen(options);
});
</script>
</body>
</html>
drawScreen.js
参数说明：
参数名 类型 说明 默认值 是否必选
successCB | Function | 成功回调函数 | | Y
errorCB | Function | 失败,回调函数 | Function |
fileName | String | 文件名,不需后缀名 | 当前时间戳 |
imgID | String | 原生图片ID | 当前时间戳 |
overwrite | Boolean | 是否覆盖 | true |
format | String | 保存的格式 | PNG |
quality | Number | 保存质量,1-100,1最低,100最高 | 50 |
clip | Object | 指定截屏区域 | {top:’0px’,left:’0px’,width:’100%’,height:’100%’}
*/
var drawScreen = function(options) {
options = {
successCB: options.successCB || function() {},
errorCB: options.errorCB || function() {},
fileName: options.fileName || Date.parse(new Date()),
imgID: options.imgID || String(Date.parse(new Date())),
overwrite: options.overwrite || true,
format: options.format || 'jpg',
quality: options.quality || 50,
clip: options.clip || {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
}
}
var self = plus.webview.currentWebview();
var bitmap = new plus.nativeObj.Bitmap(options.imgID);
//绘制截图
self.draw(bitmap, function() {
// 保存Bitmap图片
bitmap.save('_doc/' + options.fileName + '.' + options.format, {
overwrite: options.overwrite,
format: options.format,
quality: options.quality,
clip: options.clip //iOS机型，bitmap.save时，clip的top参数无效，但在self.draw时，是有效的。
}, function(i) {
//销毁Bitmap图片
bitmap.clear();
options.successCB({
success: 'success',
details: i.target
});
// //保存到系统相册
// plus.gallery.save(i.target, function(d) {
// //销毁Bitmap图片
// bitmap.clear();
// options.successCB({
// success: 'success',
// details: d
// });
// }, function(e) {
// //销毁Bitmap图片
// bitmap.clear();
// options.errorCB({
// error: '图片保存至相册失败',
// details: e
// });
// });
}, function(e) {
bitmap.clear();
options.errorCB({
error: '图片保存失败',
details: e
});
});
}, function(e) {
options.errorCB({
error: '截屏绘制失败',
details: e
});
},{
clip: options.clip //绘制截图时，设置clip，解决iOS机型下clip-top无效bug
});
}
