【知识整理】利用html5 canvas技术实现反差式对焦功能的相关探讨

      这里再给大家介绍一下利用html5中canvas技术简易实现相机反差式自动对焦功能的算法思路，算是帮助大家开拓思路，代码就不赘述了，有兴趣的可以亲自动手试一下。思路如下：

      1.在相机可调节的焦距范围内，每一焦距下拍摄一张目标物体的照片，这样会得到若干或清晰或模糊的照片。

      2.利用HTML5 canvas getImageData() 方法（注：如欲详细了解getImageData()方法的详细介绍，请参考本人CSDN博客《【自制】html5图像边缘查找算法》一文），可以得到每张图片的每一像素的RGBA值的二维数组，（R - 红色 (0-255)，G - 绿色 (0-255)，B - 蓝色 (0-255)，A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)）。

      3.如目标物体颜色形状较为规则，可以取到每张图像中心的十字线上每一位置（如图1）的RGBA值。如目标物体颜色形状不规则，可以取每张图像中心的米字线上（如图2）每一位置的RGBA值，存入数组中，每张图像得到一个数组，最终得到若干组数组。

                                                           

                


                                                                                   图1                                  

                



                                                                                   图2

      4.取到每张图片指定位置的RGBA值的数组后，将颜色RGB值看做一个三维空间，R，G，B分别为X，Y，Z坐标轴，坐标轴范围为0-255。计算数组中存储的每一颜色的RGBA值距离黑色-RGB（0,0,0）或白色-RGB（255,255,255）在三维空间的距离。假设数组中某一颜色的RGB值分别为a,b,c.则该颜色距黑色（0,0,0）三维空间距离的计算公式为√(a-0)^2+(b-0)^2+(c-0)^2(根号下a减0的平方加b减0的平方家c减0的平方)。将每一组数组中的值均计算距黑色的距离后求和，最终比较各组和的最大值和最小值的差值，差值越大表示该焦距下拍摄的图片色彩最为丰富，也就表示该焦距下拍摄的照片最清晰。差值最大的那组数组所代表的那张图片就是对焦后拍摄的图片了。