项目要求：

使用H5模仿微信扫一扫付款功能

经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片，经过QrCode直接再本地识别。

优点：

兼容大多数浏览器

本地识别不占用服务端资源

代码比较简单只有一个页面

Web QrCode Test

//初始化媒体对象

var c=0;

var video = document.getElementById('video'),

canvas = document.getElementById('canvas'),

img = document.getElementById('img'),

vendorUrl = window.URL || window.webkitURL;

//媒体对象

navigator.getMedia = navigator.getUserMedia ||

navagator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;

navigator.getMedia({

video: true, //使用摄像头对象

audio: false //不适用音频

}, function(strem){

console.log(strem);

video.src = vendorUrl.createObjectURL(strem);

video.play();

}, function(error) {

//error.code

console.log(error);

});

//启动定时器

setTimeout("actionP(null)","1000");

//定时器

function actionP(data){

if(data==null){

Screenshot()

}else{

if(data!=null & data!="error decoding QR Code"){//识别出数据

if(data.indexOf("http")!=-1){

window.location.href=data;

}else alert(data);

}else{//没有数据循环十次

c++;

if(c<10){

setTimeout("actionP(null)","1000");

}

}

}

}

function Screenshot(){//截取图像

canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);

var imgData = canvas.toDataURL("image/png");

load(imgData);

img.src=imgData;

}

识别二维码

function dragenter(e) {

e.stopPropagation();

e.preventDefault();

}

function dragover(e) {

e.stopPropagation();

e.preventDefault();

}

function drop(e) {

e.stopPropagation();

e.preventDefault();

var dt = e.dataTransfer;

var files = dt.files;

}

function load(name)

{

initCanvas(640,480);

//识别二维码并回调方法

qrcode.callback = actionP;

qrcode.decode(name);

}

function initCanvas(ww,hh)//创建画板

{

gCanvas = document.getElementById("qr-canvas");

gCanvas.addEventListener("dragenter", dragenter, false);

gCanvas.addEventListener("dragover", dragover, false);

gCanvas.addEventListener("drop", drop, false);

var w = ww;

var h = hh;

gCanvas.style.width = w + "px";

gCanvas.style.height = h + "px";

gCanvas.width = w;

gCanvas.height = h;

gCtx = gCanvas.getContext("2d");

gCtx.clearRect(0, 0, w, h);

imageData = gCtx.getImageData( 0,0,320,240);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。