我一直在研究使用 html 5 <input type="file" accept="image/*" capture="camera"> 从我的 web 应用程序中拍照并使用 php 将图像上传到数据库 - 现在可以正常工作了。
但是，我似乎能找到显示“拍照”选项的唯一方法是通过一个文本字段，其中有一个名为“选择文件”的按钮
有没有办法能够单击现有图像以打开拍照选项，然后在用户选择照片/文件后显示新图像而不是现有照片？如果他们愿意保存图像，则应单击“上传”按钮。
请参见此处的 JS fiddle，希望这有点道理！ http://jsfiddle.net/6dxGY/
【问题讨论】：
如果需要输入文件直接打开相机，只需在输入文件中声明capture参数即可，如下所示：
<input type="file" accept="image/*" capture>
【讨论】：
我知道这是一个老问题，但我在尝试解决同样的问题时遇到了这个问题。我认为值得分享这个我在其他任何地方都没有找到的解决方案。
基本上，解决方案是使用 CSS 隐藏 <input> 元素并在其周围设置 <label> 样式，使其看起来像一个按钮。点击“Run code sn-p”按钮查看结果。
在此之前我也使用过 JavaScript 解决方案，但使用 CSS 解决“演示”问题也很好。
label.cameraButton {
display: inline-block;
margin: 1em 0;
/* Styles to make it look like a button */
padding: 0.5em;
border: 2px solid #666;
border-color: #EEE #CCC #CCC #EEE;
background-color: #DDD;
}
/* Look like a clicked/depressed button */
label.cameraButton:active {
border-color: #CCC #EEE #EEE #CCC;
}
/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Nice image capture button</title>
</head>
<body>
<label class="cameraButton">Take a picture
<input type="file" accept="image/*;capture=camera">
</label>
</body>
</html>【讨论】：
navigator.getUserMedia 工作正常
<input> 上的accept="image/*;capture=camera" 属性。桌面浏览器会忽略这一点，因此它们会退回到纯文件选择器。 getUserMedia 是通过浏览器从台式机/笔记本电脑的摄像头获取图像的唯一方法。
为此，您必须使用 Javascript Filereader。 （filereader-api简介：http://www.html5rocks.com/en/tutorials/file/dndfiles/）
一旦用户选择了一张图片，您就可以读取所选图片的文件路径并将其放入您的 html 中。
例子：
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
Javascript：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
【讨论】：
您可以通过向其发送 Javascript 点击事件来触发文件输入元素，例如
<input type="file" ... id="file-input">
$("#file-input").click();
例如，您可以将其放在图像的单击事件处理程序中，然后使用 CSS 隐藏文件输入。即使它不可见，它仍然可以工作。
一旦你让那部分工作，你可以在输入元素上设置一个change 事件处理程序，以查看用户何时将文件放入其中。此事件处理程序可以使用window.URL.createObjectURL 为图像创建一个临时的“blob”URL，例如：
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
该 URL 可以设置为页面上图像的src。 （不过，它只适用于该页面。不要试图将其保存在任何地方。）
请注意，目前并非所有浏览器都支持相机捕捉。 （事实上，大多数桌面浏览器都没有。）确保您的界面在用户被要求选择文件时仍然有意义。
【讨论】：