uni-app 有没有屏幕截图、截屏的插件
uni-app 有没有屏幕截图、截屏的插件
html5+有没有类似在手机qq钱包里买东西然后将交易结果保存成图片的插件，
要实现这样截屏并保存到本地从什么方向下手？
更新=====
plus.webview补充了截屏方法，这个效率更高，而且ios、Android都可以直接用。http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.draw
以下为过期信息===========================================
不需要插件，Native.js搞定。附件是一段Native.js代码。
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>
为什么，我复制下来的报错了
Uncaught Attempt to invoke virtual method ‘java.lang.String java.lang.Class.getName()’……
使用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));
});
}
‘’’
CompressFormat = plus.android.importClass(“android.graphics.Bitmap.CompressFormat”);
这里出错的
这是文档上例子，供参考：
<!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窗口<button onclick="captureWebview()">Draw</button> </body> </html>
在uni-app中，虽然官方没有直接提供一个内置的屏幕截图插件，但你可以通过一些方法实现屏幕截图功能。以下是一个使用HTML5 Canvas和JavaScript实现屏幕截图的示例代码，你可以在uni-app项目中集成并使用它。
首先，你需要创建一个页面或组件，并在其中添加用于触发截图功能的按钮以及展示截图结果的区域。然后，你可以使用Canvas API来捕获页面的屏幕截图。
示例代码
- 页面或组件的模板部分（template）：
<template>
<view>
<button @click="captureScreen">截图</button>
<image v-if="screenshot" :src="screenshot" style="width: 100%; height: auto;"></image>
</view>
</template>
- 页面或组件的脚本部分（script）：
<script>
export default {
data() {
return {
screenshot: null, // 存储截图的URL
};
},
methods: {
captureScreen() {
// 创建一个与页面大小相同的Canvas
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 获取Canvas的2D绘图上下文
const context = canvas.getContext('2d');
// 创建一个临时的Image对象，并设置其src为当前页面的URL（这里使用'#'表示当前页面）
const img = new Image();
img.src = '#'; // 注意：在uni-app中，这里可能需要特殊处理，如先渲染到一个离屏Canvas再截图
// 当Image加载完成后，将其绘制到Canvas上
img.onload = () => {
// 注意：由于uni-app的限制，直接使用img.src = '#'可能不会生效
// 这里应该使用uni-app提供的API或方法来获取页面内容并绘制到Canvas上
// 以下是一个假设性的处理，实际需要根据uni-app的特性进行调整
// 例如，你可能需要先将页面内容渲染到一个隐藏的Canvas上，然后再从那个Canvas复制到新的Canvas进行截图
// 假设我们已经有一个包含页面内容的Canvas，名为sourceCanvas
const sourceCanvas = document.getElementById('sourceCanvas'); // 这个ID需要你自己在页面中定义一个隐藏的Canvas
if (sourceCanvas) {
context.drawImage(sourceCanvas, 0, 0, canvas.width, canvas.height);
// 将Canvas内容转换为Data URL
this.screenshot = canvas.toDataURL('image/png');
} else {
console.error('Source canvas not found!');
}
};
// 注意：上面的img.onload处理可能不适用于uni-app，因为img.src = '#'不会加载任何内容
// 你需要根据uni-app的实际情况进行调整，比如使用uni-app提供的API进行截图
},
},
};
</script>
注意：上面的代码示例中，直接使用img.src = '#'来加载当前页面内容的方法在uni-app中是不会生效的。你需要根据uni-app的特性，使用其提供的API或方法来获取页面内容，并将其绘制到Canvas上。例如，你可以先将页面内容渲染到一个隐藏的Canvas上，然后再从那个Canvas复制到新的Canvas进行截图。由于uni-app的具体实现细节可能会有所不同，你需要参考其官方文档或社区资源来进行调整。
