html实验：百度API定位+获取摄像头拍照_html获取摄像头并添加地理位置

作者：木道寻08 | 2024-07-04 23:10:11

踩

html获取摄像头并添加地理位置

html实验：百度API定位+获取摄像头拍照

本次实验，在chrome浏览器和edge浏览器下进行。
页面效果如下，刚进入浏览器的时候，会自动获取地理位置，并显示出来
在这里插入图片描述

同时，地理位置会出现在最右侧的百度地图中。

可以开启摄像头拍照，同时将地理位置信息附在照片上。

页面效果如下
在这里插入图片描述

附上完整源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验二 百度API定位+拍照</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
			}

			.nav {
				width: auto;
				height: 10%;
				margin-bottom: 2%;
				margin-top: 2%;
			}

			.left {
				border: #31708F 1px;
				margin-right: 2%;
				float: left;
			}

			.right {
				border: #31708F 1px;
				float: left;
			}
			.rright{
				margin-left: 2px;
				float: left;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rruNjbRvbXi5Pl94XwOoTceplmLKvGTO"></script>
	</head>
	<body>
		<div class="nav">
			<h3 style="text-align: center;">在开启摄像头拍照前，请等待定位成功（可能需要十秒）</h3>
			<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" style="margin-left: 20px;" />
			<button id="snap" style="margin-left: 3px;" onclick="takePhoto()">拍照</button>
			<button onclick="downloadCanvasIamge()">保存照片</button>
		</div>
		<div class="left">
			<video id="video" width="640px" height="480px" autoplay="autoplay"></video>
		</div>
		<div class="right">
			<canvas id="canvas" width="640px" height="480px"></canvas>
			<div id="status" style="text-align: center"></div>
			
		</div>
		<div class="rright">
			<div id="container" style=" width:200px;height:200px;border:1px solid gray;"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var x = 10,
		y = 10;
	var address = "北京"; //初始定义三个全局变量,xy代表经纬度,address保存最后的地理位置信息
	window.onload = function() {
		
		if (navigator.geolocation) {
			document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
			var geolocation = new BMap.Geolocation();
			var geoc = new BMap.Geocoder();

			// 获取经纬度百度的API
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					x = r.point.lng;
					y = r.point.lat;
					
					var map = new BMap.Map("container");
					var point = new BMap.Point(x, y);
					map.centerAndZoom(point, 12);
					var marker = new BMap.Marker(point);
					map.addOverlay(marker);
					
					getMyLoc();
					alert('您的位置：' + r.point.lng + ',' + r.point.lat);
				} else {
					alert('failed  ' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			});


			//获取省份城市区域街道信息
			function getMyLoc() {
				var point = new BMap.Point(x, y);
				geoc.getLocation(point, function(rs) {
					var addComp = rs.addressComponents;
					address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
					alert(address);
				});
			}
			return;
		}
		alert("你的浏览器不支持获取地理位置！");
	};

	//获得video摄像头区域
	let video = document.getElementById("video");
	function getMedia() {
		// alert(3);
		let constraints = {
			video: {
				width: 640,
				height: 480
			},
			audio: true
		};

		let promise = navigator.mediaDevices.getUserMedia(constraints);
		promise.then(function(MediaStream) {
			video.srcObject = MediaStream;
			video.play();
		}).catch(function(PermissionDeniedError) {
			console.log(PermissionDeniedError);
		})
	}

	function takePhoto() {
		//获得Canvas对象
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext('2d');
		ctx.drawImage(video, 0, 0, 640, 480);
		ctx.font = "20px Georgia";
		ctx.fillStyle = "white"; //定义填充字体颜色为白色
		ctx.fillText(address, 100, 450);
	}

	//保存图片
	function downloadCanvasIamge(name) {
		var a = document.createElement('a');
		a.download = name || 'photo1';
		a.href = document.getElementById("canvas").toDataURL();
		a.click();
	}
</script>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/788496