dipper
dipper
  • 发布:2015-05-13 11:11
  • 更新:2019-12-16 15:57
  • 阅读:16455

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

分类:Native.js

html5+有没有类似在手机qq钱包里买东西然后将交易结果保存成图片的插件,
要实现这样截屏并保存到本地从什么方向下手?

2015-05-13 11:11 1 条评论 负责人:无 分享
已邀请:

最佳回复

DCloud_heavensoft

DCloud_heavensoft

更新=====
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

  • 214123975@qq.com

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

    2018-10-31 10:38

  • DCloud_heavensoft

    回复 214123975@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

xiaonan_789@qq.com

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

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

今夕何夕也

今夕何夕也 - 保密

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

_AJian_

_AJian_

感谢分享

Wudy

Wudy

赞,但是IOS要怎么写?

  • BirdZhang

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

    2016-08-19 16:59

木子田心七

木子田心七

plus.webview.WebviewObject.draw可以对指定部分内容截图吗?(用过html2canvas,但在手机上截图模糊)

  • 张释

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

    2018-06-23 18:35

hzxb

hzxb

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

  • 上官萧晨

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

    2017-01-14 10:07

hzxb

hzxb

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

1258686468@qq.com

1258686468@qq.com - 90后IT男

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

2560358896@qq.com

2560358896@qq.com

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


Wells

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>

jexm@qq.com

jexm@qq.com

如果是要生成超出屏幕的截图,怎么办??

lovewmf@sina.cn

lovewmf@sina.cn - 心有期许,未来无惧。向美而生,向上而行

使用drag截图,如果页面使用了plus.video.VideoPlayer无法截取视频,截取的图片视频区域是一片黑色

714678080@qq.com

714678080@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);
}

function saveToGallery(path) {
console.log(path)
plus.gallery.save(path, function(e) {
plus.nativeUI.toast('保存到相册成功')
console.log(JSON.stringify(e));
}, function(err) {
plus.nativeUI.toast(err.message )
console.log("保存到相册失败:" + JSON.stringify(err));
});
}

'''

lovewmf@sina.cn

lovewmf@sina.cn - 心有期许,未来无惧。向美而生,向上而行

这种方式截屏太过于局限,如果页面视频控件,多个webview是无法满足的。只能通过原生插件的方式去截屏

failedtocopy

failedtocopy

如何把base64格式的图片保存成JPG或者PNG 然后并保存到相册呢

该问题目前已经被锁定, 无法添加新回复