使用CSS和JavaScript将照片添加到HTML文件中

Question

我找不到任何特别回答我正在尝试做什么的内容（非常抱歉如果我错过了），我对编程非常陌生，我正在尝试为我的工作制作一个注册表格，在其中插入简单的内容，如姓名、昵称、电话号码等。我们希望能够插入照片，我很想展示我们用来甚至使用相机的代码，但我记不起来了，看起来像这样：

<input type="file" accept="image/*camera">

在进行操作后，照片会变得非常小并出现在拍照按钮旁边，我想知道是否有一种方法可以在屏幕上一个灰色的框内拍摄并清晰地显示照片，而不是将其放置在里面。我们正在使用CSS、JavaScript和HTML。抱歉，如果这讲得一点都不清楚，如果此前已经有人问过，请多包涵。

编辑：我们要在iPad上运行此程序，使用的是Safari或Chrome应用程序。

提前感谢大家。

- Kael

---

嗨Kael，你是在寻找这样的东西吗？https://mdn-samples.mozilla.org/s/webrtc-capturestill/ 如果是的话，你可以按照这里的教程进行操作（https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos）。 - Jeel Shah

请尝试阅读此文章：https://www.html5rocks.com/en/tutorials/getusermedia/intro/。请查看页面底部的示例。 - prasanth

Answer 1

抱歉，您在这里混淆了一些事情。 accept 是用于 MIME 类型的（例如仅使用 image/* 的图像）。 此外，您应该尝试使用 capture 属性（如MDN Web Docs上所述）。

我几年前有一个类似的项目，那里该属性接受一个布尔值。我们使用的是 Android 平板电脑。

- Ryuno-Ki