H5实现扫一扫

H5实现扫一扫


在本案例主要利用H5自带的API navigator的getUserMedia方法获得摄像头,并通过createObjectURL将数据流复制给video标签的src。


Canvas标签只是图形容器,您必须使用脚本来绘制图形。此例中video标签容于画布内,当我们调起摄像头后,设置一个定时函数,定时调起context.drawImage()函数,将画布内的内容进行一个截图,以数据流的形式写入到文件图片中,QRCodeAction中对该图片进行解析。

  

1.JAR包下载:


该jar包已经集成QRCode的编码包和解码包。


2.主html面:(直接复制即可调起摄像头)








 
 
 
 
扫一扫
 
  

3.主要代码:


	/**
	 * 解析二维码
	 */
	public String decoderQRCode(){
		try {
			String realpath = ServletActionContext.getServletContext().getRealPath("/file");
			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
			String imgName = sdf.format(new Date()) + ".png";
			String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
			OutputStream out = new FileOutputStream(filePath);
			QRCode.GenerateImage(img,out);//生成图片
			message  = QRCode.decoderQRCode(filePath);
			int index=message.indexOf('=');
			message=message.substring(index+1);
			System.out.println(message);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}

4.二维码生成:(附带)


	/**
	 * 生成二维码
	 */
	public String encoderQRCode(){
		String realpath = ServletActionContext.getServletContext().getRealPath("/file");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
		String imgName = sdf.format(new Date()) + ".png";
		String  imgPath= realpath+"/"+imgName;
		QRCode.encoderQRCode(content, imgPath, "png");
		message = imgName;
		return Action.SUCCESS;
	}

结果分析:经试验,这种方法能够调起电脑和安卓上摄像头实现扫一扫,对于ios系统,并不兼容。


你可能感兴趣的:(Java_Web)