基于canvas的地理接线图自动拼接方法

1.本发明涉及图像处理，具体地说是一种通过canvas技术进行图像处理,实现多地区地理接线图自动拼接的方法。


背景技术：

2.随着东北地区电网系统的不断发展,电力系统中电力设备、输电线路的数量也不断增加。东北地区地理接线图作为一种可视化表现形式,能够方便的为办公人员提供直观的发电、输电、变电设备以及设备、线路的相对位置关系、设备参数等信息。在各地区的地理接线图绘制人员完成地理接线图的绘制工作后,需要相关人员对于辽宁、吉林、黑龙江、蒙东四个地区的地理接线图进行手动拼接操作,从而得到一张完整的东北地区地理接线图,这样不仅制图速度较慢,难以保证时效性、准确性,对于工作人员而言也需要具备一定的图像处理技能。对于电力系统地理接线图的编制、展示的工作效率,具有一定影响。


技术实现要素：

3.基于当前对于东北地区地理接线图的绘制、维护和展示需求,本发明提供一种基于canvas图像处理技术的地理接线图自动拼接方法,解决了以往需要相关人员通过专业的图像处理软件(如:photoshop),进行各地区地图的拼接工作,无法保证及时准确的展示东北地区的地理接线图的问题。
4.本发明为实现上述目的所采用的技术方案是：基于canvas的地理接线图自动拼接方法，包括如下步骤：
5.步骤1：读取待拼接的若干个地理接线图像文件,导入到canvas画布中；
6.步骤2：分别获取每个图像的图像信息；
7.步骤3：根据图像信息识别每张地图的划区界线；
8.步骤4：比对各个地图的划区界线,获取重合部分,完成地图拼接；
9.步骤5：按照格式导出图像并存储。
10.是采用javascript,html5的canvas元素在矩形画布上对其中的每一个像素进行绘制与渲染操作。
11.所述图像信息包括像素颜色信息集合、像素位置信息集合；
12.所述图像像素颜色信息集合为以单个像素信息为元素的集合，所述单个像素信息为(r
i
,g
i
,b
i
,a
i
)，其中，参数r、g、b分别为rgb颜色空间，a为表示不透明参数的alpha通道，i为当前图像的像素序列号；
13.所述图像像素位置信息集合为以单个像素位置信息为元素的集合，所述单个像素位置信息为(x
i
,y
i
)，其中，参数x、y分别为图像的宽和高，i为当前图像的像素序列号；
14.建立映射关系表，存储像素颜色信息、像素位置信息的对应映射连线，用于通过像素序列号i查找当前像素颜色的像素位置。
15.所述获取像素颜色信息是采用html5-canvas的getimagedata()方法来获取图像
的像素颜色信息。
16.所述待拼接图像的划区界线处的像素颜色信息预先已知，根据划区界线的像素颜色信息在图像像素颜色信息集合中查找匹配的像素点，根据像素点序列号在图像像素位置信息集合中查找匹配的像素位置，存储为划区界线的像素颜色信息集合和像素位置信息集合。
17.所述比对各个地图的划区界线,获取重合部分包括：
18.对于两幅拼接图像的划区界线的像素颜色信息集合和像素位置信息集合，选择起始像素点，对临接像素进行走向判断，若成立则判断为当前像素符合划区界限走向，若连续若干个像素的走向判断成立，则判断当前两幅拼接图像上的这两段划区界线为重合部分。
19.所述地图拼接为根据重合部分定位相对位移，叠加图层并去重。
20.所述导出图像格式采用无损压缩算法的位图格式。
21.所述各地区地理接线图中包含地区省界线,地区下属市级地区的市界线,地区包含的发电、输电及变电设备所处位置位于地理接线图的相对位置及连接线路。
22.本发明的有益效果和优点：
23.本发明提供一种基于canvas图像处理技术的地理接线图自动拼接方法,解决了以往需要相关人员通过专业的图像处理软件(如:photoshop),进行各地区地图的拼接工作,无法保证及时准确的展示东北地区的地理接线图的问题。
附图说明
24.图1是是本发明的方法流程图。
具体实施方式
25.为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明的具体实施方法做详细的说明。在下面的描述中阐述了很多具体细节以便于充分理解本发明。但本发明能够以很多不同于在此描述的其他方式来实施，本领域技术人员可以在不违背发明内涵的情况下做类似改进，因此本发明不受下面公开的具体实施的限制。
26.除非另有定义，本文所使用的所有技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。
27.下面依据具体过程并结合本发明的方法流程图,对本发明进行详细说明。
28.附图1为本发明的方法流程图。
29.首先导入各地区地理接线图的图像文件,然后利用javascript创建canvas元素,将辽宁、吉林、黑龙江、蒙东四个地区的地理接线图分别导入到对应的canvas画布元素当中,分别读取所导入图像中每一个像素点的像素信息。然后对每个图片的像素信息和像素点的排布规律进行分析,分析出各地区地理接线图的省界线信息,依次比对辽宁和蒙东、吉林和蒙东、黑龙江和蒙东的地理接线图省界信息,将省界线重合的位置进行拼接,将四个地区的地理接线图合并为一张完整的东北地区地理接线图。最后将东北地区地理接线图的图像信息在网页上展示出来,或者生成png格式图像进行图像文件导出。
30.具体如下：
31.canvas是指一种html5标签canvas(画布),html5的canvas元素可用于在网页上绘制2d图像。通过利用javascript,html5的canvas元素在矩形画布上对其中的每一个像素进行控制,进行逐像素的操作与渲染。
32.图像导入:通过javascript创建image对象,导入需要进行处理拼接的辽宁、吉林、黑龙江、蒙东四个地区的地理接线图图像文件。
33.实现代码样例：
[0034][0035]
像素解析:利用javascript创建canvas对象,通过html5-canvas的getimagedata()方法来获取图像的像素信息,此时获取到的信息是一个包含了图像中全部像素点的rgba像素信息的数组。例如：对每一个原始图像，获取像素信息数组[r1,g1,b1,a1,r2,g2,b2,a2,r3,g3,b3,a3,
……
]。
[0036]
图像像素信息,是指图像中,每一个像素点的rgba信息,它由rgb颜色空间与alpha通道组成。
[0037]
rgb颜色空间一般也叫做rgb颜色标准,通过r(red红色)、g(green绿色)、b(blue蓝色)所叠加形成各种颜色,这种方式几乎可以覆盖人类视觉能力可以感知到的所有颜色,图像中每一个像素点的颜色都是由这三种颜色叠加获得。
[0038]
alpha通道,一般用作像素的不透明参数,例如:一个像素的alpha通道值为0％,那么它就是一个完全透明的像素；而如果一个像素的alpha通道值为100％,那么它就是一个完全不透明的像素。
[0039]
实现代码样例：
[0040][0041]
边界识别:此处的边界是指辽宁、吉林、黑龙江、蒙东四个地区的省界线,识别省界线的意义在于为下一步的图像拼接工作做准备。在各地区地理接线图绘制过程中,省界线的绘制采用相同的颜色方案,省界线的透明度为100％,即完全不透明,所包含的alpha通道值均为100％。按照相同的的边界线颜色规则,对图像中的像素信息进行检查,识别出各个地区地理接线图的省界线信息。
[0042]
具体过程如下:
[0043]
将上一步获取到的图像像素信息数组,整理成集合形式。可通过imagedata.width和imagedata.height获得图像宽和高的像素值,在遍历数组制作集合时,将每一个像素点在图像中的位置信息(w,h)存入集合的元素中。在整理过程中,只保留属于省界线的像素信息。此前,在图像的绘制阶段,省界线均采用颜色为ffdcff的实心不透明线绘制(其对应的rgba值为r:255；g:220；b:255；a:255),其余部分不存在相同颜色的线条。在顺序取出每一
个像素点的rgba信息后,根据上面的颜色信息进行判断,只保留符合要求的像素位置信息。这样,在新创建的集合中,每一个元素都储存了像素点所处于图像的位置信息,这个集合就是该地图图像中全部的省界线像素点位置信息。
[0044]
实现代码样例：
[0045][0046][0047]
图像拼接:对各地区地理接线图省界线的像素分布进行分析,依次进行辽宁和蒙东、吉林和蒙东、黑龙江和蒙东的地理接线图拼接工作。在进行两个地区的地理接线图拼接时,首先分别对每一个图像的省界信息进行整理分析,通过像素点的排布规律进行归纳,然后对两个图像的省界像素信息进行比对,找出像素排布规律重合的部分,这个部分就是两
个地区省界线的重合部分。
[0048]
具体过程如下:
[0049]
以辽宁和吉林的图像拼接为例进行说明。
[0050]
由上一步“边界识别”步骤,分别获取到辽宁和吉林两个地区的省界线点坐标集合。依次比对两个集合中的每一个像素点,通过像素点位置的相互关系(类似于平面直角坐标系中,两个点的横纵坐标差值),寻找两个集合中,走向相同的部分或者其中的一小部分。因为地图的省界线是一条弯曲且走向多变复杂的曲线,因此在分析过程中以300个像素点进行判断,当有连续的300个像素点走向一致,就可以说明此时寻找到了它们重合的部分。
[0051]
简单举例:
[0052]
从图a,图b的集合中依次取出连续的两点信息a1,a2和b1,b2。他们所处各自图像中的位置为a1(x
a1
,y
a1
),a2(x
a2
,y
a2
)和b1(x
b1
,y
b1
),b2(x
b2
,y
b2
)。当x
a2-x
a1
＝x
b2-x
b1
且y
a2-y
a1
＝y
b2-y
b1
时,可以认为,相应的两像素点,在图像中的相对位置即曲线走向一致,若等式不成立,则说明相应的两像素点相对位置即曲线走向不一致。当两个集合中有连续的300个相对的像素点使等式成立,则说明此处为两张图片中省界线重合部分中的一段。此时选择其中一对相对的像素点,求出两点的坐标差即x
差
＝x
b1-x
a1
和y
差
＝y
b1-y
a1
,这样就得到了图b相对图a的位置关系。最后将图b中的全部像素点按照求得的横纵坐标差值进行平移,再将两个图像像素集合的内容合并、去重,就完成了两张图片像素数据的拼接。
[0053]
图像导出:通过html5-canvas的putimagedata()方法将处理后的图像导出。可以将图像在网页上展示出来,直接进行展示。也可以将所得图像的像素信息导出为png格式的图像进行下载保存。
[0054]
实现代码样例：
[0055]
context.putimagedata(像素信息,0,0)；
[0056]
标准格式图像为png(文件后缀.png)格式,是一种采用无损压缩算法的位图格式,广泛应用于java程序和网页中,具有压缩比高、生成文件体积小、网络传输显示优化等特点。
[0057]
以上所述，仅是本发明的较佳实施例，并非对本发明作任何限制，凡是根据本发明技术实质对以上实施例所作的任何简单修改、变更以及等效结构变化，均仍属于本发明技术方案的保护范围内。