sheshuangning
/
elc24_androidapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							
<!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: #00f5f500; */
        }
        .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>