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

最新推荐文章于 2022-05-09 17:10:13 发布

kenwm

最新推荐文章于 2022-05-09 17:10:13 发布

阅读量724

点赞数 1

分类专栏：前端文章标签： html 定位 js 百度

本文链接：https://blog.csdn.net/qq_43757282/article/details/103943124

版权

前端专栏收录该内容

10 篇文章 3 订阅

订阅专栏

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>

kenwm

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html实验：百度API定位+获取摄像头拍照

html实验：百度API定位+获取摄像头拍照本次实验，在chrome浏览器和edge浏览器下进行。页面效果如下，刚进入浏览器的时候，会自动获取地理位置，并显示出来同时，地理位置会出现在最右侧的百度地图中。可以开启摄像头拍照，同时将地理位置信息附在照片上。页面效果如下附上完整源代码<!DOCTYPE html><html> <head> ...
复制链接

扫一扫

专栏目录