首页 > 代码库 > 大家来一起开发HTML5项目如何【系列二】

大家来一起开发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 = http://www.mamicode.com/canvans.toDataURL();>


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

            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则继续往后台发送数据,

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


目前遇到的问题:

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

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

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

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





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