本发明专利技术提供了一种交互图片的处理方法、装置和电子设备，获取待处理的包括元素图标第一交互图片；该元素图标占据第一交互图片的部分图片区域；对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息；基于元素图标的边缘轮廓信息，对第一交互图片进行剪裁处理，得到包含元素图标的第二交互图片。该方式中，通过提取第一交互图片中元素图标的边缘轮廓，裁剪第一交互图片中的元素图标，同时将多余的部分裁剪掉，得到包含元素图标的第二交互图片，避免了指定页面中显示的交互图片之间相互遮挡的问题，导致的预设交互事件误触发，能够基于第二交互图片的边缘轮廓，提供预设交互事件的交互区域，提高了用户体验。提高了用户体验。提高了用户体验。
【技术实现步骤摘要】
交互图片的处理方法、装置和电子设备
[0001]本专利技术涉及计算机
，尤其是涉及一种交互图片的处理方法、装置和电子设备。
技术介绍
[0002]在一些活动页面中经常会设置一些点击元素，对该点击元素绑定点击事件后，用户点击该点击元素的任意位置均会触发对应的交互事件。由于点击元素通常为矩形透明背景图片，如果活动页面中需要不规则的排列图片时，可能会出现图片之间重叠的情况，导致点击元素中部分区域遮挡其他点击元素的图标，使得用户点击被遮挡区域图标时，实际触发了上层遮挡区域的点击事件，严重影响用户体验。
技术实现思路
[0003]有鉴于此，本专利技术的目的在于提供一种交互图片的处理方法、装置和电子设备，以避免页面中显示的交互图片之间相互遮挡的问题，提高用户体验。
[0004]第一方面，本专利技术实施例提供了一种交互图片的处理方法，方法包括：获取待处理的第一交互图片；其中，第一交互图片中包括元素图标；元素图标占据第一交互图片的部分图片区域；对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息；基于元素图标的边缘轮廓信息，对第一交互图片进行剪裁处理，得到包含元素图标的第二交互图片；其中，第二交互图片用于：当第二交互图片显示在指定页面时，基于第二交互图片的边缘轮廓，提供预设交互事件的交互区域。
[0005]进一步的，对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息的步骤，包括：对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘检测结果；将边缘检测结果绘制到预设的画布对象中，得到包含元素图标的中间交互图片；基于中间交互图片，确定元素图标的边缘轮廓信息。
[0006]进一步的，基于中间交互图片，确定元素图标的边缘轮廓信息的步骤，包括：根据预设的画布对象提供的目标接口，获取中间交互图片中每个像素点的像素数据；其中，像素数据用于指示像素点的颜色；根据像素数据，确定元素图标的边缘轮廓信息。
[0007]进一步的，根据像素数据，确定元素图标的边缘轮廓信息的步骤，包括：从中间交互图片的每行像素点中，获取每行像素点中像素数据为第一像素数据的第一像素点；其中，第一像素数据用于指示像素点为元素图标的边缘检测结果；从每行第一像素点中获取位于两端的目标像素点，将目标像素点确定为元素图标的边缘轮廓端点；将边缘轮廓端点的坐标确定为元素图标的边缘轮廓信息。
[0008]进一步的，将边缘轮廓端点的坐标确定为元素图标的边缘轮廓信息的步骤之后，方法还包括：在元素图标的边缘轮廓端点中，如果位于中间交互图片的第一边缘位置存在两个目标边缘轮廓端点；获取两个目标边缘轮廓端点之间每行或每列的边缘轮廓端点；针对每行或每列的边缘轮廓端点，将靠近第一边缘位置的边缘轮廓端点更新为行或者列对应
的第一边缘位置的边缘点。
[0009]进一步的，对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘检测结果的步骤，包括：将第一交互图片转换为灰度图；通过边缘检测算法，将灰度图中灰度值变化大于第一预设阈值的像素点确定为边缘点；将边缘点确定为元素图标的边缘检测结果。
[0010]进一步的，对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息的步骤之后，方法还包括：根据元素图标的边缘轮廓信息，扩展元素图标的边缘轮廓，得到扩展后的元素图标的边缘轮廓信息。
[0011]进一步的，根据元素图标的边缘轮廓信息，扩展元素图标的边缘轮廓，得到扩展后的元素图标的边缘轮廓信息的步骤，包括：从边缘轮廓信息中，获取位于第一方向的第一边缘轮廓端点的第一初始坐标，以及位于第二方向的第二边缘轮廓端点的第二初始坐标；将第一初始坐标向第一方向移动第一数值，将第二初始坐标向第二方向移动第二数值，得到第一边缘轮廓端点的第一目标坐标，以及第二边缘轮廓端点的第二目标坐标；根据第一目标坐标和第二目标坐标，确定扩展后的元素图标的边缘轮廓信息。
[0012]进一步的，第一方向和第二方向用于指示的元素图标中像素点的行；根据第一目标坐标和第二目标坐标，确定扩展后的元素图标的边缘轮廓信息的步骤，包括：将元素图标划分为多个子区域；其中，每个子区域包括第一预设行数对应的区域；针对每个子区域，执行下述操作：获取子区域中第一边缘轮廓端点的第一目标坐标的横坐标的最小值，以及第二边缘轮廓端点的第二目标坐标的横坐标的最大值；将子区域中第一边缘轮廓端点的第一初始坐标的横坐标更新为最小值，将子区域中第二边缘轮廓端点的第二初始坐标的横坐标更新为最大值，得到扩展后的元素图标的边缘轮廓信息。
[0013]进一步的，边缘轮廓信息包括元素图标的边缘轮廓端点和边缘轮廓端点的坐标；基于元素图标的边缘轮廓信息，对第一交互图片进行剪裁处理，得到包含元素图标的第二交互图片的步骤，包括：根据边缘轮廓端点的坐标，设置第一交互图片的显示样式的指定属性，得到第一交互图片的裁剪脚本；通过裁剪脚本，裁剪第一交互图片中的元素图标，得到包含元素图标的第二交互图片。
[0014]第二方面，本专利技术实施例提供了一种交互图片的处理装置，装置包括：获取模块，用于获取待处理的第一交互图片；其中，第一交互图片中包括元素图标；元素图标占据第一交互图片的部分图片区域；边缘检测模块，用于对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息；裁剪模块，用于基于元素图标的边缘轮廓信息，对第一交互图片进行剪裁处理，得到包含元素图标的第二交互图片；其中，第二交互图片用于：当第二交互图片显示在指定页面时，基于第二交互图片的边缘轮廓，提供预设交互事件的交互区域。
[0015]第三方面，本专利技术实施例提供了一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现第一方面任一项的交互图片的处理方法。
[0016]第四方面，本专利技术实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，计算机可执行指令在被处理器调用和执行时，计算机可执行指令促使处理器实现第一方面任一项的交互图片的处理方法。
[0017]本专利技术实施例带来了以下有益效果：
[0018]本专利技术提供了一种交互图片的处理方法、装置和电子设备，获取待处理的包括元素图标第一交互图片；该元素图标占据第一交互图片的部分图片区域；对第一交互图片中的元素图标进行边缘检测，得到元素图标的边缘轮廓信息；基于元素图标的边缘轮廓信息，对第一交互图片进行剪裁处理，得到包含元素图标的第二交互图片。该方式中，通过提取第一交互图片中元素图标的边缘轮廓，裁剪第一交互图片中的元素图标，同时将多余的部分裁剪掉，得到包含元素图标的第二交互图片，避免了指定页面中显示的交互图片之间相互遮挡的问题，导致的预设交互事件误触发，能够基于第二交互图片的边缘轮廓，提供预设交互事件的交互区域，提高了用户体验。
[0019]本专利技术的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点在说明书、权利要求书以及本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种交互图片的处理方法，其特征在于，所述方法包括：获取待处理的第一交互图片；其中，所述第一交互图片中包括元素图标；所述元素图标占据所述第一交互图片的部分图片区域；对所述第一交互图片中的元素图标进行边缘检测，得到所述元素图标的边缘轮廓信息；基于所述元素图标的边缘轮廓信息，对所述第一交互图片进行剪裁处理，得到包含所述元素图标的第二交互图片；其中，所述第二交互图片用于：当所述第二交互图片显示在指定页面时，基于所述第二交互图片的边缘轮廓，提供预设交互事件的交互区域。2.根据权利要求1所述的方法，其特征在于，对所述第一交互图片中的元素图标进行边缘检测，得到所述元素图标的边缘轮廓信息的步骤，包括：对所述第一交互图片中的元素图标进行边缘检测，得到所述元素图标的边缘检测结果；将所述边缘检测结果绘制到预设的画布对象中，得到包含所述元素图标的中间交互图片；基于所述中间交互图片，确定所述元素图标的边缘轮廓信息。3.根据权利要求2所述的方法，其特征在于，基于所述中间交互图片，确定所述元素图标的边缘轮廓信息的步骤，包括：根据所述预设的画布对象提供的目标接口，获取所述中间交互图片中每个像素点的像素数据；其中，所述像素数据用于指示所述像素点的颜色；根据所述像素数据，确定所述元素图标的边缘轮廓信息。4.根据权利要求3所述的方法，其特征在于，根据所述像素数据，确定所述元素图标的边缘轮廓信息的步骤，包括：从所述中间交互图片的每行像素点中，获取每行像素点中像素数据为第一像素数据的第一像素点；其中，所述第一像素数据用于指示所述像素点为所述元素图标的边缘检测结果；从每行所述第一像素点中获取位于两端的目标像素点，将所述目标像素点确定为所述元素图标的边缘轮廓端点；将所述边缘轮廓端点的坐标确定为所述元素图标的边缘轮廓信息。5.根据权利要求4所述的方法，其特征在于，将所述边缘轮廓端点的坐标确定为所述元素图标的边缘轮廓信息的步骤之后，所述方法还包括：在所述元素图标的边缘轮廓端点中，如果位于所述中间交互图片的第一边缘位置存在两个目标边缘轮廓端点；获取所述两个目标边缘轮廓端点之间每行或每列的边缘轮廓端点；针对每行或每列的边缘轮廓端点，将靠近所述第一边缘位置的边缘轮廓端点更新为所述行或者所述列对应的所述第一边缘位置的边缘点。6.根据权利要求2所述的方法，其特征在于，对所述第一交互图片中的元素图标进行边缘检测，得到所述元素图标的边缘检测结果的步骤，包括：将所述第一交互图片转换为灰度图；通过边缘检测算法，将所述灰度图中灰度值变化大于第一预设阈值的像素点确定为边
缘点；将所述边缘点确定为所述元素图标的边缘检测结果。7.根据权利要求1所述的方法，其特征在于，对所述第一交互图片中的元素图标进行边缘检测，得到所述元素图标的边缘轮廓信息的步骤之后，所述方法还包括：根据元素图标的边缘轮廓信息，扩展所述元素图标的边缘轮廓，得到扩展后的所述元素图标的边缘轮廓信息。8.根据权利要求7所述的方法，其特征在于，根据元素图标的边缘轮廓...
【专利技术属性】
技术研发人员：陈智文，
申请(专利权)人：广州博冠信息科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。