有没有屏幕截图、截屏的插件

更新=====
plus.webview补充了截屏方法，这个效率更高，而且ios、Android都可以直接用。http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.draw

以下为过期信息===========================================

不需要插件，Native.js搞定。附件是一段Native.js代码。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <script>  
if(window.plus){  
    plusReady();  
}else{  
    document.addEventListener("plusready",plusReady,false);  
}  

var Activity,view,viewClass,BitmapFactory,StringBuffer,Byte,CompressFormat,ByteArrayOutputStream,str,bBitmap,bStream,bytes,Base64;  
var bitmap = null;  

function plusReady(){  
    // 导入Native.js需要的原生对象  
    Activity = plus.android.runtimeMainActivity();  
    BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");  
    StringBuffer = plus.android.importClass("java.lang.StringBuffer")  
    Byte = plus.android.importClass("java.lang.Byte");  
    CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");  
    bBitmap = plus.android.importClass("android.graphics.Bitmap");  
    ByteArrayOutputStream = plus.android.importClass("java.io.ByteArrayOutputStream");  
    Base64 = plus.android.importClass("android.util.Base64");  
    //viewClass = plus.android.importClass("android.view.View");  

    document.getElementById("btGetCapture").disabled="";  
}  

function getCapture () {  
    //配置view缓存  
    view = Activity.getCurrentFocus();  
    plus.android.invoke(view,"setDrawingCacheEnabled",true);  
    plus.android.invoke(view,"buildDrawingCache");  
    //对view截图，存入bitmap中  
    bitmap = plus.android.invoke(view,"getDrawingCache");  

    if (bitmap != null) {  
        console.log("截图成功");  
        // 将原生Bitmap转换成Base64字符串，赋值给js变量  
        try {  
            str = new StringBuffer();    
            bStream = new ByteArrayOutputStream();  
            bitmap.compress(bBitmap.CompressFormat.PNG, 100, bStream);  
            bStream.flush();    
            bStream.close();  
            bytes = bStream.toByteArray();    
            str.append(Base64.encodeToString(bytes, Base64.NO_WRAP));  
        } catch (e) {  
            console.log(e.message);  
        }  
        console.log("截图字节长度："+str.length());  
        document.getElementById("imgCapture").src = "data:image/png;base64," + str.toString();   
    }  
    else {  
        console.log("截图失败，请重试"); //此处可以进一步优化为失败后循环截图直到获取到截图  
    }  
}  

        </script>  
        <style type="text/css">  
            body{  
                margin: 0px; padding: 0px;  
            }  
        </style>  
    </head>  
    <body>  
        <!--<button onclick="history.back()">后退</button>-->  
        <button onclick="location.reload()">刷新</button>  
        <button id="btGetCapture" onclick="getCapture()" disabled="disabled"> 截图 </button>  
        <img id="imgCapture" style="width: 100%;"/>  
    </body>  
</html>

dipper (作者)

多谢回答，现在我想把这个图片保存到手机本地，应该如何解决。

2015-06-01 13:28
DCloud_heavensoft

回复 dipper: 你可以在原生层直接用Native.js保存到手机上，也可以js层用plus.io保存

2015-06-02 01:24
物是人非

我有一个问题不明白，就是importClass 里面的原生类是放在哪里的？安卓也是要导入lib的才可以引用，不太理解这个是放在哪里？求大声讲解

2016-07-14 09:41
HelloZhong

plus.webview的draw方法里的clip设置截屏区域在ios下好像不起作用

2018-01-29 10:40
2***@qq.com

这个有bug，硬件加速情况下，截取不到canvas

2018-10-31 10:38
DCloud_heavensoft

回复 2***@qq.com: canvas 本身可直接转图像

2018-10-31 18:10
诗雨

plus.webview.bitmap.draw的截屏方法无法截取TABBAR的内容。

2019-11-23 00:51
DCloud_heavensoft

回复诗雨:uni-app的 tabbar、navigationbar不属于webview渲染的

2019-11-23 17:57

x***@qq.com - 一个被IT耽误了的厨子

为什么，我复制下来的报错了
Uncaught Attempt to invoke virtual method 'java.lang.String java.lang.Class.getName()'……

今夕何夕也 - 保密

我也是醉了又是这种用不了的东西拿出来

7***@qq.com

使用drag截图，为何保存到相册里的图片是纯白色的？

代码如下：
'''

// 截屏绘制
var bitmap = null;

function captureWebview() {
bitmap = new plus.nativeObj.Bitmap('test');
let ws = plus.webview.currentWebview();
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap, function() {
console.log('截屏绘制图片成功');

    var path = "_doc/project_barcode.png";  
    var options = {  
        "overwrite": true,  
        "format": "png",  
        "quality": 50  
    }  
    bitmap.save(path, options, bmSaveSuccessCB, bmSaveErrorCB); //将图片保存到指定的路径（仅支持本地文件系统）  
    //保存到相册后，回收Bitmap图片内存  
    bitmap.recycle();  

}, function(e) {  
    console.log('截屏绘制图片失败：' + JSON.stringify(e));  
});

}

var bmSaveSuccessCB = function(e) {
console.log(e)
console.log("保存成功")
console.log("保存地址：" + e.target)
saveToGallery(e.target)
}

var bmSaveErrorCB = function(error) {
plus.nativeUI.toast("保存失败")
console.log("code：" + error.code + ";msg:" + error.message);
}

'''

_AJian_

感谢分享

Wudy

赞，但是IOS要怎么写？

BirdZhang

+1，ios呢？plus.webview不能截取canvas里面的图

2016-08-19 16:59

木子田心七

plus.webview.WebviewObject.draw可以对指定部分内容截图吗？（用过html2canvas，但在手机上截图模糊）

张释

请问前辈这个问题解决了吗？

2018-06-23 18:35

hzxb

CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");
这里出错的

上官萧晨

去掉这的CompressFormat 就可以了，但是又出现个新问题，截图按钮成俩个了

2017-01-14 10:07

hzxb

bitmap.compress(bBitmap.CompressFormat.PNG, 100, bStream);
这里出错，请问是什么原因？？？

1***@qq.com - 90后IT男

具体怎么解决啊，少代码啊

2***@qq.com

控制台报错，而且保存的图片字符串长度为0，图一和图二报错是在同一行，

Wells

这是文档上例子，供参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 截屏绘制
var bitmap=null;
function captureWebview() {
bitmap = new plus.nativeObj.Bitmap('test');
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap,function(){
console.log('截屏绘制图片成功');
},function(e){
console.log('截屏绘制图片失败：'+JSON.stringify(e));
});
}
</script>
</head>
<body>
截屏绘制Webview窗口<br/>
<button onclick="captureWebview()">Draw</button>
</body>
</html>