|
|
@@ -0,0 +1,127 @@
|
|
|
+
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Android相机调用演示</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: 'Arial', sans-serif;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ max-width: 500px;
|
|
|
+ width: 100%;
|
|
|
+ background: white;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ background: #4285f4;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0;
|
|
|
+ transition: background 0.3s;
|
|
|
+ }
|
|
|
+ .btn:hover {
|
|
|
+ background: #3367d6;
|
|
|
+ }
|
|
|
+ .preview {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 400px;
|
|
|
+ object-fit: contain;
|
|
|
+ margin: 20px 0;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .error {
|
|
|
+ background: #ffebee;
|
|
|
+ color: #c62828;
|
|
|
+ }
|
|
|
+ .success {
|
|
|
+ background: #e8f5e9;
|
|
|
+ color: #2e7d32;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <h1>相机调用演示</h1>
|
|
|
+ <p>点击下方按钮调用Android相机拍照</p>
|
|
|
+
|
|
|
+ <button class="btn" id="openCameraBtn">打开相机</button>
|
|
|
+
|
|
|
+ <div id="statusMsg" class="status" style="display: none;"></div>
|
|
|
+
|
|
|
+ <img id="preview" class="preview" alt="拍摄预览">
|
|
|
+
|
|
|
+ <input type="file" id="cameraInput" accept="image/*" capture="camera" style="display: none;">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ const openCameraBtn = document.getElementById('openCameraBtn');
|
|
|
+ const cameraInput = document.getElementById('cameraInput');
|
|
|
+ const preview = document.getElementById('preview');
|
|
|
+ const statusMsg = document.getElementById('statusMsg');
|
|
|
+
|
|
|
+ openCameraBtn.addEventListener('click', function() {
|
|
|
+ cameraInput.click();
|
|
|
+ });
|
|
|
+
|
|
|
+ cameraInput.addEventListener('change', function(e) {
|
|
|
+ if (e.target.files && e.target.files[0]) {
|
|
|
+ const file = e.target.files[0];
|
|
|
+
|
|
|
+ if (!file.type.match('image.*')) {
|
|
|
+ showStatus('请选择图片文件', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const reader = new FileReader();
|
|
|
+
|
|
|
+ reader.onload = function(event) {
|
|
|
+ preview.src = event.target.result;
|
|
|
+ preview.style.display = 'block';
|
|
|
+ showStatus('图片加载成功', 'success');
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.onerror = function() {
|
|
|
+ showStatus('图片读取失败', 'error');
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function showStatus(message, type) {
|
|
|
+ statusMsg.textContent = message;
|
|
|
+ statusMsg.className = 'status ' + type;
|
|
|
+ statusMsg.style.display = 'block';
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ statusMsg.style.display = 'none';
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
sheshuangning
