作用
- 便捷数据采集：
- 对于许多应用场景，如电商商品拍摄，用户能快速通过网页端直接拍摄商品图片，无需借助其他专门的图像采集软件，节省时间与操作成本。
- 在医疗领域，医护人员可以通过 Web 端直接拍摄患者伤口、病变部位等照片，方便病例资料的快速收集和整理。
- 实时交互功能：
- 当涉及到一些需要实时反馈的场景，比如在线美容教程，用户可以实时拍摄自己按照教程化妆或护肤后的样子，与教程步骤进行对比，增强学习和实践的互动性。
- 在安防监控的 Web 应用中，管理人员可以随时通过封装的拍照模块抓拍监控画面中的异常情况，为后续分析和处理提供即时图像依据。
- 丰富内容创作：
- 博客作者、自媒体人等内容创作者可以在撰写文章或制作视频脚本时，直接利用 Web 拍照模块拍摄相关素材，丰富创作内容。例如旅游博主在网页端记录旅途中的风景、人文等画面，即时分享。
意义
- 提升用户体验：
- 将拍照功能集成在 Web 应用中，减少了用户在不同应用或工具之间切换的麻烦，提供了一站式的服务体验。例如在线教育平台，学生在完成实验报告等作业时，能直接拍照上传实验成果，操作流畅自然，提升了整体学习体验。
- 满足了用户在浏览网页过程中即时记录、分享等需求，符合当下快节奏的数字化生活方式，增强了用户对 Web 应用的好感度和粘性。
- 拓展应用场景：
- 为各类 Web 应用开拓了新的功能维度。比如房地产中介的 Web 平台，看房者可以通过拍照模块拍摄房屋细节，与中介或其他潜在购房者交流讨论，丰富了房屋展示和沟通的方式。
- 在智慧城市建设相关的 Web 应用中，市民可以通过拍照模块上传城市问题（如道路损坏、公共设施故障等）的照片，协助城市管理部门更高效地发现和解决问题，拓宽了公众参与城市治理的途径。
- 促进跨平台一致性：
- 无论用户使用何种设备（电脑、平板、手机等）访问 Web 应用，都能享受到统一的拍照功能体验。这有助于打破不同设备原生拍照应用的差异，保证功能的一致性和稳定性，提高 Web 应用的通用性和兼容性。
代码
样式
.仙盟创梦_插件_拍照_dlg {
width: 90%;
max-width: 500px;
border: none;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
padding: 0;
margin: 0 auto;
margin-top: 70px;
}
.仙盟创梦_插件_拍照_dlg::backdrop {
background-color: rgba(0,0,0,0.5);
}
.仙盟创梦_插件_拍照_dlg .仙盟创梦_插件_拍照_容器 {
padding: 20px;
}
.仙盟创梦_插件_拍照_dlg .camera-preview {
width: 100%;
aspect-ratio: 4/3;
background-color: #000;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.仙盟创梦_插件_拍照_dlg video, canvas {
max-width: 100%;
max-height: 300px;
}
.仙盟创梦_插件_拍照_dlg .camera-controls {
display: flex;
gap: 10px;
justify-content: center;
}模板
<dialog id="仙盟通用_拍照dig" class="仙盟创梦_插件_拍照_dlg">
<div class="仙盟创梦_插件_拍照_容器">
<h4>拍照上传</h4>
<div class="camera-preview" id="cameraPreview">
<video id="videoElement" autoplay></video>
<canvas id="canvasElement" class="hidden"></canvas>
</div>
<div class="camera-controls">
<button class="custom-button" id="captureButton" onClick="仙盟插件_通用_拍照预览();">拍照</button>
<button class="custom-button" id="usePhotoButton" disabled onClick="仙盟插件_拍照_使用照片('仙盟通用_拍照dig','仙盟通用_头像_img','仙盟通用_头像_data');">使用照片</button>
<button class="custom-button" id="retakeButton" disabled onClick="仙盟插件_通用_图片_重拍();">重拍</button>
<button class="custom-button" onClick="仙盟创梦_插件_拍照_关闭('仙盟通用_拍照dig');">关闭</button>
</div>
</div>
</dialog>函数
function 仙盟插件_通用_图片_拍照(人间通道id,检验关卡img,仙界指引id){
仙盟插件_通用_启动摄像头();
const 人间通道 = document.getElementById(人间通道id);
人间通道.showModal();
}
function 仙盟插件_拍照_使用照片(人间通道id,检验关卡img,仙界指引id)
{
const 人间通道 = document.getElementById(人间通道id);
const videoElement = document.getElementById('videoElement');
const canvasElement = document.getElementById('canvasElement');
const imageData = canvasElement.toDataURL('image/jpeg', 0.8);
//仙盟插件_通用_摄像头_更新(imageData);
const 检验关卡 = document.getElementById(检验关卡img);
const 仙界指引 = document.getElementById(仙界指引id);
检验关卡.src = imageData;
仙界指引.value = imageData;
人间通道.close();
仙盟插件_摄像头_停止();
}
function 仙盟插件_通用_图片_重拍()
{
仙盟插件_拍照_重新初始化按钮();
仙盟插件_通用_启动摄像头();
}
function 仙盟创梦_插件_拍照_关闭(人间通道id){
const 人间通道 = document.getElementById(人间通道id);
人间通道.close();
仙盟插件_摄像头_停止();
//
}
// 启动摄像头
function 仙盟插件_通用_启动摄像头() {
const videoElement = document.getElementById('videoElement');
const canvasElement = document.getElementById('canvasElement');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => {
videoElement.srcObject = stream;
videoElement.style.display = 'block';
canvasElement.style.display = 'none';
})
.catch(error => {
console.error('无法访问摄像头:', error);
alert('无法访问摄像头，请确保已授予权限。');
仙盟通用_拍照dig.close();
});
} else {
alert('您的浏览器不支持摄像头API');
仙盟通用_拍照dig.close();
}
}
// 停止摄像头
function 仙盟插件_摄像头_停止() {
const videoElement = document.getElementById('videoElement');
const canvasElement = document.getElementById('canvasElement');
if (videoElement.srcObject) {
videoElement.srcObject.getTracks().forEach(track => {
track.stop();
});
videoElement.srcObject = null;
}
}
// 拍照并显示预览
function 仙盟插件_通用_拍照预览() {
const context = canvasElement.getContext('2d');
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
videoElement.style.display = 'none';
canvasElement.style.display = 'block';
// 更新按钮状态
captureButton.disabled = true;
usePhotoButton.disabled = false;
retakeButton.disabled = false;
}
// 重置摄像头UI
function 仙盟插件_拍照_重新初始化按钮() {
const videoElement = document.getElementById('videoElement');
const canvasElement = document.getElementById('canvasElement');
const cameraPreview = document.getElementById('cameraPreview');
const captureButton = document.getElementById('captureButton');
const usePhotoButton = document.getElementById('usePhotoButton');
const retakeButton = document.getElementById('retakeButton');
videoElement.style.display = 'block';
canvasElement.style.display = 'none';
captureButton.disabled = false;
usePhotoButton.disabled = true;
retakeButton.disabled = true;
}
阿雪技术观
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量
Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progress.