大家来一起开发HTML5项目如何【系列二】

之前出系列一,大家都没能积极响应,心里有点小失落。再加上年底公司事情比较多,就一直搁着,昨天开始继续研究,算是取得了一些进步,

不过又遇到了新的瓶颈。接下来就跟大家分享下这两天的成果吧。

系列一中确定了思想,主要从以下几个方面着手,

1、用HTML5调用摄像头,进行拍照。

2、将拍照获取的图像数据流传到后台进行解析。

3、返回数据,如果解析不成功继续解析,知道解析成功为止。

第一步已经在我的博客中有了。

http://blog.csdn.net/laijieyao/article/details/41241815

第二步具体代码如下,通过post方式传送数据到后台进行解析

function CatchCode() {
		        $("#snap").click();
		        //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途
		        var canvans = document.getElementById("canvas");
		        //获取浏览器页面的画布对象
		        //以下开始编 数据
		        var imgData = canvans.toDataURL();
		        //将图像转换为base64数据
		        var base64Data = imgData.substr(22);
		        //在前端截取22位之后的字符串作为图像数据
		        //开始异步上
		        $.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {
		            if (status == "success") {
		                if (data == "OK") {
		                    alert("OK");
		                }
		                else
		                {
		                    CatchCode();
		                }
		            }
		            else {
		                CatchCode();
		            }
		        }, "text");
		    }

后台主要接收数据流代码:

            img = context.Request["img"].ToString();
            //获取base64字符串
            byte[] imgBytes = Convert.FromBase64String(img);
            //将base64字符串转换为字节数组
            System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
            //将字节数组转换为字节流
            //将流转回Image,用于将PNG 式照片转为jpg,压缩体积以便保存。
            System.Drawing.Image image = System.Drawing.Image.FromStream(stream);

解析二维码我用了小日本的ThoughtWorks.QRCode这个插件,这里必须自责一下。

        QRCodeDecoder decoder = new QRCodeDecoder();
        System.Drawing.Bitmap bitMap=new System.Drawing.Bitmap(path);
        String decodedString = decoder.decode(new QRCodeBitmapImage(bitMap));

第三步,如果解析失败则报异常,在catch部分我用return,则在前台的status不可能为success,前台接收的status字段如果不为success则继续往后台发送数据,

进行递归调用,直到解析完毕为止。

目前遇到的问题:

如果从网上下载的清晰的二维码图片放到系统中尝试可以读取成功,如果用摄像头拍摄的二维码则无法读取成功,

这点我也很纳闷,刚开始怀疑是电脑摄像头像素太低,结果用手机扫也还是解析不了,后面网上查了资料说要先把图片弄成黑白的,结果还是不行,

现在已处于瓶颈期,如果有做过这个的大神给点指导,让大家也学习学习,等这个瓶颈期过了能用我就把全部源代码贴出来。

大家给个意见或者想法咯!!!!

时间: 2024-10-08 09:59:24

大家来一起开发HTML5项目如何【系列二】的相关文章

cocos2d-x创建项目(系列二)

1.需要的软件 1.1 VS2012 下载地址 百度吧! 1.2 cocos2d-x-3.0rc0.zip下载地址 1.3 CocoStudio_V1.3.0.0.exe 下载地址 1.4 NDK    android-ndk-r9d-windows-x86.zip 下载地址 1.5 SDK    adt-bundle-windows-x86-20131030.zip 下载地址 1.6 Visual Assist X 10.8.2029.0.7z 1.7 python2.7 python_win

大家来一起开发HTML5项目如何

突然心血来潮,伴随着我这颗小小CPU的转动,想与其每次写blog都是把已经做好的东西贴出来,不如偶尔来次大家一起做项目,逐步进行,这样无论对大家还是对我的帮助都是很大的,虽然俺不是啥大牛,但是却从头到尾跟过一个项目,希望借此能给大家提供点项目开发的经验,也当然非常欢迎大牛们的独到的见解咯. 首先先确定业务需求,俺想做一个扫描二维码并解读的功能.用HTML5来做,这样能够实现跨平台. 先确定开发环境,如果用java的话eclipse/IntelliJ IDEA都是很不错的选择,用C#用VS2012

设计模式综和实战项目x-gen系列二

1  详细功能 1.1  详细功能 配置管理模块的主要功能是: 1:获取用户配置的数据,配置的方式很多,要求除了框架自身提供的配置方式外,还要能支持用户自定义的配置方式.比如:框架本身提供默认的配置方式为xml配置,如果用户想使用数据库来配置,那么框架必须能够支持用户自定义一种数据库配置的方式 2:缓存用户配置的数据,同一份配置数据,在运行期间会多次使用,但是获取用户配置数据的动作就只需要一次就可以了,获取过后,就缓存下来. 3:对外提供接口,让其他模块通过这些接口来获取他们需要的数据 1.2

GEF(Graphical Editor Framework) Eclipse项目入门系列(2)---Draw2D开发环境的搭建

GEF(Graphical Editor Framework) Eclipse项目入门系列(1)---概述中,我们已经提到了Draw2D框架是GEF框架的重要组成部分.那么Draw2D的环境如何搭建起来呢?其实很简单,去Eclipse的官方网站下载一个Eclipse的开发环境(这一部门我就不再赘述,网上的资料很多).笔者本人的电脑上装的是Indigo,所以笔者将会以Eclipse Indigo为例子给大家演示Draw2D开发环境的搭建.具体情况,请见下面的步骤. (1) 打开Indigo Ecl

【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系

真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧.(对了,今年初也出了自己第二本书<iOS游戏编程之从零开始-Cocos2d-x与cocos2d引擎游戏开发>) 百牛信息技术bainiu.ltd整理发布于博客园 废话少扯,最近又研究了下Cocos2d-HTML5相关引擎,其实说起HTML5,3.4年前Himi就接触过了,那时候的HTML5 Canvas  对我印象很深,但是不论当时还是现

SSM框架开发web项目系列(二) MyBatis真正的力量

前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBatis的基础内容,包括基本概念.开发步骤.使用实例等.说起MyBatis,工作中做过SSH/SSM相关Web开发的或者正在学习MyBatis的人或多或少都会接触到类似“MyBatis和Hibernate有什么区别?”,“MyBatis和Hibernate哪个更好?”,“为什么Mybatis用的人越来

iOS开发UINavigation系列二——UINavigationItem

iOS开发UINavigation系列二--UINavigationItem 一.引言 UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理的,同样,每一个Item自身也有许多属性可供我们进行自定制.这篇博客,主要讨论UINavigationItem的使用方法. UINavigationBar:http://my.oschina.net/u/2340880/blog/527706. 二.来说说UINavi

JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)

继之前用游戏引擎(青瓷引擎)做了斗地主单机版游戏之后,这里分享下使用socket.io来实现网络对战,代码可已放到github上,在此谈谈自己整个的开发思路吧. 客户端代码 服务端代码 (点击图片进入游戏体验) 前文链接: javascript开发HTML5游戏--斗地主(单机模式part1) javascript开发HTML5游戏--斗地主(单机模式part2) javascirpt开发HTML5游戏--斗地主(单机模式part3) 本文章为网络对战第一部分内容.主要内容如下: 简介 服务端项

JAVA card 应用开发 在项目增加APPLET

在上篇博文中,<JAVA card 应用开发创建第一个APPLET>,介绍了一个项目从无到有. 那么,我们建立了这个项目后,只有一个应用(一个可选AID),如果我希望这个项目可以有多个应用(有多个AID可选),就类似卡片初始化后,我可以选择PSE,可以选择PPSE,而且有多个AID存在,那么怎么在项目中添加AID呢? 1.      在已有的项目名称,右键,选择"New",再选择"Java card Applet",如下图1. 图1. 新建Applet