screenCapture 截屏一半黑屏

臭臭沟

本帖最后由臭臭沟于 2024-4-22 14:31 编辑

如题，微信分享图片的时候，使用 screenCapture 进行截屏，但是截图出来的图片有一半黑屏。这是为什么，怎么解决，求大神指导。如下图：

api.screenCapture({
region: '#share-card',
destinationType:'base64' // url
}, (ret) =>{
var base64Data = ret.base64Data
var regex = new RegExp("^" + "data:image/jpeg;base64,");
base64Data = base64Data.replace(regex,"");
var regex1 = new RegExp("^" + "data:image/jpg;base64,");
base64Data = base64Data.replace(regex1,"");
var regex2 = new RegExp("^" + "data:image/png;base64,");
base64Data = base64Data.replace(regex2,"");
var regex = new RegExp("^" + "data:image/jpeg;base64,");
var base64Data = ret.base64Data.replace(regex,"");
var trans = api.require('trans');
var timestamp = Date.parse(new Date());
var imgName = "hongcai" + timestamp.toString() + ".png"
trans.saveImage({
base64Str: base64Data,
album: true ,
imgPath:"fs://storage/",
imgName: imgName
}, (ret, err)=>{
if (ret) {
var wxPlus = api.require('wxPlus');
wxPlus.isInstalled((ret, err)=> {
if ("installed" in ret && ret.installed) {
wxShare.share_image(scene="session", thumb="widget://icon/app-icon.png", contentUrl="fs://storage/"+imgName)
} else {
api.toast({
msg:'您未安装微信，请截图保存分享！',
duration: 2000,
location: 'middle'
})
}
});
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
})

复制代码

chyd④④⑤⑤②⑦⑧⑤②

你代码怎么写的，贴一下源码看看。

臭臭沟

chyd④④⑤⑤②⑦⑧⑤② · 2024-4-22 14:20你代码怎么写的，贴一下源码看看。

代码更新了，帮忙看看，谢谢

chyd④④⑤⑤②⑦⑧⑤②

臭臭沟 · 2024-4-22 14:31代码更新了，帮忙看看，谢谢

region这个参数换成window试试

臭臭沟

chyd④④⑤⑤②⑦⑧⑤② · 2024-4-22 16:56region这个参数换成window试试

region这个参数是截取部分对应的ID，window是什么意思？
主要是我截屏的不是整个页面，而是一部分。

chyd④④⑤⑤②⑦⑧⑤②

臭臭沟 · 2024-4-23 10:20region这个参数是截取部分对应的ID，window是什么意思？
主要是我截屏的不是整个页面，而是一部分。

这个参数就是控制截图区域的，你可以试一下。

臭臭沟

chyd④④⑤⑤②⑦⑧⑤② · 2024-4-23 10:24这个参数就是控制截图区域的，你可以试一下。

是直接填字符串“window” 还是填{x: ,y: , w:, h:} 对应的坐标和宽高？

chyd④④⑤⑤②⑦⑧⑤②

臭臭沟 · 2024-4-23 10:54是直接填字符串“window” 还是填{x: ,y: , w:, h:} 对应的坐标和宽高？

天字符串“window”就可以了

臭臭沟

chyd④④⑤⑤②⑦⑧⑤② · 2024-4-23 10:55天字符串“window”就可以了

刚试了一下，能截取更个页面，但是还是有黑屏部分。好难

至高吾·尚

臭臭沟 · 2024-4-23 11:35刚试了一下，能截取更个页面，但是还是有黑屏部分。好难

这个截图功能应该是需要通过浏览器引擎去获取元素样式，然后通过canvas转化图片（我自己瞎猜的），所以这里的黑屏有可能是底层获取的这个元素样式就是黑色的，和人的视觉看到的样式不一样，所以这种情况通过插件的优化应该是很难解决了。

我个人提供你一个解决的思路，就是修改调整你页面的布局样式。你想办法调整一下页面的元素样式结构，比如先删除代码到可以显示内容的程度（哪怕是仅仅一行文字），然后再重新一点点的把你的内容加回来（这里没加一点都需要截图测试，看看加入的内容是否生效，不生效就需要调整样式），最终实现内容的完整截图

[多端开发] screenCapture 截屏一半黑屏