CN111611416A - 图片检索方法、装置、电子设备及存储介质 - Google Patents

图片检索方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN111611416A
CN111611416A CN202010455877.5A CN202010455877A CN111611416A CN 111611416 A CN111611416 A CN 111611416A CN 202010455877 A CN202010455877 A CN 202010455877A CN 111611416 A CN111611416 A CN 111611416A
Authority
CN
China
Prior art keywords
picture
dyeing
dyed
region
target
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010455877.5A
Other languages
English (en)
Other versions
CN111611416B (zh
Inventor
苏天彬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Kuangshi Technology Co Ltd
Original Assignee
Beijing Kuangshi Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Kuangshi Technology Co Ltd filed Critical Beijing Kuangshi Technology Co Ltd
Priority to CN202010455877.5A priority Critical patent/CN111611416B/zh
Publication of CN111611416A publication Critical patent/CN111611416A/zh
Application granted granted Critical
Publication of CN111611416B publication Critical patent/CN111611416B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/53—Querying
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/58—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
    • G06F16/5866—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using information manually generated, e.g. tags, keywords, comments, manually generated location and time information
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Library & Information Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请实施例提供了一种图片检索方法、装置、电子设备及存储介质，该方法应用于图片检索系统中，图片检索系统包括基于canvas的在线图片工具，在线图片工具中配置有至少一种素材图片，方法包括：通过素材图片选择界面接收用户的素材选择指令，并获取素材选择指令所对应的素材图片的图片数据；根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制得到目标图片；将绘制得到的至少一张目标图片进行叠加，得到待检索图片；基于待检索图片进行检索。在本申请实施例中，可以基于在线图片工具在线绘制待检索图片后直接进行检索，简化了检索过程，提高了检索精度。

Description

图片检索方法、装置、电子设备及存储介质
本申请为申请号为2019104307952、发明名称为“图片检索方法、装置、电子设备及存储介质”的发明专利申请的分案申请。
技术领域
本申请涉及图片处理技术领域，具体而言，本发明涉及一种图片检索方法、装置、电子设备及存储介质。
背景技术
随着技术的发展，有时候需要基于包含人体特征的图片在检索系统中进行检索，以确定该人体特征具体属于哪一人。当不存在包含人体特征的图片时，通常会基于客户端的画图工具根据他人的描述来绘制图片，然后基于绘制的图片在检索系统中进行检索。
但是，目前在基于客户端的画图工具绘制的图片进行检索时，需要将绘制的图片从画图工具中下载保存，然后再上传至检索系统，显然这种方案过程比较繁琐、并且不能快速布控，导致效率较低；并且可能在下载保存再上传的过程中损失图像分辨率，进而造成检索精度降低。
发明内容
本申请实施例提供了一种图片检索方法、装置、电子设备及存储介质，技术方案如下：
第一方面，本申请实施例提供了一种图片检索方法，该方法应用于图片检索系统中，图片检索系统包括基于canvas(画布)的在线图片工具，在线图片工具中配置有至少一种素材图片，方法包括：
通过素材图片选择界面接收用户的素材选择指令，并获取素材选择指令所对应的素材图片的图片数据；
根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制图片数据得到目标图片；
将绘制得到的至少一张目标图片进行叠加，得到待检索图片；
基于待检索图片进行检索。
第一方面可选的实施例中，将绘制得到的至少一张目标图片进行叠加之前，还包括：
接收染色指令，染色指令中包括用户选择的目标图片中的待染色区域以及待染色区域的染色样式；
基于染色样式对待染色区域进行染色处理，得到染色后的图片；
将绘制的得到的至少一张目标图片进行叠加，得到待检索图片，包括：
将染色后的至少一张目标图片进行叠加，得到待检索图片。
第一方面可选的实施例中，待染色区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含待染色区域的非轮廓区域对应的染色像素值；
基于染色样式对待染色区域进行染色处理，包括：
对待染色区域进行染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，以及以使待染色区域的轮廓区域中的像素点的像素值为第一像素值，第一像素值是与染色像素值不同的像素值。
第一方面可选的实施例中，对待染色区域进行染色处理，包括：
对待染色区域的轮廓区域和非轮廓区域进行第一染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，待染色区域的轮廓区域中的像素点的像素值为第一像素值。
第一方面可选的实施例中，第一染色处理指的是将待染色区域中的原像素值叠加基色像素值，基色像素值为染色像素值与待染色区域的非轮廓区域中的原像素值的差值。
第一方面可选的实施例中，染色样式还包含待染色区域的非轮廓区域的图案样式，图案样式包括纯色图案样式和非纯色图案样式。
第一方面可选的实施例中，若图案样式为非纯色图案样式，非纯色图案样式包括至少两种子图案，且每种子图案对应一种染色像素值；
待染色区域包含至少两个子区域，每个子区域与一种子图案对应，每个子区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含与每个子区域的非轮廓区域对应的染色像素值；
基于染色样式对待染色区域进行染色处理，包括：
对每个子区域进行染色处理，以使每个子区域的非轮廓区域中的像素点的像素值为子区域的非轮廓区域对应的染色像素值，以及以使每个子区域中的轮廓区域中的像素值为第二像素值，第二像素值是与子区域的非轮廓区域对应的染色像素值不同的像素值。
第一方面可选的实施例中，通过下列方式确定每个子区域的位置、大小以及每个子区域对应的染色像素值：
基于待染色区域的大小、每种子图案之间的相对位置关系以及每种子图案的大小，确定每个子区域的位置、大小以及每个子区域对应的染色像素值。
第一方面可选的实施例中，基于染色样式对待染色区域进行染色处理，得到染色后的图片，包括：
生成与待染色区域的染色样式相同的样本染色图片，样本染色图片与绘制待染色区域的canvas大小相同；
对待染色区域进行染色处理，得到第一染色图像，以使待染色区域的非轮廓区域的像素点的像素值为0，待染色区域中的轮廓区域中的像素值不为0；
将样本染色图片叠加在第一染色图像上，得到染色后的图片。
第一方面可选的实施例中，对待染色区域进行染色处理，得到第一染色图像，包括：
对待染色区域的轮廓区域和非轮廓区域进行第二染色处理，得到第一染色图像。
第一方面可选的实施例中，第二染色处理指的是将待染色区域中像素点的原像素值叠加基准像素值，基准像素值为待染色区域的非轮廓区域中像素点的原像素值的相反数。
第一方面可选的实施例中，根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制图片数据得到目标图片，包括：
确定素材图片对应的位置信息；
基于图片数据和位置信息，在canvas标签对应的canvas上绘制图片数据得到目标图片。
第一方面可选的实施例中，确定目标图片对应的位置信息，包括：
确定当前绘制得到的所有目标图片中是否包括人体模型图片；
若确定当前绘制得到的所有目标图片中包括人体模型图片，则确定素材图片对应的位置信息为对应于人体模型图片的位置信息，否则确定素材图片对应的位置信息为默认位置信息。
第一方面可选的实施例中，获取素材选择指令所对应的素材图片的图片数据，包括：
根据素材图片的url(Uniform Resource Locator，统一资源定位符)获取素材图片的图片数据。
第一方面可选的实施例中，基于待检索图片进行检索，包括：
按照预设的规则对待检索图片进行处理，得到处理后的待检索图片；
基于处理后的待检索图片的数据进行检索。
第一方面可选的实施例中，在canvas标签对应的canvas上绘制得到目标图片之后，还包括：
接收调整指令，基于调整指令对用户选择的目标图片的信息进行调整；
调整指令包括图片大小调整指令和图片位置调整指令中的至少一种。
第一方面可选的实施例中，基于调整指令对用户选择的目标图片的信息进行调整，包括：
确定用户选择的目标图片的调整后的信息；
基于调整后的信息调整用户选择的目标图片，得到调整后的目标图片；
将调整后的目标图片绘制在对应的canvas上。
第一方面可选的实施例中，若接收到擦除指令，该方法还包括：
接收用户选择的待删除区域起始点和待删除区域终止点；
根据待删除区域起始点和待删除区域终止点确定待删除区域；
将处于待删除区域中的目标图片从canvas中删除。
第一方面可选的实施例中，若接收到绘制指令，方法还包括：
接收用户选择的绘制起始点和绘制终止点；
根据绘制起始点和绘制终止点确定目标路径；
将目标路径绘制在canvas中。
第一方面可选的实施例中，该方法还包括：
获取用户输入的待绘制文字；
将待绘制文字绘制在canvas中。
第二方面，本申请实施例提供了一种图片检索装置，该装置包含于图片检索系统中，图片检索系统包括基于canvas的在线图片工具，在线图片工具中配置有至少一种素材图片，该装置包括：
图片数据获取模块，用于通过素材图片选择界面接收用户的素材选择指令，并获取素材选择指令所对应的素材图片的图片数据；
目标图片绘制模块，用于根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制图片数据得到目标图片；
待检索图片绘制模块，用于将绘制得到的至少一张目标图片进行叠加，得到待检索图片；
图片检索模块，用于基于待检索图片进行检索。
第二方面可选的实施例中，该装置还包括染色处理模块，具体用于：
在将绘制得到的至少一张目标图片进行叠加之前，接收染色指令，染色指令中包括用户选择的目标图片中的待染色区域以及待染色区域的染色样式；
基于染色样式对待染色区域进行染色处理，得到染色后的图片；
待检索图片绘制模块在将绘制得到的至少一张目标图片进行叠加，得到待检索图片时，具体用于：
将染色后的至少一张目标图片进行叠加，得到待检索图片。
第二方面可选的实施例中，待染色区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含待染色区域的非轮廓区域对应的染色像素值；
染色处理模块在基于染色样式对待染色区域进行染色处理时，具体用于：
对待染色区域进行染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，以及以使待染色区域的轮廓区域中的像素点的像素值为第一像素值，第一像素值是与染色像素值不同的像素值。
第二方面可选的实施例中，染色处理模块在对待染色区域进行染色处理时，具体用于：
对待染色区域的轮廓区域和非轮廓区域进行第一染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，待染色区域的轮廓区域中的像素点的像素值为第一像素值。
第二方面可选的实施例中，第一染色处理指的是将待染色区域中的原像素值叠加基色像素值，基色像素值为染色像素值与待染色区域的非轮廓区域中的像素点的原像素值的差值。
第二方面可选的实施例中，染色样式还包含待染色区域的非轮廓区域的图案样式，图案样式包括纯色图案样式和非纯色图案样式。
第二方面可选的实施例中，若图案样式为非纯色图案样式，非纯色图案样式包括至少两种子图案，且每种子图案对应一种染色像素值；
待染色区域包含至少两个子区域，每个子区域与一种子图案对应，每个子区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含与每个子区域的非轮廓区域对应的染色像素值；
染色处理模块在基于染色样式对待染色区域进行染色处理时，具体用于：
对每个子区域进行染色处理，以使每个子区域的非轮廓区域中的像素点的像素值为子区域的非轮廓区域对应的染色像素值，以及以使每个子区域中的轮廓区域中的像素值为第二像素值，第二像素值是与子区域的非轮廓区域对应的染色像素值不同的像素值。
第二方面可选的实施例中，染色处理模块通过下列方式确定每个子区域的位置、大小以及每个子区域对应的染色像素值：
基于待染色区域的大小、每种子图案之间的相对位置关系以及每种子图案的大小，确定每个子区域的位置、大小以及每个子区域对应的染色像素值。
第二方面可选的实施例中，染色处理模块在基于染色样式对待染色区域进行染色处理，得到染色后的图片时，具体用于：
生成与待染色区域的染色样式相同的样本染色图片，样本染色图片与绘制待染色区域的canvas大小相同；
对待染色区域进行染色处理，得到第一染色图像，以使待染色区域的非轮廓区域的像素点的像素值为0，待染色区域中的轮廓区域中的像素值不为0；
将样本染色图片叠加在第一染色图像上，得到染色后的图片。
第二方面可选的实施例中，染色处理模块在对待染色区域进行染色处理，得到第一染色图像时，具体用于：
对待染色区域的轮廓区域和非轮廓区域进行第二染色处理，得到第一染色图像。
第二方面可选的实施例中，第二染色处理指的是将待染色区域中像素点的原像素值叠加基准像素值，基准像素值为待染色区域的非轮廓区域中像素点的原像素值的相反数。
第二方面可选的实施例中，目标图片绘制模块在根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制得图片数据到目标图片时，具体用于：
确定素材图片对应的位置信息；
基于图片数据和位置信息，在canvas标签对应的canvas上绘制图片数据得到目标图片。
第二方面可选的实施例中，目标图片绘制模块在确定目标图片对应的位置信息时，具体用于：
确定当前绘制得到的所有目标图片中是否包括人体模型图片；
若确定当前绘制得到的所有目标图片中包括人体模型图片，则确定素材图片对应的位置信息为对应于人体模型图片的位置信息，否则确定素材图片对应的位置信息为默认位置信息。
第二方面可选的实施例中，图片数据获取模块在获取素材选择指令所对应的素材图片的图片数据时，具体用于：
根据素材图片的url获取素材图片的图片数据。
第二方面可选的实施例中，图片检索模块在基于待检索图片进行检索时，具体用于：
按照预设的规则对待检索图片进行处理，得到处理后的待检索图片，基于处理后的待检索图片的数据进行检索。
第二方面可选的实施例中，该装置还包括图片调整模块，具体用于：
在canvas标签对应的canvas上绘制得到目标图片之后，接收调整指令；
基于调整指令对用户选择的目标图片的信息进行调整；
调整指令包括图片大小调整指令和图片位置调整指令中的至少一种。
第二方面可选的实施例中，图片调整模块在基于调整指令对用户选择的目标图片的信息进行调整时，具体用于：
确定用户选择的目标图片的调整后的信息；
基于调整后的信息调整用户选择的目标图片，得到调整后的目标图片；
将调整后的目标图片绘制在对应的canvas上。
第二方面可选的实施例中，该装置还包括图片删除模块，具体用于：
在接收到擦除指令后，接收用户选择的待删除区域起始点和待删除区域终止点；
根据待删除区域起始点和待删除区域终止点确定待删除区域；
将处于待删除区域中的目标图片从canvas中删除。
第二方面可选的实施例中，该装置还包括手绘图片模块，具体用于：
在接收到绘制指令后，接收用户选择的绘制起始点和绘制终止点；
根据绘制起始点和绘制终止点确定目标路径；
将目标路径绘制在canvas中。
第二方面可选的实施例中，该装置还包括文字绘制模块，具体用于：
获取用户输入的待绘制文字；
将待绘制文字绘制在canvas中。
第三方面，本申请实施例提供了一种电子设备，该电子设备包括：
一个或多个处理器；
存储器；
一个或多个应用程序，其中，一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个应用程序被处理器执行时实现第一方面任一可选实施例中所示的方法。
第四方面，本申请实施例提供了一种计算机可读存储介质，计算机存储介质用于存储计算机指令，当计算机指令在计算机上运行时，使得计算机可以执行，计算机存储介质用于存储计算机指令，当其在计算机上运行时，使得计算机可以执行第一方面任一可选实施例中所示的方法。
本申请实施例提供的技术方案带来的有益效果是：
在本申请实施例中，由于基于canvas的在线图片工具是直接融入网页并包含在图像检索系统中，这样用户在采用图片检索系统检索时，可以基于canvas的在线图片工具在线绘制待检索图片，并且在绘制完成后可以直接将待检索图像发送到图像检索系统或检索服务器进行检索，相比于采用基于线下的画图客户端绘制待检索图片，简化了待检索图片的绘制过程，减少了检索时间。进一步的，在本方案中由于采用了特殊的素材绘制方法和染色方法，可以进一步提高了绘图效率，并且同时保证了待检索图片的准确性。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1为本申请实施例提供的一种图片检索方法的流程示意图；
图2A为本申请实施例提供的一种待染色区域的示意图；
图2B为本申请实施例提供的一种样本染色图片的示意图；
图2C为本申请实施例提供的一种采用圆点图案样式染色后的效果示意图；
图2D为本申请实施例提供的一种在线画图工具的界面示意图；
图3为本申请实施例提供的一种图片检索装置的结构示意图；
图4为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
本申请实施例提供了一种图片检索方法，该方法应用于图片检索系统中，图片检索系统包括基于canvas的在线图片工具，在线图片工具中配置有至少一种素材图片，如图1所示，该方法包括：
步骤S101，通过素材图片选择界面接收用户的素材选择指令，并获取素材选择指令所对应的素材图片的图片数据。
其中，在线画图工具是基于canvas技术生成的，并且该在线画图工具可以被封装为一个独立的页面组件，可以直接引入图片检索系统。这样用户在采用图片检索系统进行检索时，可以通过该在线图片工具绘制图片，然后基于绘制的图片直接在图片检索系统中进行检索。
其中，将在线画图工具作为一个独立的页面组件直接引入图片检索系统的实现方式，本申请实施例不做限定，一种可选的方案为：按照vue组件定义规则，将在线画像工具定义为一个标准的vue组件，并发布成npm私有包。当需要使用该在线画图工具时可以通过npm安装此私有包，并按照vue npm组件的引入和使用方式使用。
在实际应用中，在线画图工具中可以配置有至少一种素材图片，并通过在素材图片选择界面中显示素材图片的标识，以使用户知道具体可以采用哪个或哪些素材图片来绘制待检索图片。其中，素材图片具体为哪种类型的素材图片，本申请实施例不做限定，如可以是与人物有关的素材图片，具体如人体模特、发型、帽子、上衣、裤子、外套、鞋、包、眼镜、领带、面罩等素材图片。
在实际应用中，用户在基于该素材图片选择界面已知可以采用哪个或哪些素材图片绘制待检索图片后，可以触发素材选择指令，该素材指令中包括用户选择的素材图片的标识，这样在接收到素材选择指令后，可以基于素材图片的标识确定用户具体是选择了哪一个素材图片，然后可以获取用户选择的素材图片的图片数据，即与该素材选择指令对应的素材图片的图片数据。
步骤S102，根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制图片数据得到目标图片。
其中，canvas标签用于标识素材图片应该绘制在哪一个canvas上，在实际应用中，可以对配置的素材图片进行分类，如可以将衬衫、T恤衫等划分为上衣的素材类型中；将长裤、短裤等划分为裤子的素材类型中等。进一步的，将配置的素材图片进行分类后，可以对每一种类型的素材图片配置对应的canvas标签，此时素材图片的canvas标签可以为该素材图片所属于的素材类型对应的canvas标签，即属于一个类型的素材图片对应于同一个canvas标签，属同一个canvas标签对应于同一个canvas。
也就是说，在获取到素材图片的图片数据后，确定该素材图片所属于的素材类型，然后可以基于预配置的素材类型与canvas标签的映射关系，确定该素材图片所属于的素材类型对应的canvas标签，在基于素材图片的图片数据生成素材图片后，可以将该素材图片绘制在canvas标签对应的canvas中。
当然在实际应用中，也可以配置每一种素材图片与canvas标签的映射关系，这样在获取到素材选择指令所对应的素材图片的图片数据后，可以直接基于素材图片与canvas标签的映射关系，确定出该素材图片对应的canvas。
在本申请可选的实施例中可以通过new Image()(即创建新图片)的方法生成图片对象，并将选中的素材图片的图片数据的url赋值给新生成的图片对象，等图片加载完成后，使用canvas的draw Image(draw Image是把一副图像画到画布上)方法将图片对象绘制到该素材类型对应的canvas上。此外，在canvas上绘制得到目标图片后，可以将目标图片存储到本地或云端服务器，这样下次可以基于该目标图片再次进行绘制或者直接使用该目标图片。
步骤S103，将绘制得到的至少一张目标图片进行叠加，得到待检索图片。
在实际应用中，由于不同的素材图片可能对应于不同的canvas标签，进而根据不同的素材图片绘制得到的目标图片可能是绘制在不同的canvas中的，并且用户想要进行检索的图片可能是需要至少一个目标图片组合后才得到，因此，在绘制得到至少一张目标图片后，可以将绘制得到的至少一张目标图片进行叠加，进而得到用户需要的待检索图片。
在一示例中，如当前绘制得到的目标图片包括帽子图片A、上衣图片B和裤子图片C，则可以将图片A、图片B和图片C进行叠加，得到待检索图片(即将图片A、图片B和图片C作为一个整体图片)，而在图片叠加时可以是将三张图片对应的canvas叠加合成为一个canvas，以得到合成后的图片(即待检索图片)。
步骤S104，基于待检索图片进行检索。
在实际应用中，当用户想要基于得到的待检索图片进行检索时，可以发送检索请求，这样在在接收到检索请求后，可以基于得到的待检索图片进行检索。
在实际应用中，由于图片检索系统可以包括客户端和检索服务器，因此在基于待检索图片进行检索时所执行的方式可能会存在部分差异。比如，当图片检索系统是以客户端的形式展现，在绘制好待检索图片后，若用户认为可以基于当前绘制得到的待检索图片进行检索时，可以触发检索请求，此时客户端可以基于当前绘制得到的待检索图片向服务器发送检索请求，服务器在接收到检索请求后，基于当前绘制得到的待检索图片进行检索，在得到检索结果后将检索结果返回至客户端，客户端接收服务器基于检索请求进行检索后返回的检索结果。
在本申请实施例中，由于基于canvas的在线图片工具是直接融入网页并包含在图像检索系统中，这样用户在采用图片检索系统检索时，可以基于canvas的在线图片工具在线绘制待检索图片，并且在绘制完成后可以直接将待检索图像发送到检索服务器进行检索，相比于采用基于线下的画图客户端绘制待检索图片，简化了检索过程，减少了检索时间。在本方案中由于采用了特殊的素材绘制方法和染色方法，可以进一步提高了绘图效率，并且同时保证了待检索图片的准确性。
本申请可选的实施例中，将绘制得到的至少一张目标图片进行叠加之前，还包括：
接收染色指令，染色指令中包括用户选择的目标图片中的待染色区域以及待染色区域的染色样式；
基于染色样式对待染色区域进行染色处理，得到染色后的图片；
将绘制的得到的至少一张目标图片进行叠加，得到待检索图片，包括：
将染色后的至少一张目标图片进行叠加，得到待检索图片。
在实际应用中，为了保证用于检索的图片更加的贴近用户需要的图片，还可以接收用户触发的染色指令，表示用户想要将当前绘制得到的目标图片进行染色，该染色指令中可以包括用户选择的目标图片中的待染色区域以及待染色区域的染色样式。
其中，待染色区域即为用户具体想要在目标图片中进行染色的区域，该染色的区域包括轮廓区域和非轮廓区域。其中，如何确定待染色区域，本申请实施例不做限定，比如可以监控鼠标或者用户的触屏动作，用户通过鼠标选择的区域作为待染色区域。在一个具体的实施方式中，待染色区域的染色样式指的是具体想要将待染色区域变为什么颜色和/或变为什么图案。
相应的，在接收到染色指令后，可以基于待染色区域的染色样式对待染色区域进行染色处理，得到染色后的图片，然后可以将染色后的一张或多张目标图片进行叠加得到待检索图片，并基于得到的待检索图片进行检索。
在本申请可选的实施例中，待染色区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含待染色区域的非轮廓区域对应的染色像素值；
基于染色样式对待染色区域进行染色处理，包括：
对待染色区域进行染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，以及以使待染色区域的轮廓区域中的像素点的像素值为第一像素值，第一像素值是与染色像素值不同的像素值。
其中，待染色区域包含的轮廓区域指的是靠近染色区域边界的部分区域，而待染色区域中不属于轮廓区域的部分即为待染色区域的非轮廓区域。其中，染色样式中所包含的染色像素值是对应于待染色区域的非轮廓区域的染色像素值，即用户想要将待染色区域的非轮廓区域中的像素点染色后的像素值。染色像素值具体采用什么类型的数据表示，本申请实施例不做限定，如可以采用RGB(Red、Green、Blue，红绿蓝)类型的数据的形式表示。
通常情况下，染色指令中包括的染色样式仅指定非轮廓区域染色后的像素值(染色像素值)或染色后的图案，对于轮廓区域染色后的像素值可以不指定。
在本申请实施例中，未染色前的图像呈现轮廓区和非轮廓区，对待染色区域的像素点的像素值进行修改(也即进行染色处理)后，待染色区域的非轮廓区域中的像素点的像素值为染色像素值，待染色区域的轮廓区域中的像素点的像素值为染色像素值不同的像素值，如此，在染色后，待染色区域仍能显示原有轮廓。
比如，待染色区域的非轮廓区域对应的染色像素值为红色像素值，则在对待染色区域进行染色处理时，可以将染色区域的非轮廓区域中的像素值修改为红色像素值(即将R修改为255，G修改为0，B修改为0)，并可以将待染色区域的轮廓区域中的像素点中的RGB值修改为不同于红色像素值的像素值。
在本申请可选的实施例中，对待染色区域进行染色处理，包括：
对待染色区域的轮廓区域和非轮廓区域进行第一染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，待染色区域的轮廓区域中的像素点的像素值为第一像素值。
在本实施例中，为简化操作，对轮廓区域和非轮廓区域进行同样的第一染色处理，例如叠加同一个像素值，乘以同一个系数，第一染色处理的具体实现方式，本申请实施例不限定，只要能使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，轮廓区域中的像素点的像素值为不同于染色像素值的像素值即可。
作为一种可选的实施方式，在本申请实施例中，第一染色处理指的是将待染色区域中的原像素值叠加基色像素值，基色像素值为染色像素值与待染色区域的非轮廓区域中的原像素值的差值。
其中，原像素值是待染色区域的像素点在染色前的像素值。待染色区域的轮廓区域的原像素值和非轮廓区域的原像素值是通常是不同的，当对轮廓区域和非轮廓区域在各自原像素值的基础上都进行叠加一个相同的基色像素值(基色像素值可以为正数也可以为负数)的操作来进行染色时，染色后轮廓区域和非轮廓区域各自对应的像素值仍是不同的，非轮廓区域对应的像素值为染色像素值，轮廓区域对应的像素值不同于染色像素值，染色后仍然能够显示出待染色区域的轮廓。在本实施例中，非轮廓区域的原像素值叠加基色像素值后成为染色像素值，因此基色像素值为染色像素值与待染色区域的非轮廓区域中的像素点的原像素值的差值。要想计算基色像素值，需要得到非轮廓区域的原像素值，这就需要区分轮廓区域和非轮廓区域。在一种具体的实施方式中，可以通过边缘检测算法检测出轮廓，除轮廓部分以外的区域即为非轮廓区域，对应的像素值即为非轮廓区域的原像素值。在另一种实施方式中，可以以待染色区域所包含的原像素值中对应像素点最多的作为非轮廓区域的原像素值，因为可以理解的是，非轮廓区域的面积通常远大于轮廓区域。
在一示例中，待染色区域所包含的原像素值包括像素值20以及像素值240，像素值为20的像素点的个数为16个，像素值为240的像素点的个数为300个，其中，像素值为240的像素点的个数最多，此时240作为待染色区域的非轮廓区域的原像素值。
在本申请可选的实施例中，染色样式还包含待染色区域的非轮廓区域的图案样式，图案样式包括纯色图案样式和非纯色图案样式。
需要说明的是，当染色指令中未指定图案样式时，默认染色样式为纯色图案样式。若染色样式为纯色图案样式，在对待染色区域进行染色处理时，可以采用上述中第一染色处理的方式对对待染色区域的轮廓区域和非轮廓区域进行染色。
在实际应用中，待染色区域的染色样式除了包含染色区域的非轮廓区域对应的染色像素值之外，用户还可以在染色样式中指定待染色区域的图案样式，即想要将待染色区域变为什么图案。与染色像素值类似，通常情况下，图案样式指的是待染色区域的非轮廓区域的图案样式。当图案样式包括纯色图案样式时，待染色区域的非轮廓区域全部染为一种颜色(仅包含一种染色像素值)，非纯色图案样式中可以包含至少两种染色像素值，在某些情况下，非纯色图案样式中可以只包含一种染色像素值，另一种染色像素值为系统默认的染色像素值(例如白色对应的染色像素值)。
在本申请可选的实施例中，若图案样式为非纯色图案样式，非纯色图案样式包括至少两种子图案，且每种子图案对应一种染色像素值；
待染色区域包含至少两个子区域，每个子区域与一种子图案对应，每个子区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含与每个子区域的非轮廓区域对应的染色像素值；
基于染色样式对待染色区域进行染色处理，包括：
对每个子区域进行染色处理，以使每个子区域的非轮廓区域中的像素点的像素值为子区域的非轮廓区域对应的染色像素值，以及以使每个子区域中的轮廓区域中的像素值为第二像素值，第二像素值是与子区域的非轮廓区域对应的染色像素值不同的像素值。
其中，子图案是指图案样式的一个循环单元中的纯色单元。例如图案样式为黑白条纹，一个黑条纹及与其相邻的一个白条纹为一个循环单元，一个黑条纹和一个白条纹为一个循环单元中的两个子图案。
在实际应用中，当想要将待染色区域染色为非纯色图案样式(如条纹或格子)时，非纯色图案样式可以包括至少两种子图案，每种子图案对应一种染色像素值，且每种子图案在待染色区域中对应于至少一个子区域，也就是说，可以将每个子区域转化为一个纯色单元，每个子区域的染色像素值为该子区域对应的子图案所对应一种染色像素值。相应的，在基于染色样式对待染色区域进行染色处理时，即转化为对待染色区域中所包括的子区域进行纯色染色处理。其中，具体的处理方式与上述实施例相同，本实施例在此就不再赘述。比如可以对待染色区域中所包括的子区域进行第一染色处理。
需要说明的是，当第一染色处理指的是将待染色区域中像素点的原像素值叠加基色像素值时，由于当图案样式为非纯色图案样式时可以包括至少两种染色像素值，此时每种染色像素值对应于一种基色像素值(即将每种染色像素值分别与待染色区域的非轮廓区域中像素点的原像素值做差，得到的差值即为每种染色像素值对应的基色像素值)。
进一步的，当对待染色区域中所包括的子区域进行染色处理时，确定该子区域对应的染色像素值，以及对应的染色像素值所对应的基色像素值，然后将该子区域中的原像素值叠加对应的基色像素值即可。
在本申请可选的实施例中，通过下列方式确定每个子区域的位置、大小以及每个子区域对应的染色像素值：
基于待染色区域的大小、每种子图案之间的相对位置关系以及每种子图案的大小，确定每个子区域的位置、大小以及每个子区域对应的染色像素值。
其中，每种子图案之间的相对位置关系指的是每种子图案的排布关系，如相对位置关系可以为两种子图案相邻。
在实际应用中，若图案样式为非纯色图案样式时，且该非纯色图案样式包括至少两种子图案，两种子图案为规则的图案，且两种子图案循环排布(如条纹或格子)时，在确定每个子区域的位置、大小以及每个子区域对应的染色像素值时，可以基于待染色区域的大小、每种子图案之间的相对位置关系以及每种子图案的大小，确定每个子区域的位置、大小以及每个子区域对应的染色像素值。其中，采用该方式的具体实现方式本公开实施例不做限定。
在一示例中，非纯色图案样式为黑白格子的图案样式(即包括黑色格子的子图案和白色格子的子图案)，每种子图案之间的相对位置关系为依次相邻。在确定每个子区域的位置、大小时，可以基于待染色区域中包含的像素点的宽和高，确定第一个黑色格子的区域在待染色区域对应的子区域，然后基于第一个黑色格子对应的子区域确定第一个白色格子对应的子区域，基于此方式，依次确定所有黑色和白色格子区域在待染色区域中对应的子区域，直至将待染色区域填充满。
在本申请可选的实施例中，基于染色样式对待染色区域进行染色处理，得到染色后的图片，包括：
生成与待染色区域的染色样式相同的样本染色图片，样本染色图片与绘制待染色区域的canvas大小相同；
对待染色区域进行染色处理，得到第一染色图像，以使待染色区域的非轮廓区域的像素点的像素值为0，待染色区域中的轮廓区域中的像素值不为0；
将样本染色图片叠加在第一染色图像上，得到染色后的图片。
在实际应用中，在基于染色样式对待染色区域进行染色处理时，还可以生成一张样本染色图片，该样本染色图片的染色方式为待染色区域的染色样式，如可以将染色样式中所包含的图案样式平铺在一个新的canvas，该新的canvas与绘制待染色区域的canvas大小相同。其中，当图案样式为卡通或其它不规则图案的图案样式时，可以将卡通或其它不规则图案绘制在一个新的canvas上，且该卡通或其它不规则图案在新的canvas上的位置对应于待染色区域的中心位置，而其它区域则设置为纯色。
相应的，可以获取待染色区域中的原像素值，然后将待染色区域的非轮廓区域的像素点的像素值修改为0，以及将待染色区域中的轮廓区域中的像素值修改为除0之外的其它值，此时可以得到第一染色图像，并将样本染色图片叠加在第一染色图像上，即可得到染色后的图片。
在本申请可选的实施例中，对待染色区域进行染色处理，得到第一染色图像，包括：
对待染色区域的轮廓区域和非轮廓区域进行第二染色处理，得到第一染色图像。
在实际应用中，为简化操作，对轮廓区域和非轮廓区域进行同样的第二染色处理，例如叠加同一个像素值，乘以同一个系数，第二染色处理的具体实现方式，本申请实施例不限定，只要能使待染色区域的非轮廓区域中的像素点的像素值为0，以及以使待染色区域中的轮廓区域中的像素值不为0即可。
在本申请可选的实施例中，第二染色处理指的是将待染色区域中像素点的原像素值叠加基准像素值，基准像素值为待染色区域的非轮廓区域中像素点的原像素值的相反数。
其中，基准像素值为待染色区域的非轮廓区域中像素点的原像素值的相反数。比如当待染色区域的非轮廓区域中像素点的原像素值为150，此时基准像素值则为-150。
需要说明的是，对于图案样式中所包括的子图案的相对位置关系规律性不强(如圆点图案染色样式或其他不规则图案样式)时，可以通过上述中生成样本图片的方式完成对待染色区域的染色处理。
在一示例中，假如待染色区域为图2A中衬衫区域所示，用户选择的染色样式为圆点图案样式，此时可以生对应于圆点图案样式的样本染色图片，具体如图2B所示。进一步的，将图2A中衬衫区域的非轮廓区域中像素点的原像素值取相反数，得到基准像素值，将图2A中衬衫区域中的像素点的原像素值叠加基准像素值，得到处理后的图2A(即第一染色图片)，然后将处理后的图2A与图2B叠加。可以理解的是，将样本染色图片叠加在第一染色图像时，第一染色图像中背景区域与样本染色图片叠加后，在叠加后的图像上仍为背景区域，在叠加后的图片中的像素值为背景像素值。例如，图2A中除待染色区域还包括背景区域，在将处理后的图2A与图2B叠加之后，可以将对应于图2A中原来白色区域的像素值修改为背景像素值，即可完成对待染色区域的染色处理，具体效果图2C所示。其中，将对应于图2A中原来背景区域的像素值修改为背景像素值的实现方式，可以根据实际需要预先配置，本申请实施例不限定。
本申请可选的实施例中，根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制得到目标图片，包括：
确定素材图片对应的位置信息；
基于图片数据和位置信息，在canvas标签对应的canvas上绘制图片数据得到目标图片。
在实际应用中，可以根据实际需要预先配置素材图片对应的位置信息，该位置信息用于标识素材标图片具体应该绘制canvas中的哪个位置；进一步的，可以根据素材图片的图片数据以及确定的位置信息在对应的canvas中进行绘制图片数据，进而得到目标图片。
本申请可选的实施例中，确定目标图片对应的位置信息，包括：
确定当前绘制得到的所有目标图片中是否包括人体模型图片；
若确定当前绘制得到的所有目标图片中包括人体模型图片，则确定素材图片对应的位置信息为对应于人体模型图片的位置信息，否则确定素材图片对应的位置信息为默认位置信息。
在实际应用中，可以对每一个素材图片预先配置两个位置信息，一个位置信息为默认位置信息，用于在确定当前绘制得到的所有目标图片中不包括人体模型图片时，基于该默认位置信息确定该素材图片应该绘制在canvas中的位置；另一个位置信息为对应于人体模型图片的位置信息，用于在确定当前绘制得到的所有目标图片中包括人体模型图片时，标识该素材图片对应于人体模型图片中的哪个位置，这样基于该位置信息绘制得到的目标图片可以与人体模型图片中的某一个位置信息相对应。
在实际应用中，由于不同的人体模型图片中每一部分的位置是不同的，因此在配置每个素材图片对应的位置信息时，可以针对不同的人体模型图片，分别配置对应于人体模型图片的位置信息；进一步的，在确定素材图片对应的位置信息时，若确定当前绘制得到的所有目标图片中包括人体模型图片，此时确定的位置信息即为配置的针对该人体模型图片的位置信息。
比如，假如当前绘制得到的所有目标图片中包括男性人体模型图片，此时确定的位置信息即为针对男性人体模型图片的位置信息，并且该素材图片对应于男性人体模型图片的位置信息为手部位置信息，此时可以基于该位置信息将素材图片绘制在对应的canvas中，得到目标图片；并且在将至少一张目标图片进行叠加后，该目标图片在canvas中的位置为该人体模型图片中手部的位置。
在本申请的可选实施例中，获取素材选择指令所对应的素材图片的图片数据，包括：
根据素材图片的url获取素材图片的图片数据。
其中，获取用于生成素材图片的图片数据的来源可以根据需要配置，本申请实施例不做限定。如在需要生成素材图片时，可以基于该素材图片的url向该url对应的服务器(可以是检索服务器，也可以是其它用于存储图片数据的数据服务器)获取用于生成该素材图片的图片数据，在获取到用于生成该素材图片的图片数据后生成该素材图片；也可以预先基于每个素材图片的url获取到所有素材图片的数据并保存在客户端中，在需要生成素材图片时，基于在客户端保存图片数据的地址标识获取用于生成该素材图片的图片数据，然后基于获取到的图片数据生成素材图片。
在本申请的可选实施例中，在canvas标签对应的canvas上绘制得到目标图片之后，还包括：
接收调整指令，基于调整指令对用户选择的目标图片的信息进行调整；
调整指令包括图片大小调整指令和图片位置调整指令中的至少一种。
在实际应用中，为保证基于待检测图片进行检索后得到的检索结果更加准确，可以按照预设的处理规则对该待检测图片进行处理，得到处理后的待检测图片，并基于处理后的待检测图片进行检索。
其中，预设的处理规则具体内容对应于不同的检索服务器可能不同，因此本申请实施例对此并不做限定，如当图像检索系统对应的检索服务器检索图片规则是对抠图处理后的图片进行检索，此时则需要对待检测图片进行抠图处理；当检索系统对应的检索服务器检索图片规则是对背景为灰色的图片进行检索，此时则需要将待检测图片中的背景变为灰色。
在实际应用中，在canvas上绘制得到目标图片后，用户之还可以触发调整指令，表示用户想要对绘制的目标图片进行调整，其中，调整指令可以包括图片大小调整指令和图片位置调整指令中的至少一种。进一步的，在接收到调整指令后，可以基于调整指令对用户选择的目标图片的信息进行调整。比如，若接收到的调整指令为大小调整指令，此时可以对用户选择的目标图片的大小信息进行调整；若接收到的调整指令为位置调整指令，此时可以对用户选择的目标图片的位置进行调整。其中，如何确定待用户选择的目标图片的方式本申请实施例不做限定，比如可以显示可以调整的目标图片的列表，用户基于显示的列表选择需要调整的目标图片，也可以监控到用户选中某一张目标图片的时长达到预设时长时，将选中的目标图片作为待调整目标图片。
在本申请的可选实施例中，基于调整指令对用户选择的目标图片的信息进行调整，包括：
确定用户选择的目标图片的调整后的信息；
基于调整后的信息调整用户选择的目标图片，得到调整后的目标图片；
将调整后的目标图片绘制在对应的canvas上。
其中，确定用户选择的目标图片的调整后的信息的实现方式，本申请实施例不做限定，如可以监控鼠标的拖动行为，获取鼠标在canvas中最后停留的位置信息，根据鼠标在canvas中最后停留的位置信息计算出用户选择的目标图片的调整后的信息，然后基于计算出的调整后的信息调整用户选择的目标图片，得到调整后的目标图片，并将调整后的目标图片绘制在该目标图片对应的canvas中。
在本申请的可选实施例中，若接收到擦除指令，方法还包括：
接收用户选择的待删除区域起始点和待删除区域终止点；
根据待删除区域起始点和待删除区域终止点确定待删除区域；
将处于待删除区域中的目标图片从canvas中删除。
在实际应用中，还可以接收到用户触发的擦除指令，表示用户想要将绘制在canvas中的目标图片删除，此时可以接收用户选择的待删除区域起始点和待删除区域终止点，并根据待删除区域起始点和待删除区域终止点确定待删除区域，将处于待删除区域中的目标图片从canvas中删除。
其中，根据待删除区域起始点和待删除区域终止点确定待删除区域的实现方式，本申请实施例不做限定。比如待删除区域起始点和待删除区域终止点可以采用两个圆形表示，基于两个圆形的直径确定矩形的四个顶点，将矩形的四个顶点连接后所形成的闭合区域即为待删除区域，然后采用clip(裁剪)方法裁剪出所形成的闭合区域作为可操作区域，最后将可操作区域中的目标图片删除。
本申请的可选实施例中，若接收到绘制指令，方法还包括：
接收用户选择的绘制起始点和绘制终止点；
根据绘制起始点和绘制终止点确定目标路径；
将目标路径绘制在canvas中。
在实际应用中，有时配置的素材图片中并没有用户想要绘制的图片，此时用户可以触发绘制指令，采用手绘功能绘制想要绘制的图片。在实际应用中，用户可以选择绘制起始点和绘制终止点，在接收到用户选择的绘制起始点和绘制终止点之后，可以根据绘制起始点和绘制终止点确定目标路径，并将目标路径绘制在canvas中。其中，绘制起始点和绘制终止点可以采用两个圆圈表示，而两个圆圈之间鼠标经过的位置采用一条连接起来，此时两个圆圈之间的连接线即为目标路径。
本申请的可选实施例中，该方法还包括：
获取用户输入的待绘制文字；
将待绘制文字绘制在canvas中。
在实际应用中，在获取用户输入的待绘制文字后，可以将待绘制文字绘制在canvas中。其中，用户可以基于文字输入框输入想要绘制的文字(待绘制文字)，进步的，在通过输入框获取到用户输入的待绘制文字后，使用fillText(填充文本)方法将用户输入的待绘制文字绘制在canvas中。
本申请的可选实施例中，该在线画图工具还可以提供历史记录功能，即对当前canvas中的每一步操作均可记录，用户可以基于记录的历史记录对之前的操作进行修改。比如，用户由于操作失误删除了某一目标图片，此时可以触发撤销指令，则可以将该目标图片重新绘制在原来的位置中。
如图2D所示，本申请实施例提供一种在线画图工具的界面示意图，在图2D中，线画图工具的界面上配置有发型、帽子、上衣、下衣、外套、鞋、包、配饰和特殊等类型的选项，用户基于该选项触发确定操作后，可以显示该类型所包含的素材图片样式图片(即素材图片选项)，用户可以基于素材图片的样式图片选择需要绘制的素材图片；此外，在该界面中还配置显示每一种素材图片的宽度和高度，以使用户调整每一种素材图片的大小，以及还配置了用于绘制文字、触发调整指令、触发返回指令、触发手绘指令、保存图片、检索图片、收藏图片等功能的虚拟按钮，并且该界面中还配置有可以选择的染色样式的标识，如包括显示有用于标识不同的循环图案样式的图片、不同纯色染色样式的图片，以及调整图案样式的属性信息的选项，如条纹图案时条纹的具体宽度和颜色等。
基于此，假如用户选择了男性人体模特的素材图片、短袖衬衫、牛仔裤和鞋子等素材图片，且将短袖衬衫染色为条纹的图案样式，并调整了短袖衬衫的素材图片的大小，此时得到的待检索图片如图2D中所示，当用户点击了检索虚拟按钮后，则可以基于图2D中的待检索图片进行检索。
本申请实施例提供了一种图片检索装置，该装置包含于图片检索系统中，图片检索系统包括基于canvas的在线图片工具，在线图片工具中配置有至少一种素材图片，该装置包括：如图3所示，该图片检索装置30可以包括：图片数据获取模块301、目标图片绘制模块302、待检索图片绘制模块303以及图片检索模块304，其中，
图片数据获取模块301，用于通过素材图片选择界面接收用户的素材选择指令，并获取素材选择指令所对应的素材图片的图片数据；
目标图片绘制模块302，用于根据素材图片的canvas标签和图片数据，在所述canvas标签对应的canvas上绘制所述图片数据得到目标图片；
待检索图片绘制模块303，用于将绘制的得到的至少一张目标图片进行叠加，得到待检索图片；
图片检索模块304，用于基于待检索图片进行检索。
本申请可选的实施例中，该装置还包括染色处理模块，具体用于：
在将绘制得到的至少一张目标图片进行叠加之前，接收染色指令，染色指令中包括用户选择的目标图片中的待染色区域以及待染色区域的染色样式；
基于染色样式对待染色区域进行染色处理，得到染色后的图片；
待检索图片绘制模块在将绘制的得到的至少一张目标图片进行叠加，得到待检索图片时，具体用于：
将染色后的至少一张目标图片进行叠加，得到待检索图片。
本申请可选的实施例中，待染色区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含待染色区域的非轮廓区域对应的染色像素值；
染色处理模块在基于染色样式对待染色区域进行染色处理时，具体用于：
对待染色区域进行染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，以及以使待染色区域的轮廓区域中的像素点的像素值为第一像素值，第一像素值是与染色像素值不同的像素值。
本申请可选的实施例中，染色处理模块在对待染色区域进行染色处理时，具体用于：
对待染色区域的轮廓区域和非轮廓区域进行第一染色处理，以使待染色区域的非轮廓区域中的像素点的像素值为染色像素值，待染色区域的轮廓区域中的像素点的像素值为第一像素值。
本申请可选的实施例中，第一染色处理指的是将待染色区域中的原像素值叠加基色像素值，基色像素值为染色像素值与待染色区域的非轮廓区域中的像素点的原像素值的差值。
本申请可选的实施例中，染色样式还包含待染色区域的非轮廓区域的图案样式，图案样式包括纯色图案样式和非纯色图案样式。
本申请可选的实施例中，若图案样式为非纯色图案样式，非纯色图案样式包括至少两种子图案，且每种子图案对应一种染色像素值；
待染色区域包含至少两个子区域，每个子区域与一种子图案对应，每个子区域包含轮廓区域和非轮廓区域，待染色区域的染色样式包含与每个子区域的非轮廓区域对应的染色像素值；
染色处理模块在基于染色样式对待染色区域进行染色处理时，具体用于：
对每个子区域进行染色处理，以使每个子区域的非轮廓区域中的像素点的像素值为子区域的非轮廓区域对应的染色像素值，以及以使每个子区域中的轮廓区域中的像素值为第二像素值，第二像素值是与子区域的非轮廓区域对应的染色像素值不同的像素值。
本申请可选的实施例中，染色处理模块通过下列方式确定每个子区域的位置、大小以及每个子区域对应的染色像素值：
基于待染色区域的大小、每种子图案之间的相对位置关系以及每种子图案的大小，确定每个子区域的位置、大小以及每个子区域对应的染色像素值。
本申请可选的实施例中，染色处理模块在基于染色样式对待染色区域进行染色处理，得到染色后的图片时，具体用于：
生成与待染色区域的染色样式相同的样本染色图片，样本染色图片与绘制待染色区域的canvas大小相同；
对待染色区域进行染色处理，得到第一染色图像，以使待染色区域的非轮廓区域的像素点的像素值为0，待染色区域中的轮廓区域中的像素值不为0；
将样本染色图片叠加在第一染色图像上，得到染色后的图片。
本申请可选的实施例中，染色处理模块在对待染色区域进行染色处理，得到第一染色图像时，具体用于：
对待染色区域的轮廓区域和非轮廓区域进行第二染色处理，得到第一染色图像。
本申请可选的实施例中，第二染色处理指的是将待染色区域中像素点的原像素值叠加基准像素值，基准像素值为待染色区域的非轮廓区域中像素点的原像素值的相反数。
本申请可选的实施例中，目标图片绘制模块在根据素材图片的canvas标签和图片数据，在canvas标签对应的canvas上绘制得到目标图片时，具体用于：
确定素材图片对应的位置信息；
基于图片数据和位置信息，在canvas标签对应的canvas上绘制得到目标图片。
本申请可选的实施例中，目标图片绘制模块在确定目标图片对应的位置信息时，具体用于：
确定当前绘制得到的所有目标图片中是否包括人体模型图片；
若确定当前绘制得到的所有目标图片中包括人体模型图片，则确定素材图片对应的位置信息为对应于人体模型图片的位置信息，否则确定素材图片对应的位置信息为默认位置信息。
本申请可选的实施例中，图片数据获取模块在获取素材选择指令所对应的素材图片的图片数据时，具体用于：
根据素材图片的url获取素材图片的图片数据。
本申请可选的实施例中，图片检索模块在基于待检索图片进行检索时，具体用于：
按照预设的规则对待检索图片进行处理，得到处理后的待检索图片，基于处理后的待检索图片的数据进行检索。
本申请可选的实施例中，该装置还包括图片调整模块，具体用于：
在canvas标签对应的canvas上绘制得到目标图片之后，接收调整指令；
基于调整指令对用户选择的目标图片的信息进行调整；
调整指令包括图片大小调整指令和图片位置调整指令中的至少一种。
本申请可选的实施例中，图片调整模块在基于调整指令对用户选择的目标图片的信息进行调整时，具体用于：
确定用户选择的目标图片的调整后的信息；
基于调整后的信息调整用户选择的目标图片，得到调整后的目标图片；
将调整后的目标图片绘制在对应的canvas上。
本申请可选的实施例中，该装置还包括图片删除模块，具体用于：
在接收到擦除指令后，接收用户选择的待删除区域起始点和待删除区域终止点；
根据待删除区域起始点和待删除区域终止点确定待删除区域；
将处于待删除区域中的目标图片从canvas中删除。
本申请可选的实施例中，该装置还包括手绘图片模块，具体用于：
在接收到绘制指令后，接收用户选择的绘制起始点和绘制终止点；
根据绘制起始点和绘制终止点确定目标路径；
将目标路径绘制在canvas中。
本申请可选的实施例中，该装置还包括文字绘制模块，具体用于：
获取用户输入的待绘制文字；
将待绘制文字绘制在canvas中。
本申请实施例提供了一种电子设备，如图4所示，图4所示的电子设备2000包括：处理器2001和存储器2003。其中，处理器2001和存储器2003相连，如通过总线2002相连。可选地，电子设备2000还可以包括收发器2004。需要说明的是，实际应用中收发器2004不限于一个，该电子设备2000的结构并不构成对本申请实施例的限定。
其中，处理器2001应用于本申请实施例中，用于实现图3所示的AA模块的功能。处理器2001可以是CPU，通用处理器，DSP，ASIC，FPGA或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器2001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。
总线2002可包括一通路，在上述组件之间传送信息。总线2002可以是PCI总线或EISA总线等。总线2002可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
存储器2003可以是ROM或可存储静态信息和指令的其他类型的静态存储设备，RAM或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM、CD-ROM或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。
存储器2003用于存储执行本申请方案的应用程序代码，并由处理器2001来控制执行。处理器2001用于执行存储器2003中存储的应用程序代码，以实现图3所示实施例提供的图片检索装置的动作。
本申请实施例提供了一种电子设备，本申请实施例中的电子设备包括：一个或多个处理器；存储器；一个或多个应用程序，其中一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于：执行本申请实施例中的方法。
本申请实施例提供了一种计算机可读存储介质，计算机存储介质用于存储计算机指令，当其在计算机上运行时，使得计算机可以执行，计算机存储介质用于存储计算机指令，当其在计算机上运行时，使得计算机可以执行本申请实施例中的方法。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (15)

1.一种图片检索方法，其特征在于，所述方法应用于图片检索系统中，所述图片检索系统包括基于画布canvas的在线图片工具，所述在线图片工具中配置有至少一种素材图片，所述方法包括：
通过素材图片选择界面接收素材类型确定操作，所述素材类型确定操作包括用户选择的素材图片类型，每种素材类型对应至少一个素材图片；
响应于所述素材类型确定操作，显示所述素材图片类型所包括的素材图片的样式图片列表；
基于所述样式图片列表，接收所述素材选择指令，并获取所述素材选择指令所对应的素材图片的图片数据；
在所述素材图片对应的canvas上绘制所述素材图片的图片数据，得到目标图片；
将绘制得到的至少一张目标图片进行叠加，得到待检索图片；
在接收到检索请求时，基于所述待检索图片进行检索。
2.根据权利要求1所述的方法，其特征在于，所述基于所述待检索图片进行检索，包括：
基于所述图片检索系统提取所述待检索图片的人体特征；
根据所述人体特征进行检索。
3.根据权利要求1所述的方法，其特征在于，所述基于所述待检索图片进行检索，包括：
按照预设的处理规则对所述待检索图片进行处理，得到处理后的待检测图片；
基于所述处理后的待检测图片进行检索。
4.根据权利要求1-3任一项所述的方法，其特征在于，所述在所述素材图片对应的canvas上绘制所述素材图片的图片数据，得到目标图片，包括：
确定所述素材图片对应的位置信息；
基于所述图片数据和所述位置信息，在所述素材图片对应的canvas上绘制所述素材图片的图片数据，得到目标图片。
5.根据权利要求4所述的方法，其特征在于，所述确定所述素材图片对应的位置信息，包括：
确定当前绘制得到的所有目标图片中是否包括人体模型图片；
若确定当前绘制得到的所有目标图片中包括人体模型图片，则确定所述素材图片对应的位置信息为对应于所述人体模型图片的位置信息，否则确定所述素材图片对应的位置信息为默认位置信息。
6.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：
接收染色指令，所述接收染色指令中包括用户选择的所述目标图片中的待染色区域；
对所述待染色区域进行染色处理，得到染色后的图片。
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：
接收染色样式选择指令，所述染色样式选择指令中包括用户选择的待染色区域的染色样式；
所述对所述待染色区域进行染色处理，包括：
根据所述染色样式对所述待染色区域进行染色处理。
8.根据权利要求7所述的方法，其特征在于，所述接收染色样式选择指令，包括：
在接收到染色样式选择触发指令时，显示染色样式选择界面，所述染样式选择界面中包括各染色样式的标识；
基于所述染色样式选择界面，接收所述染色样式选择指令。
9.根据权利要求1所述的方法，其特征在于，所述得到目标图片之后，还包括：
接收调整指令，所述调整指令包括图片大小调整指令和图片位置调整指令中的至少一种；
响应于所述调整指令对用户选择的目标图片的信息进行调整。
10.根据权利要求9所述的方法，其特征在于，若所述调整指令为图片大小调整指令，所述响应于所述调整指令对用户选择的目标图片的信息进行调整包括：
通过图片尺寸输入框接收所述图片大小调整指令，所述图片大小调整指令中包括用户选择的目标图片调整后的尺寸信息；
根据所述调整后的尺寸信息对所述用户选择的目标图片的尺寸进行调整。
11.根据权利要求10所述的方法，其特征在于，所述用户选择的目标图片是通过下列方式确定的：
响应于用户触发的图片选择触发指令，显示目标图片选择界面；
基于所述目标图片选择界面接收所述用户选择的目标图片。
12.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在接收到用户触发的绘制指令后，接收用户选择的绘制起始点和绘制终止点；根据所述绘制起始点和所述绘制终止点确定目标路径；将所述目标路径绘制在所述canvas中；
或者，
在接收到擦除指令后，接收用户选择的待删除区域起始点和待删除区域终止点；根据所述待删除区域起始点和所述待删除区域终止点确定待删除区域；将处于所述待删除区域中的目标图片从canvas中删除。
13.一种图片检索装置，其特征在于，所述装置包含于图片检索系统中，所述图片检索系统包括基于canvas的在线图片工具，所述在线图片工具中配置有至少一种素材图片，所述装置包括：
图片数据获取模块，用于通过素材图片选择界面接收素材类型确定操作，所述素材类型确定操作包括用户选择的素材图片类型，每种素材类型对应至少一个素材图片；响应于所述素材类型确定操作，显示所述素材图片类型所包括的素材图片的样式图片列表，基于所述样式图片列表，接收所述素材选择指令，并获取所述素材选择指令所对应的素材图片的图片数据；
目标图片绘制模块，用于在所述素材图片对应的canvas上绘制所述素材图片的图片数据，得到目标图片；
待检索图片绘制模块，用于将绘制得到的至少一张目标图片进行叠加，得到待检索图片；
图片检索模块，用于在接收到检索请求时，基于所述待检索图片进行检索。
14.一种电子设备，其特征在于，所述电子设备包括：
一个或多个处理器；
存储器；
一个或多个应用程序；其中，所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序被处理器执行时实现权利要求1～12任一项所述的方法。
15.一种计算机可读存储介质，其特征在于，所述计算机存储介质用于存储计算机指令，当所述计算机指令在计算机上运行时，使得计算机执行上述权利要求1至12中任一项所述的方法。
CN202010455877.5A 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质 Active CN111611416B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010455877.5A CN111611416B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910430795.2A CN110134808B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质
CN202010455877.5A CN111611416B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质

Related Parent Applications (1)

Application Number Title Priority Date Filing Date
CN201910430795.2A Division CN110134808B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN111611416A true CN111611416A (zh) 2020-09-01
CN111611416B CN111611416B (zh) 2023-11-28

Family

ID=67572721

Family Applications (2)

Application Number Title Priority Date Filing Date
CN202010455877.5A Active CN111611416B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质
CN201910430795.2A Active CN110134808B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质

Family Applications After (1)

Application Number Title Priority Date Filing Date
CN201910430795.2A Active CN110134808B (zh) 2019-05-22 2019-05-22 图片检索方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (2) CN111611416B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113240776A (zh) * 2021-05-24 2021-08-10 广东好太太智能家居有限公司 基于canvas改变图片颜色的方法、装置及存储介质

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110781434A (zh) * 2019-10-18 2020-02-11 四川长虹电器股份有限公司 基于图像生成以及下发的广告机系统及其广告下发方法
CN111400909B (zh) * 2020-03-16 2023-03-14 广东溢达纺织有限公司 虚拟成衣的绣花效果添加方法、装置、计算机设备
CN113379865B (zh) * 2021-06-25 2023-08-04 上海哔哩哔哩科技有限公司 目标对象的绘制方法和系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100100457A1 (en) * 2006-02-23 2010-04-22 Rathod Nainesh B Method of enabling a user to draw a component part as input for searching component parts in a database
CN104866564A (zh) * 2015-05-21 2015-08-26 百度在线网络技术（北京）有限公司 图片搜索方法及装置
US20160027180A1 (en) * 2014-07-25 2016-01-28 Samsung Electronics Co., Ltd. Method for retrieving image and electronic device thereof
CN107369197A (zh) * 2017-07-05 2017-11-21 腾讯科技（深圳）有限公司 图片处理方法、装置及设备
CN107657011A (zh) * 2017-09-25 2018-02-02 小草数语（北京）科技有限公司 视频内容搜索方法、装置及其设备
CN109033237A (zh) * 2018-07-04 2018-12-18 奇酷互联网络科技（深圳）有限公司 图片搜索方法、装置、可读存储介质及终端

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9449026B2 (en) * 2010-08-31 2016-09-20 Microsoft Technology Licensing, Llc Sketch-based image search
WO2013075316A1 (en) * 2011-11-24 2013-05-30 Microsoft Corporation Interactive multi-modal image search
CN106776939A (zh) * 2016-12-01 2017-05-31 山东师范大学 一种图像无损标注方法及系统
CN106709863B (zh) * 2016-12-28 2020-04-28 杭州趣维科技有限公司 一种基于gpu的高效2d矢量图形渲染方法
CN107239287B (zh) * 2017-06-07 2021-03-02 福建中金在线信息科技有限公司 一种网页显示方法、装置、电子设备及存储介质
CN107391159B (zh) * 2017-08-09 2020-10-23 海信视像科技股份有限公司 一种智能电视ui文本框的文字实现方法及装置
CN107438194A (zh) * 2017-08-09 2017-12-05 青岛海信电器股份有限公司 一种智能电视ui对象绘制方法及智能电视

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100100457A1 (en) * 2006-02-23 2010-04-22 Rathod Nainesh B Method of enabling a user to draw a component part as input for searching component parts in a database
US20160027180A1 (en) * 2014-07-25 2016-01-28 Samsung Electronics Co., Ltd. Method for retrieving image and electronic device thereof
CN104866564A (zh) * 2015-05-21 2015-08-26 百度在线网络技术（北京）有限公司 图片搜索方法及装置
CN107369197A (zh) * 2017-07-05 2017-11-21 腾讯科技（深圳）有限公司 图片处理方法、装置及设备
CN107657011A (zh) * 2017-09-25 2018-02-02 小草数语（北京）科技有限公司 视频内容搜索方法、装置及其设备
CN109033237A (zh) * 2018-07-04 2018-12-18 奇酷互联网络科技（深圳）有限公司 图片搜索方法、装置、可读存储介质及终端

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113240776A (zh) * 2021-05-24 2021-08-10 广东好太太智能家居有限公司 基于canvas改变图片颜色的方法、装置及存储介质
CN113240776B (zh) * 2021-05-24 2024-01-02 广东好太太智能家居有限公司 基于canvas改变图片颜色的方法、装置及存储介质

Also Published As

Publication number Publication date
CN111611416B (zh) 2023-11-28
CN110134808A (zh) 2019-08-16
CN110134808B (zh) 2020-06-05

Similar Documents

Publication Publication Date Title
CN110134808B (zh) 图片检索方法、装置、电子设备及存储介质
US9971854B1 (en) Computer aided systems and methods for creating custom products
US10049308B1 (en) Synthesizing training data
US9661886B1 (en) System and method for capturing design state of apparel or accessory to enable extrapolation for style and size variants
CN112513913A (zh) 服装的数字阵列室
EP1150215A2 (en) A method of annotating an image
US11668036B2 (en) Three-dimensional rendering preview of laser-finished garments
JP2002202838A (ja) 画像処理装置
US7054482B2 (en) Smart masking tool for image processing
CN110309447B (zh) 一种电子书签的生成方法、电子设备及计算机存储介质
JP7242165B2 (ja) プログラム、情報処理装置、および方法
CN110188074B (zh) 一种文件编辑标记显示方法和设备
CN112274934A (zh) 模型渲染方法、装置、设备及存储介质
AU2022233451A1 (en) A system and a method for providing an optimized online garment creation platform
WO2020119543A1 (zh) 交互方法、图片处理方法及装置
CN106569816B (zh) 一种渲染方法及装置
CN113379865B (zh) 目标对象的绘制方法和系统
CN113935893A (zh) 素描风格的场景渲染方法、设备及存储介质
CN111524178B (zh) 虚拟成衣的洗水效果添加方法、装置和计算机设备
CN117435292B (zh) 用于遥感解译的可视化方法、装置、设备和存储介质
JP3192116U (ja) 画像処理装置
EP4379575A1 (en) Operating method of web platform driving viewer, and web server
CN106570825B (zh) 一种基于透明图片的图片叠加系统和方法
CN114090141A (zh) 界面显示方法、装置、电子设备及可读存储介质
JP2023146383A (ja) 画像処理装置、画像処理方法およびプログラム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant