html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)
2022/1/7 17:03:29
本文主要是介绍html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
https://www.cnblogs.com/benbenfishfish/p/9674197.html
需要引用的库请点击附件下载 ↓
附件
源码参考直接右键 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip
html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)
项目中有用到h5识别我们的单据,单据上面有二维码. 实现的场景就是业务人员扫码 类似以下场景
业务员拿到单据以后,直接可以扫码进入相关单据业也可以 输入二维码下方的号码进行识别
下面是h5的页面构造(部分代码参考国外网友编写的)
@{
Layout = "~/Views/Shared/_MForm.cshtml";// 这里是weui的样式 可以不用就是按钮变丑了而已
}
<style type="text/css"> body { width: 100%; text-align: center; } img { border: 0; } #main { margin: 15px auto; background: white; overflow: auto; width: 100%; } #mainbody { background: white; width: 100%; display: none; } #footer { background: white; } #v { width: 320px; height: 240px; } #qr-canvas { display: none; } #qrfile { width: 320px; height: 240px; } #mp1 { text-align: center; font-size: 35px; } #imghelp { position: relative; left: 0px; top: -160px; z-index: 100; font: 18px arial,sans-serif; background: #f0f0f0; margin-left: 35px; margin-right: 35px; padding-top: 10px; padding-bottom: 10px; border-radius: 20px; } .selector { margin: 0; padding: 0; cursor: pointer; margin-bottom: -5px; } #outdiv { width: 320px; height: 240px; border: solid; border-width: 3px 3px 3px 3px; } #result { border: solid; border-width: 1px 1px 1px 1px; padding: 20px; width: 70%; } .tsel { padding: 0; } .fileinput-button { position: relative; display: none; } </style> <script src="~/Content/scripts/weui/barcode/llqrcode.js"></script> <script src="~/Content/scripts/weui/barcode/webqr.js"></script></head>
@**@
|
这篇关于html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)