发明内容
本发明实施例的目的是提供一种图片信息的搜索方法及搜索装置,能够减少被搜索图片的上传等待时间,从而减少图片搜索的等待时间,改善用户体验。
为了实现上述目的,本发明提供了一种图片信息的搜索方法,包括:
检测到网页中位于输入区域的图片输入事件;
将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
检测到对输入区域的内容进行提交的事件;
将所述悬浮层的超文本标记语言信息中所述输入图片的链接信息上传到图片搜索引擎服务器;
接收来自所述搜索引擎服务器的所述输入图片的链接信息的搜索结果,并在浏览器端进行显示。
优选地,上述的搜索方法中,所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息;则
通过网页标签对不同图片的搜索结果进行分隔显示。
优选地,上述的搜索方法中,还包括:在浏览器端对所述输入图片进行识别,将相似程度大于门限的所述输入图片作为系列图片,对所述系列图片的搜索结果放入同一个网页标签中显示。
优选地,上述的搜索方法中,进一步包括:
在浏览器端记录搜索过的所述输入图片的链接信息;
依据所述输入图片的链接信息,对图片检索历史进行查询并显示检索过的图片。
优选地,上述的搜索方法中,还包括:
在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为浏览器端本地地址;
在检测到所述对输入区域的内容进行提交的事件后,将所述预览图片元素的链接地址修改为所述链接信息并进行上传。
优选地,上述的搜索方法中,在所述输入区域上中生成并加载一包括所述输入图片的悬浮层的步骤具体包括:
由网页浏览器提供的第一定制处理函数生成所述悬浮层;
第二定制处理函数用对应的HTML标签标记所述输入图片,以将所述输入图片转换为对应的HTML元素,其中所述HTML元素中包含所述图片的链接地址;
第三定制处理函数将所述HTML元素写入到所述悬浮层中。
优选地,上述的搜索方法中,所述输入区域包括文本输入框控件。
优选地,上述的搜索方法中,所述图片输入事件包括:图片拖拽事件或图片粘贴事件。
优选地,上述的搜索方法中,所述浏览器端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址。
优选地,上述的搜索方法中,所述对输入区域的内容进行提交的事件包括:
上传按钮触发或者所述输入区域失去焦点。
本发明还提供一种图片信息的搜索装置,包括:
输入事件检测单元,其配置为:检测到网页中位于输入区域的图片输入事件;
图床单元,其配置为:将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
悬浮层单元,其配置为:在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
上传事件检测单元,其配置为:检测到对输入区域的内容进行提交的事件;
上传单元,其配置为:将所述悬浮层的超文本标记语言信息中所述输入图片的链接信息上传到图片搜索引擎服务器;
搜索结果显示单元,其配置为:接收来自所述搜索引擎服务器的所述输入图片的链接信息的搜索结果,并在浏览器端进行显示。
优选地,上述的搜索装置中,
所述悬浮层单元,其配置为:所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息;
所述搜索结果显示单元,通过网页标签对不同图片的搜索结果进行分隔显示。
优选地,上述的搜索装置中,还包括识别单元,其配置为:在浏览器端对所述输入图片进行识别,将相似程度大于门限的所述输入图片作为系列图片;
所述搜索结果显示单元,对所述系列图片的搜索结果放入同一个网页标签中显示。
优选地,上述的搜索装置中,进一步包括缓存单元,其配置为:
在浏览器端记录搜索过的所述输入图片的链接信息;
依据所述输入图片的链接信息,对图片检索历史进行查询并显示检索过的图片。
优选地,上述的搜索装置中,还包括图片预览单元,其配置为:
在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为浏览器端本地地址;
在检测到所述对输入区域的内容进行提交的事件后,将所述预览图片元素的链接地址修改为所述链接信息。
优选地,上述的搜索装置中,所述悬浮层单元,其配置为:
由网页浏览器提供的第一定制处理函数生成所述悬浮层;
第二定制处理函数用对应的HTML标签标记所述输入图片,以将所述输入图片转换为对应的HTML元素,其中所述HTML元素中包含所述图片的链接地址;
第三定制处理函数将所述HTML元素写入到所述悬浮层中。
优选地,上述的搜索装置中,所述输入区域包括文本输入框控件。
优选地,上述的搜索装置中,所述图片输入事件包括:图片拖拽事件或图片粘贴事件。
优选地,上述的搜索装置中,所述浏览器端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址。
优选地,上述的搜索装置中,所述对输入区域的内容进行提交的事件包括:
上传按钮触发或者所述输入区域失去焦点。
本发明实施例至少存在以下技术效果:
1)本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,需要进行搜索的图片已经上传了一段时间了,因此,对于用户来说其决定搜索后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的上传等待时间,从而减少图片搜索的等待时间,改善了用户体验。
2)本发明在浏览器端可以实现类似图片的判别,可以对用户的搜索结果进行更好的归类,改善了用户体验。
3)本发明可以支持多个图片的预览和集体搜索。因为每个图片的上传都节约了等待时间,所以要上传多个待搜索的图片时,节约的总体时间非常可观。
4)本发明实施例中,通过悬浮层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用浏览器端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域中需要搜索的图片是否正确,改善了用户体验。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合附图对具体实施例进行详细描述。
图1为本发明方法实施例的步骤流程图,如图1所示,本发明实施例提供了一种图片信息的搜索方法,包括:
步骤101,检测到网页中位于输入区域的图片输入事件;
步骤102,将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
步骤103,在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
步骤104,检测到对输入区域的内容进行提交的事件;
步骤105,将所述悬浮层的超文本标记语言信息中所述输入图片的链接信息上传到图片搜索引擎服务器;
步骤106,接收来自所述搜索引擎服务器的所述输入图片的链接信息的搜索结果,并在浏览器端进行显示。
可见,本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,需要进行搜索的图片已经上传了一段时间了,因此,对于用户来说其决定搜索后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的上传等待时间,从而减少图片搜索的等待时间,改善了用户体验。
在本发明的一个优选实施例中,所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息;则通过网页标签对不同图片的搜索结果进行分隔显示。
因此,本发明可以支持多个图片的预览和集体搜索。因为每个图片的上传都节约了等待时间,所以要上传多个待搜索的图片时,节约的总体时间非常可观。
在本发明的一个优选实施例中,还包括:在浏览器端对所述输入图片进行识别,将相似程度大于门限的所述输入图片作为系列图片,对所述系列图片的搜索结果放入同一个网页标签中显示。因此,本发明在浏览器端可以实现类似图片的判别,可以对用户的搜索结果进行更好的归类,改善了用户体验。
在本发明的一个优选实施例中,进一步包括:在浏览器端记录搜索过的所述输入图片的链接信息;依据所述输入图片的链接信息,对图片检索历史进行查询并显示检索过的图片。
在本发明的一个优选实施例中,还包括:在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为浏览器端本地地址;在检测到所述对输入区域的内容进行提交的事件后,将所述预览图片元素的链接地址修改为所述链接信息并进行上传。
可见,本发明实施例中,通过悬浮层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用浏览器端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域中需要搜索的图片是否正确,改善了用户体验。
在本发明的一个实施例中,在所述输入区域上中生成并加载一包括所述输入图片的悬浮层的步骤具体包括:由网页浏览器提供的第一定制处理函数生成所述悬浮层;第二定制处理函数用对应的HTML标签标记所述输入图片,以将所述输入图片转换为对应的HTML元素,其中所述HTML元素中包含所述图片的链接地址;第三定制处理函数将所述HTML元素写入到所述悬浮层中。
其中,所述输入区域包括文本输入框控件。所述图片输入事件包括:图片拖拽事件或图片粘贴事件。所述浏览器端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址。所述对输入区域的内容进行提交的事件包括:上传按钮触发或者所述输入区域失去焦点。
图2为本发明提供的搜索装置的结构图,如图2所示,本发明实施例提供了一种图片信息的搜索装置,包括:
输入事件检测单元201,其配置为:检测到网页中位于输入区域的图片输入事件;
图床单元202,其配置为:将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
悬浮层单元203,其配置为:在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
上传事件检测单元204,其配置为:检测到对输入区域的内容进行提交的事件;
上传单元205,其配置为:将所述悬浮层的超文本标记语言信息中所述输入图片的链接信息上传到图片搜索引擎服务器;
搜索结果显示单元206,其配置为:接收来自所述搜索引擎服务器的所述输入图片的链接信息的搜索结果,并在浏览器端进行显示。
可见,本发明上传装置的实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定搜索时,需要进行搜索的图片已经上传了一段时间了,因此,对于用户来说其决定搜索后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的上传等待时间,从而减少图片搜索的等待时间,改善了用户体验。
其中,所述悬浮层单元,其配置为:所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息;所述搜索结果显示单元,通过网页标签对不同图片的搜索结果进行分隔显示。
在本发明的一个实施例中,搜索装置还包括识别单元,其配置为:在浏览器端对所述输入图片进行识别,将相似程度大于门限的所述输入图片作为系列图片;其中,所述搜索结果显示单元对所述系列图片的搜索结果放入同一个网页标签中显示。
在本发明的一个实施例中,搜索装置进一步包括缓存单元,其配置为:在浏览器端记录搜索过的所述输入图片的链接信息;依据所述输入图片的链接信息,对图片检索历史进行查询并显示检索过的图片。
在本发明的一个实施例中,搜索装置还包括图片预览单元207,其配置为:在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为浏览器端本地地址;在检测到所述对输入区域的内容进行提交的事件后,将所述预览图片元素的链接地址修改为所述链接信息。
在本发明的一个实施例中,所述悬浮层单元,其配置为:由网页浏览器提供的第一定制处理函数生成所述悬浮层;第二定制处理函数用对应的HTML标签标记所述输入图片,以将所述输入图片转换为对应的HTML元素,其中所述HTML元素中包含所述图片的链接地址;第三定制处理函数将所述HTML元素写入到所述悬浮层中。
其中,所述输入区域包括文本输入框控件。所述图片输入事件包括:图片拖拽事件或图片粘贴事件。所述浏览器端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址。所述对输入区域的内容进行提交的事件包括:上传按钮触发或者所述输入区域失去焦点。
本发明实施例中,用户可以本地拖拽图片到图片上传输入框中,拖拽中实现在输入框中的预览,而且可以上传多个图片,使用在上述图片上传输入框上的DIV编辑承载所述拖拽的图片,该DIV中的IMG标签中是图床服务器生成的图片URL,后台可以对上述多个图片进行上传。DIV中的图片可以供进行预览,传给图片搜索引擎的数据是图床服务器生成的图片URL。图片搜索引擎根据上传的一个或者多个URL下载图片后进行分析,然后返回搜索的结果给浏览器进行显示。
因此,本发明改变了现有的图片上传搜索的方式,用户可以通过托拽或粘贴的方式直接向输入框输入图片,不用再采用现有技术的填入路径地址的方式,所见即所输入,避免因输入路径地址方式产生的因无法预览造成的输入错误和查找不便等缺陷,又可以使得图片上传的速度增加,进而搜索的等待时间减少。使得用户获得了更好地使用体验。
在具体搜索操作中,当网页中检测到对于图片的“ondrag”和“oncopy”的事件时,获取到被拖拽或者图片对象的文件名或者文件信息。
在ondrop事件发生在输入框控件(例如Textarea(文本区域)控件或者Input(输入)控件)时,位于输入框控件之上生成一DIV,DIV中的IMG元素是使用的本地图片的路径进行预览显示,生成DIV时后台同时启动了向指定图床服务器的上传,而且获取到图床对应的URL。在点击上传或者搜索识别的按钮后,开始将带有URL的数据上传到搜索引擎服务器进行检索。
该生成的DIV的主要通过以下函数获取事件:
window.external.OnPaste
window.external.OnDrop
该生成的DIV关键参数包括:
position:relative;//位置参数为相对位置
height:250px;width:250px;//尺寸
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",//过滤属性
src="file:///c:/pics/69c99583gw1dtvfndt8adj.j pg">//连接地址
本实施例中以Textarea控件为例,当图片被拖拽到该Textarea上产生ondrop事件时,其上对应生成有DIV层,其中带有生成的IMG元素(该IMG元素使用本地图片的路径来进行预览),这些都是用户拖拽到textarea控件中时产生的HTML转换数据;在预览该拖动来的图片的同时,启动对图片的后台上传到指定的图床服务器,并返回记录下其图床中的URL。
当用户点击submit按钮时或者在textarea控件失去焦点时,触发对记录下其图床中的URL的上传到图片搜索引擎,由图片搜索引擎来生成图片的搜索结果,并发回浏览器进行显示。
进一步地,对于在浏览器侧可以拖拽多个图片到上述的输入框中进行预览,而且在点击图片搜索之前可以拖拽多个图片进来(由自动生成DIV来负责进行拖拽图片的预览显示)
该过程可以通过存储有代码的固件实现,也可以通过功能单元实现,采用的代码中关键函数举例如下:
DragQueryFile();
StringCchPrintf();
采用的代码中关键参数举例如下:
position:relative;//位置参数为相对位置
本发明的一个实施例中,对于搜索过的图片,在本地(某一个特定的缓存路径)都是有记录的,可以便于用户进行图片检索历史的查询和预览。在预览该拖动来的图片的同时,启动对图片的后台上传到指定的图床服务器,并返回记录下其图床中的URL。这里图床中的URL和本地的记录图片的地址是不一样的(预览使用本地路径,上传使用图床的URL)。
当多个图片上传时,对于不相关的图片,可以对搜索引擎返回的数据进行多标签的显示,加快了用户进行多图片的搜索和识别。加快了搜索的速度,也提高了用户的使用体验。
对于相同或者相近的图片内容的图片的多张识别和搜索中,对于多张图片的预览和上传就显得很重要。需要对搜索服务器侧的搜索引擎进行改进,以支持相近内容的图片进行系列的识别。
对于相近的URL(该URL不是本发明中的图床生成的,而是已经有图床URL的图片)的多张图片的上传前进行预览,然后集中进行上传。这里的方案,也是可以使用本发明中的DIV技术进行显示预览。
在一个利用图片搜索引擎进行搜索的例子中,小图标图片会被拖拽到输入框中,图片会依据登录浏览器用户进行对应的图床上传和URL获取。点击识别后会生成两个标签的搜索结果页。
下述代码是对于DI V中的图片进行上传到搜索引擎服务器的实现关键代码举例:
pImg->get_src(&bsFileUrl);//该步骤是图床URL的获取
UploadFile(bsFileUrl,&bsUrl);//该步骤是上传图片,其可见是上传的图床URL
因此,本发明可以实现本地图片的拖拽上传,结合DI V的生成而实现预览,并通过图床生成了URL可以实现后台的上传,获取拖拽后实现的图床URL后上传给图片搜索引擎,这样可以大大地提高图片上传搜索时的速度。而且支持多图片的预览上传和多图片的图片识别和搜索和多个图片搜索结果标签的显示,这样可以大大地提高图片上传搜索时的用户体验。
由上可知,本发明实施例具有以下优势:
1)本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,需要进行搜索的图片已经上传了一段时间了,因此,对于用户来说其决定搜索后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的上传等待时间,从而减少图片搜索的等待时间,改善了用户体验。
2)本发明在浏览器端可以实现类似图片的判别,可以对用户的搜索结果进行更好的归类,改善了用户体验。
3)本发明可以支持多个图片的预览和集体搜索。因为每个图片的上传都节约了等待时间,所以要上传多个待搜索的图片时,节约的总体时间非常可观。
4)本发明实施例中,通过悬浮层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用浏览器端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域中需要搜索的图片是否正确,改善了用户体验。
上述本发明实施例中的方法、装置适用于各种网络或者客户端环境中,例如可以实现在诸如个人计算机设备之类的计算机设备中,或者可以实现在诸如移动电话、移动通信设备、个人数字助理(PDA)等其他便携式电子设备或者非便携式电子设备中。因此本领域技术人员要明确的是,本发明的保护范围并不限于PC上运行浏览器中的图片上传功能和图片搜索功能,仅是出于描述的简洁和方便而在本发明实施例中采用了PC上运行浏览器中的图片上传功能和图片搜索功能进行描述。
以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。