在网络应用程序中从网络摄像头或移动摄像头拍照

2024-03-26

我正在开发一个网络应用程序,可以从本地浏览和拍照,而且我想通过相机捕获图像。我使用以下代码,我可以捕获设备相机。

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

现在,我想要获取图像和 onchangeevent,转换为 base64 并希望在该页面本身中显示。

请帮助我!


Miles Erickson 和 Henock Bongi,您需要使用 reader.readAsDataUrl($data);退出 onload 函数,以便 onload 触发。

如果你不想使用 jQuery,请参阅下面的内容:

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {     
        document.getElementById("your_img_id").src = evt.target.result                   
    };
    reader.readAsDataURL(file);                                              
} 

document.getElementById('cameraInput').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在网络应用程序中从网络摄像头或移动摄像头拍照 的相关文章

  • 如何在 Node.js 中将 HTML 转换为图像

    我需要在 Node 服务器上将 HTML 模板转换为图像 服务器将以字符串形式接收 HTML 我尝试过 PhantomJS 使用一个名为 Webshot 的库 但它不能很好地与 Flex 框和现代 CSS 配合使用 我尝试使用 Chrome
  • 如何在 Android 上禁用 HTML 输入中的自动更正?

    我无法在 Android 上的网络浏览器中禁用文本输入的自动更正 我试过这个
  • 散景服务器获取鼠标位置

    我正在开发一个带有散景 0 12 2 的交互式应用程序 它根据特定的交互更新绘图 现在 我使用滑块来更改图中字形的位置 但实际上我想访问鼠标在特定图中的位置 数据集是一个多维矩阵 张量 密集数据 每个图在特定位置显示一个维度 如果我更改一个
  • 获取 Html.TextBoxFor 字段的 HTML id

    有没有办法在 Javascript 中获取 ASP NET MVC 控件生成的客户端 ID Html TextBoxFor m gt m Name 像这样 Html IdFor m gt m Name
  • 如何删除空 html 标签(其中包含空格和/或其 html 代码)

    需要 preg replace 的正则表达式 这个问题没有在 另一个问题 中得到回答 因为并非我要删除的所有标签都不为空 我不仅要从 HTML 结构中删除空标签 还要删除包含换行符以及空格和 或其 html 代码的标签 可能的代码是 删除匹
  • CSS - 将文本保留在图像下方

    我正在尝试创建一个简单的图片库 有人告诉我使用 float left 但是当我这样做时 页脚中的所有文本都会射到第一张图像 我已经搜索了大约一个小时试图找到解决方案 但我找不到任何东西 我尝试过使用边距 边框 不同的对齐方式和各种不同的小东
  • Bootstrap 折叠 - 转到打开项目的顶部?

    我正在使用引导折叠功能 但是当我打开一个包含大量内容的元素 然后打开下一个元素时 它会向下跳转并且不会转到打开元素的顶部 我尝试过使用scrollto插件 如下所示 但它不起作用 JS function a accordion toggle
  • 检查 IE8 是否使用纯 Javascript [重复]

    这个问题在这里已经有答案了 我以前是这样检查的 browser msie browser version 8 但似乎 browser已从 jQuery 的更高版本中删除 So 我怎样才能用纯javascript检查这一点 I tried i
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • ECHO MYSQL 结果显示空白页 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我知道这一定很简单 但我做不到 我需
  • 现已弃用使用 Google Places API 获取多种类型

    谷歌最近宣布 自 2016 年 2 月 16 日起 types 参数已被弃用 取而代之的是新的类型参数 每个搜索请求仅支持一种类型 我的问题是 现在有什么方法 不使用已弃用的参数 从单个 API 调用中获取多个地点类型吗 谢谢 None
  • Firefox 扩展中的 localStorage

    我正在尝试从 Firefox 扩展访问页面的 localStorage 我的理解是content给出了参考window当前页面的 当我尝试访问页面的 localStorage 时content localStorage 我想我正在得到它的参
  • 如何在 data-disable-with 上设置 html 到 Rails Submit_tag

    我有一个使用 bootstrap 的 RoR 应用程序 我正在尝试将 fontawesome html 图标标签应用于 Submit tag 帮助程序 但它似乎不受支持 当我单击 提交 时 禁用内容仅显示为字符串 而不是解释为 html 尽
  • nested_form/cocoon:可以将表行用于嵌套字段吗?

    我通常不使用表格作为表单 但是当有嵌套表单时 使用nested form或cocoon gem时 可以将每组表单元素放在表格行中吗 对我来说 这似乎非常直观 表中的每一行都代表一个对象 但是 nested form 和 cocoon gem
  • 所有人共享的 First Load JS 在 next.js 中相当重

    I have a project on Next js framework and the problem is that First Load JS shared by all pages is rather heavy I want t
  • 使用 TypeScript / Angular2 循环对象的键/值[重复]

    这个问题在这里已经有答案了 如何使用 TypeScript 迭代对象并能够访问键和值 我的 json 对象看起来像这样 clients 123abc Forename Simon Surname Sample 456def Forename
  • .js.erb VS .js

    将 Rails 应用程序的 javascript 放入 js erb 文件而不只是将其放入 application js 文件有什么好处 我有一个企业创建按钮 因此我应该将代码放入 create js erb 文件中 还是使用以下方法将其放
  • 如何创建包含左对齐元素的宽度不确定的居中 div?

    我有几个统一的蓝色元素 div style display inline block 位于紫色 div 内的红色 div 内 Mockup https i stack imgur com ylTm9 png 图 我希望蓝色元素左对齐 一行中
  • vuejs2复制剪贴板问题

    我正在尝试使用https alligator io vuejs vue clipboard copy https alligator io vuejs vue clipboard copy 对于 Vue js 中的复制剪贴板功能 它对于字符
  • firefox 不支持 mediastreamtrack.getsources,如何执行等效操作

    有没有等效的方法来获取连接到 PC 的视频设备列表 除了内置网络摄像头连接之外 我还有一个外部网络摄像头连接 mediastreamtrack getsources 在 Chrome 中工作 但 Firefox 报告 TypeError M

随机推荐

  • 将 youtube api 帮助程序集成到 iOS 时出现错误 258

    https developers google com youtube v3 guides ios youtube helper https developers google com youtube v3 guides ios youtu
  • 编写 SQL Server 权限脚本

    我想将我对存储过程和其他内容设置的所有权限从开发数据库复制到生产数据库 通过 SSMS GUI 工具手动完成这一切非常麻烦 更不用说容易出错 因此 我正在寻找一种方法 可以直接转储在一个数据库中设置的权限 并将这些相同的权限应用于单独的数据
  • 编辑所有视图和存储过程,查找和替换?

    有没有一种简单的方法可以在我的 SQL Server 数据库中的每个视图和存储过程中查找和替换字符串 我需要将 X United Kingdom 替换为 X UK 您需要查看sysobjects和syscomments 视图和存储过程的文本
  • 如何在 Google Visualization API 中进行多行注释?

    我正在尝试使用谷歌可视化 API 生成带注释的 LineChart 当我让它工作时 我希望能够在可能的情况下使注释具有换行符 不幸的是 Google 的 API 似乎忽略了任何换行信息并将所有内容显示在一行上 有人想出解决这个问题的办法吗
  • R htmlParse XML 中的编码问题

    我尝试抓取网站但无法处理此编码问题 putting together the url search str lt allintitle amphibian richness OR diversity url lt paste http sc
  • 如何在类库中定位EF生成的元文件?

    我已将 Entity Framework 4 模型移至类库 元文件构建到 bin Debug 我用来在类库中定位元文件的连接字符串是什么 我努力了
  • 将多个谓词函数组合为一个

    是否可以编写例如 defn multiple of three n zero mod n 3 defn multiple of five n zero mod n 5 into multiple of three or five 所以我可以
  • Grails 3 Spring Security 预身份验证

    我的应用程序使用 Grails 3 我正在尝试进行预身份验证 如此处所述article https docs spring io spring security site docs 3 0 x reference preauth html
  • 如何检查 Ruby 对象的方法?

    我想知道是否有一个 Ruby 方法调用仅显示由其调用的 Ruby 对象定义的方法 而不是由其祖先类定义的所有方法 这就是methods似乎是这样 methods采用可选的布尔参数 该参数指定是否还列出对象的类及其超类的方法或仅列出对象的单例
  • SQL“之间”不包含在内

    我有一个这样的查询 SELECT FROM Cases WHERE created at BETWEEN 2013 05 01 AND 2013 05 01 但即使 1 日有数据 也没有给出任何结果 created at好像2013 05
  • 使用 SSH 从 BitBucket pip 安装自定义包,无需输入 SSH 密码

    我正在尝试使用pip install git ssh email protected cdn cgi l email protection my org my package repo git从 BitBucket 安装定制的 python
  • PHP MySQL插入多维关联数组从数组键构建查询[重复]

    这个问题在这里已经有答案了 我已经尝试了这两个链接 但我没有得到 fields 和 newdata 中的预期变量内容 这个问题在这里提出了一个新问题 PHP如何从关联数组中提取键名称和值以进行mysql查询 https stackoverf
  • 无法理解递归

    好的 所以我有一个程序 public class Rec public static void main String args test 5 static void test int n if n gt 0 System out prin
  • 如何将 docker-compose 升级到最新版本

    我已经使用命令安装了 docker compose sudo apt install docker compose 它安装了 docker compose 版本 1 8 0 并构建未知 我需要最新版本的 docker compose 或至少
  • 语法错误:JSON.parse:JSON 第 1 行第 2 列出现意外字符

    我需要将此 div 附加到另一个 div 但它给了我这个错误 语法错误 JSON parse 第 1 行第 2 列出现意外字符 JSON 数据 这是我的 JavaScript 代码 var str message message text
  • 使用 RavenDB 的“传统”一对多查询

    我知道include RavenDB 的功能 它允许我在数据库的一次往返中立即获取引用的文档 但我的问题是 我首先获取的文档不包含对 其他 文档的引用 但 其他 文档引用了当前文档 想象一下我们在世界各地都有站点的设置 每个site可能会触
  • FragmentTransaction 不执行任何操作

    我正在学习片段 下面给出的是我的第一个片段程序 一个简单的项目 我有两个屏幕 当我单击第一个屏幕的下一个按钮时 需要显示第二个按钮 我的目标是 Android 2 1 及更高版本使用兼容包 AppMainFragmentActivity j
  • Laravel 查询构建器在查询中使用 AND

    我想在查询生成器的末尾添加一个 AND 子句 代码如下所示 orderers DB table address gt where function query use term query gt where id LIKE term gt
  • 是否可以将 wasm-bindgen 与 webpack 5 一起使用?

    我跟着你好世界 https rustwasm github io docs wasm bindgen examples hello world html Guide for wasm bindgen https crates io crat
  • 在网络应用程序中从网络摄像头或移动摄像头拍照

    我正在开发一个网络应用程序 可以从本地浏览和拍照 而且我想通过相机捕获图像 我使用以下代码 我可以捕获设备相机