The article directories

  • HTML/JS code:
  • 2. Parameter analysis:
  • 3. Effect Display:

HTML/JS code:

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="Initial - scale = 1.0, the user - the scalable = no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<link rel="stylesheet" href=".. /.. /css/mui.min.css">
		<link rel="stylesheet" type="text/css" href=".. /.. /css/app.css" />
		<link rel="stylesheet" type="text/css" href=".. /.. /css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href=".. /.. /css/mui.picker.min.css">
	</head>
	<body onload="startTime()">
		<div class="mui-card" style="height: 20%;">
			<div class=" mui-card-media">
				<img class="a" id="img" />
				<label for="myFile">
					<span id="format" class="a mui-icon mui-icon-camera" style="font-size: -webkit-xxx-large;"></span>
				</label>
				<input style="display: none;" type="file" capture="camera" id="myFile" onchange="upload('#myFile', '#img');" />
			</div>
		</div>

		<script src=".. /.. /js/mui.js"></script>
		<script src=".. /.. /js/mui.picker.min.js"></script>
		<script src=".. /.. /js/host.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			/ * * * taking pictures@param {Object} c
			 * @param {Object} d* /
			var upload = function(c, d) {
				"use strict";
				var $c = document.querySelector(c),
					$d = document.querySelector(d),
					file = $c.files[0],
					picPath = $c.value,
					reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					$d.setAttribute("src", e.target.result);
				};
				localStorage.setItem('picPath', picPath);
			};
		</script>
</html>
Copy the code

2. Parameter analysis:

Accept property (two file types: GIF and JPEG are allowed to be uploaded) 2. Capture capture to the system default device. Three parameters can be set. Camcorder -- video camera; Parameter 1 indicates the ID of "select file", parameter 2 indicates the ID of "show picture", 5. If ios can only call the camera and not open the album, select capture="camera" and add a multiple 6. File specifies the selected image, and the multiple 6 will include name, size, Type, slice, etc. 7. FileReader is an important member of the file API for reading files. According to the W3C definition, the FileReader interface provides methods for reading files and an event model containing the results of reading. Call FileReader's readAsDataURL interface, which starts loading file contents asynchronously, by giving reader an onload event. After the data is loaded, in the onLoad event processing, the contents of the file can be obtained by the result attribute of the event, and then dropped into the SRC of img to open the image and preview it.Copy the code

3. Effect Display:

Click the icon to take a photo. If you browse files and upload them on the Web, you can take photos on the mobile phone.