识别快递单号(2) - 加载图片到canvas

传送门: 识别快递单号(1) - 图像处理   转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html

上篇说到我突然想到了一个问题: 这些代码究竟运行在什么位置, 手机端还是服务器? 又如何获取图片?
　　1. 手机端: 现在的浏览器还不支持javascript调用后置摄像头(Chrome可以调用前置摄像头), 需要开发一个App, 那么可以在拍照时确定条码的位置(像所有的扫码软件一样), 然后把这条线发送到服务器上. 那么服务器所做的就是灰度化, 二值化, 适当的闭操作让图像更清晰, 识别.
　　2. 服务器: 将上传来的图片灰度化, 二值化, 去除多余部分, 找到条码位置, 识别. 其中找条码位置比较复杂, 再一个比较浪费流量.
说到这里突然想起来还有html5呢, 获取选中的图片画到canvas上再处理. 做了一个尝试, 从<input type="file" />可以调用摄像头, 我用的是Android下的Chrome和iOS下的Safari来测试的.
如何通过<input type="file" />标签来获取数据请看这里: 如何预览将要上传的图片-使用H5的FileAPI

好了, 经过测试发现Chrome支持的很好, Safari不行, 寻找原因中... 测试代码如下:

<input type="file" id="upfile" />
<canvas style="border:1px solid #c3c3c3"></canvas>
<script>
    document.querySelector('#upfile').onchange = function(evt){
        if(evt.target.files.length < 1) return;
        var file = evt.target.files[0];
        if(file.type.match('image.*')) return;

        var reader = new FileReader();
        reader.onloadend = function(e){
            if(e.target.readyState == FileReader.DONE){
                var c = document.querySelector('canvas');
                var cxt = c.getContext('2d');
                var img = new Image();
                img.src = e.target.result;
                c.width = img.width;
                c.height = img.height;

                cxt.drawImage(img, 0, 0);
            }
        };
        reader.readAsDataURL(file);
    }
</script>

怀疑过图片加载延迟的问题, 改为img的onload事件中处理还是仅仅在Safari中没有图像. 在这个问题上浪费了不少时间, 暂时开始研究下一步, 以后看看能不能绕开绘制canvas这步.

嗯... 似乎Safari不支持javascript读取准备上传的照片... 好了这篇先这样, 下篇再接着说.

参考资料: Javascript图像处理系列