chrome内核 用h5调用高拍仪（摄像图）实现拍证件照

最新推荐文章于 2023-05-05 21:02:06 发布
最新推荐文章于 2023-05-05 21:02:06 发布
阅读量1.2w 收藏 3
点赞数 2
分类专栏： web前端 文章标签： h5 高拍仪 摄像图 填单台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangmingleiluo/article/details/86631209
版权

最近做一些填单台的项目，需要调用高拍仪对证件进行拍照。并上传到后台。
我们的客户端用的是chrome内核，内嵌网页，支持h5.然后就去网上找一些例子来参考。现在找到了一个不错的插件。感谢原创作者的无私分享。
关注lovepythoncn,在这里插入图片描述

回复拍照，即可获取百度云分享链接
注意你需要放在http服务器下访问，打开直接报错。

大概实现思路

前端界面h5 api调用本地摄像头，然后拍照结束后可以截取预览，最后将结果以base64提交到后台.
技术用到的主要有

  • vedio标签
  • canvas
  • navigator.mediaDevices.getUserMedia

效果图
在这里插入图片描述
在这里插入图片描述

怎么上传到数据库呐？

生成的图片是base64的

  • 方法一：把base64字符串上传后台，用io流输出图片
  • 方法二： 把base64保持到clob字段
程序员石磊
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
H5调用本地摄像头进行照片拍摄、证件采集、可获取多个摄像头列表等
08-08
H5调用本地摄像头进行照片拍摄、证件采集如果本地连接有多个摄像头,可获取多个摄像头列表,可选择不同摄像头进行不同类型的照片采集
3.高拍仪谷歌内核demo_websocket_高拍仪demo_
10-03
支持不在IE上通过websocket调用高拍仪
iOS手持证件照相机：【拍身份证裁剪大小，截图截出所需大小】（带拍摄区域边框及半透明遮罩层）
01-07
原理文章：https://kunnan.blog.csdn.net/article/details/112311308 手持证件照的裁剪算法：根据图片方向进行裁剪） 屏幕适配：为了避免框框视图的frame超出视图范围，导致半透明黑色遮罩无法渲染maskLayer；框框视图的布局采取宽为屏幕宽度，高按照比例进行计算
良田高拍仪摄像头插件兼容chrome含demo可直接使用
11-04
良田高拍仪兼容chrome进行操作的demo程序，程序需要安装对应的驱动，驱动包含在资源中。控件件支持IE，Chrome，FireFox三大主流浏览器内核，支持Win7，Win8，Win8.1及Win10等操作系统。注意：浏览器需要支持HTML5协议,websocket才能正常使用该控件。 1. 提供设备选择 2. 支持设备预览 3. 设置出图格式 4. 设置分辨率 5. 支持拍照功能 6. 获取拍照图像类型文件的BASE64数据 7. 设置纠偏裁边 8. 二代证识别 9. 人证比对 10.ocr文字识别 11.脸部裁剪 12.用户自定义设置 13.图片合成pdf
h5摄像头拍身份证
qq_37997463的博客
10-09 1400
<title>摄像头拍照</title> <script src="./js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="./js/tool.js"></script> <script src="./js/global.js"></script> <script src="https...
H5调用摄像头及拍照
07-18
HTML5调用摄像头,并拍照，希望对大家有帮助吧。。
h5调取摄像头
Fay的博客
07-03 1703
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &l
H5身份证上传识别功能
tangyuhui
10-12 1万+
&amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;bg-fff&amp;amp;quot; style=&amp;amp;quot;min-height:100%;&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;p-
小程序实现身份证取景框拍摄
科技男
11-27 9263
身份证取景框的实现主要是借助于camera 组件及cover-view组件 先看下案例 wxml代码 <view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <cover...
uniapp 微信小程序 - 调起手机摄像头: 拍摄身份证的正反面，自定义身份证取景框，在相机上绘制 “身份证轮廓“ 与提示文字（超详细示例源码，一键复制运行开箱即用）
高级前端工程师
05-05 6355
uniapp微信小程序拍摄身份证专用相机，uniapp小程序如何在相机上增加图片和文字，uniapp微信小程序怎么给调起的相机加入自定义图片，unapp小程序实现给相机上面铺上身份证正反面轮廓，uniapp微信小程序自定义相机的取景框示例，uni-app实现小程序身份证取景框，uniapp小程序平台给相机加上身份证辅助线的轮廓，uniapp小程序实现身份证取景框拍摄，uniapp微信小程序自定义相机 ，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题，uni-app自定义摄像头拍照添加人物框
良田高拍仪浏览器demo兼容chrome
12-19
良田高拍仪兼容chrome进行操作的demo程序，程序需要安装对应的驱动，驱动包含在资源中。控件件支持IE，Chrome，FireFox三大主流浏览器内核，支持Win7，Win8，Win8.1及Win10等操作系统。注意：浏览器需要支持HTML5协议,websocket才能正常使用该控件。 1. 提供设备选择 2. 支持设备预览 3. 设置出图格式 4. 设置分辨率 5. 支持拍照功能 6. 获取拍照图像类型文件的BASE64数据 7. 设置纠偏裁边 8. 二代证识别 9. 人证比对 10.ocr文字识别 11.脸部裁剪 12.用户自定义设置 13.图片合成pdf 14.本地文件上传 15.录像
良田高拍仪跨浏览器控件SDKV2.3.0
05-09
良田高拍仪跨浏览器控件SDKV2.3.0, 不是客户端开发SDK, chrome浏览器开发扫描仪程序要用它
如何使用HTML5实现拍照上传应用
01-31
App如何用手机进行拍照，显示在页面上并上传到服务器。1、视频流HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签...
网站前端性能优化终极指南
热门推荐
程序员石磊
08-09 1万+
性能黄金法则:80- 90%的终端用户响应时间花在下载前端，即页面上的所有组件:img、stylesheets、scripts等
从富文本编辑器获取html内容组装json，特殊字符引起报错解决办法。
程序员石磊
09-30 1万+
最近项目需要，需要从富文本编辑器获取html内容组装json，然后还要把组装后的json对象利用json2转成json字符串，数据放入编辑器提交，由于兼容ie8以上浏览器。所以搞了好久的特殊字符转义，经常出错。我们一般想到的解决办法就是转义： 这 /*3.用正则表达式实现html转码*/ function htmlEncodeByRegExp(str){ var s = ""; if
js 递归获取子节点所有父节点，深度遍历获取第一个子树
程序员石磊
06-10 7973
前端需求。 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, id) { for (var i = 0; i < arr.length; i++) { var item = arr[i] ...
Paho JavaScript Client 基于websocket实现 mqtt客户端
程序员石磊
01-15 7433
mqtt服务器采用activemq实现。 首先配置activemq支持websocket. 具体配置，请点击activemq官网配置。 编写客户端页面，引入Paho官方客户端js库。 具体配置，请点击查看 贴出关键代码如下： // Create a client instance //注意不要在client前写var client = new Paho.MQTT.Client(l
js tree 根据子节点找到所有父节点
程序员石磊
06-20 4923
利用深度优先遍历和递归 var acceptUnitNodes = null;//接收单位树形数据 function findParentNode(ids){ //ids 是子节点数组 var parentNodes = [];//所有父节点 var forfun = function (id,nodes) { for(var i=0;i<nodes.length;i++){ var currentNode = nodes[i]; if(currentNode.id =
c# Chrome内核 js 调用 后端方法
最新发布
07-11
在C#中，你可以使用CefSharp库来实现Chrome内核的集成，并通过JavaScript调用后端方法。以下是一些基本步骤： 1. 首先，你需要在项目中引用CefSharp库。你可以通过NuGet包管理器安装CefSharp。 2. 在C#代码中，你需要创建一个ChromiumWebBrowser控件来承载Chrome内核。你可以将该控件添加到窗体或用户控件中。 ```csharp using CefSharp; using CefSharp.WinForms; // 创建ChromiumWebBrowser控件 ChromiumWebBrowser browser = new ChromiumWebBrowser(); ``` 3. 接下来，你需要在窗体加载时初始化ChromiumWebBrowser控件，并注册C#方法供JavaScript调用。 ```csharp // 初始化ChromiumWebBrowser控件 browser.Dock = DockStyle.Fill; this.Controls.Add(browser); // 注册C#方法供JavaScript调用 browser.RegisterJsObject("backend", new BackendMethods()); ``` 4. 创建一个类来定义后端方法，供JavaScript调用。 ```csharp public class BackendMethods { public void MyMethod(string data) { // 在这里编写后端方法的逻辑 } } ``` 5. 在JavaScript中，你可以通过window.backend对象来调用后端方法。 ```javascript // 调用后端方法 backend.MyMethod("Hello, backend!"); ``` 当JavaScript调用后端方法时，C#中的BackendMethods类中相应的方法将被调用，并且你可以在那里编写你的后端逻辑。 请注意，以上只是一个简单的示例，你可以根据自己的需求进行适当的修改和扩展。此外，使用CefSharp库也提供了更多高级功能，如处理JavaScript事件、获取返回值等。你可以参考CefSharp的文档和示例代码来了解更多详细信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员石磊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值