HTML5 实现扫描识别二维码生成二维码

最新推荐文章于 2024-03-07 14:40:34 发布

jerome_s

最新推荐文章于 2024-03-07 14:40:34 发布

阅读量2.8w

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/Jerome_s/article/details/47981825

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

扫描识别二维码

思路

1. 操作摄像头，获取图片。HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源。

2. 利用canvas使用相关算法分析图片识别图片得出结果，可用jquery.qrcode分析二维码。（技术点：getImageData）

局限性

移动平台支持getUserMedia/Stream API的浏览器比较少，支持列表 http://caniuse.com/#feat=stream （目前没发现有IOS是支持的）

IOS替代方案笔记：

调用摄像头拍照，把图片传到h5页面。然后在解析。

<!DOCTYPE HTML>

< html >

< head >

< title >上传图片</ title >

< meta charset = "utf-8" >

</ head >

< body >

< iframe name = "uploadfrm" id = "uploadfrm" style = "display: none;" ></ iframe >

< form name = "formHead" method = "post" action = "" id = "formHead" enctype = "multipart/form-data" target = "uploadfrm" >

< div >

< input type = "file" name = "file_head" id = "file_head" onchange = "javascript:setImagePreview();" />

</ div >

< div >

< div id = "DivUp" style = "display: none" >

< input type = "submit" data-inline = "true" id = "BtnUp" value = "确认上传" data-mini = "true" />

</ div >

</ form >

< div data-role = "fieldcontain" >

< div id = "localImag" >

< img id = "preview" width = "-1" height = "-1" style = "display: none" />

</ div >

< script type = "text/javascript" >

function setImagePreview() {

var preview, img_txt, localImag, file_head = document.getElementById("file_head"),

picture = file_head.value;

if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),

!1;

if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",

preview.style.width = "63px",

preview.style.height = "63px",

preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);

else {

file_head.select(),

file_head.blur(),

img_txt = document.selection.createRange().text,

localImag = document.getElementById("localImag"),

localImag.style.width = "63px",

localImag.style.height = "63px";

try {

localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",

localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt

} catch(f) {

return alert("您上传的图片格式不正确，请重新选择！"),