【技术实现步骤摘要】
一种图片模板以及图片的生成方法及相关装置
本申请涉及图片制作
，尤其涉及一种图片模板以及图片的生成方法及相关装置。
技术介绍
广告图片等用于实现信息发布或推广的图片是以图形为主要表现形式来传递信息的，其主要由图形和文字组成，形象性较强，已广泛应用于各种场景中。目前，以广告图片为例，为了生成所需的广告图片，可采用以下方式：方式一、由设计人员直接通过相应的图形制作软件来生成广告图片。但是，由于采用该种方式生成相应图片时，没有图片模板的存在，因而，无法将一份设计提供给其他用户来进行素材替换以产出新创意图片，从而大大降低了用户的应用体验。另外，当一份设计存在多种配色和/或多种尺寸时，设计人员常常需要人为生成多种具备相应配色的图片，图片的生成效率较低。方式二、由设计人员提供AI或者PSD等视觉设计文件，之后，由前端开发人员根据视觉设计文件生成HTML(HyperTextMarkupLanguage，超文本标记语言)，并生成相应的数据(data)和元数据(metadata)，用于浏览器渲染和编辑。用户基于浏览器对数据修改完成后，提交最终创意文件至服务端，使用现有技术生成...
【技术保护点】
一种图片模板生成方法，其特征在于，包括：针对设计文件所涉及的尺寸中的至少一个尺寸，根据所述设计文件所支持的配色信息中的至少一组配色信息，对具备相应尺寸的所述设计文件进行配色，得到至少一个配置有相应配色信息的设计文件，并基于所得到的每一个配置有相应配色信息的设计文件，生成对应的可缩放矢量图形SVG文件；根据设定的图层命名规则，对各SVG文件进行可编辑内容的解析，得到对应的数据和元数据；所述图层命名规则用于指明设计文件的各图层中的可编辑内容的类型；将具备对应的数据和元数据的各SVG文件作为图片模板。
【技术特征摘要】
2016.01.25 CN 20161004853891.一种图片模板生成方法，其特征在于，包括：针对设计文件所涉及的尺寸中的至少一个尺寸，根据所述设计文件所支持的配色信息中的至少一组配色信息，对具备相应尺寸的所述设计文件进行配色，得到至少一个配置有相应配色信息的设计文件，并基于所得到的每一个配置有相应配色信息的设计文件，生成对应的可缩放矢量图形SVG文件；根据设定的图层命名规则，对各SVG文件进行可编辑内容的解析，得到对应的数据和元数据；所述图层命名规则用于指明设计文件的各图层中的可编辑内容的类型；将具备对应的数据和元数据的各SVG文件作为图片模板。2.如权利要求1所述的方法，其特征在于，所述设计文件所支持的每一组配色信息中的颜色个数与所述设计文件所涉及的、使用颜色最多的尺寸所对应的颜色个数相同；且，所述设计文件所支持的每一组配色信息的第N个位置上的颜色与所述设计文件所支持的其它组配色信息的第N个位置上的颜色相互对应；其中，所述N为正整数，且其取值不大于所述设计文件所支持的每一组配色信息中的颜色个数。3.如权利要求1所述的方法，其特征在于，所述设计文件的各图层中的可编辑内容的类型包括文案、图片以及配色中的任意一种或多种。4.如权利要求3所述的方法，其特征在于，针对所述设计文件所涉及的任一尺寸，通过以下方式根据所述设计文件所支持的至少一组配色信息，对具备该尺寸的所述设计文件进行配色：在根据所述设计文件所支持的所述至少一组配色信息中的任一组配色信息对具备该尺寸的所述设计文件进行初次配色后，确定具备该尺寸的所述设计文件的当前配色信息；根据所述设计文件所支持的所述至少一组配色信息中的任一组未使用过的配色信息以及具备该尺寸的所述设计文件的当前配色信息，对具备该尺寸的所述设计文件进行配色的变更，并在配色变更后，重新执行上述确定具备该尺寸的所述设计文件的当前配色信息并基于所述至少一组配色信息中的任一组未使用过的配色信息，对具备该尺寸的所述设计文件进行配色的变更的操作，直至已根据所述设计文件所支持的所述至少一组配色信息中的每一组配色信息，对所述设计文件进行了配色。5.如权利要求4所述的方法，其特征在于，针对所述设计文件所涉及的任一尺寸，在确定具备该尺寸的所述设计文件的当前配色信息之后，通过以下方式对具备该尺寸的所述设计文件进行配色的变更：循环具备该尺寸的所述设计文件的各图层；针对满足所述设定的图层命名规则中的配色一项的每一图层，确定该图层中的各元素的颜色，并确定该图层中的各元素在所述当前配色信息对应的配色信息组中的位置，以及，基于该图层中的各元素在所述当前配色信息对应的配色信息组中的位置，将该图层中的各元素的颜色替换为所述设计文件所支持的所述至少一组配色信息中的任一组未使用过的配色信息所对应的配色信息组中的相应位置处的颜色。6.如权利要求3所述的方法，其特征在于，针对任一SVG文件，通过以下方式对所述SVG文件进行可编辑内容的解析，得到对应的数据和元数据：针对所述SVG文件的文档对象模型中的任一节点，当所述节点的标识满足所述设定的图层命名规则中的图片一项时，生成与所述节点相对应的、键为当前节点的标识且值为基于设定的图片编码方式对该节点对应的图片进行编码所得到的字符串的数据，以及，键为当前节点的标识且值为至少包含一个键为类型，值为图片类型的键值对的元数据；或者，当所述节点的标识满足所述设定的图层命名规则中的文案一项时，生成与所述节点相对应的、键为当前节点的标识且值为该节点对应的文案的数据，以及，键为当前节点的标识且值为至少包含一个键为类型，值为文案类型的键值对的元数据；或者，当所述节点的标识满足所述设定的图层命名规则中的配色一项时，在与所述SVG文件的颜色数据相对应的颜色元数据的对应的颜色描述项中，增加一个键为该节点的标识，值为该节点的颜色信息的键值对；其中，所述颜色数据的键为不同于系统中的任一节点的标识的设定标识，值为由所述设计文件所支持的各组配色信息的代表色的颜色值所形成的数组；所述颜色元数据的键为所述设定标识、值为与所述设计文件所支持的各组配色信息一一对应的至少一组颜色描述项，每一组颜色描述项包括所述SVG文件中的所有类型为颜色的节点的颜色描述信息。7.如权利要求6所述的方法，其特征在于，所述图层命名规则还用于指明所述设计文件的各图层中的可编辑内容的属性及对应的属性值；则根据设定的图层命名规则，对各SVG文件进行可编辑内容的解析，得到对应的数据和元数据，还包括：针对所述SVG文件的文档对象模型中的任一节点，当所述节点的标识满足所述设定的图层命名规则中的图片或文案一项时，若根据所述设定的图层命名规则，确定所述图层命名规则指明了可编辑内容的属性及对应的属性值，则与该节点相对应的元数据中还包含键为可编辑内容的属性，值为该节点的、与该可编辑内容的属性相对应的属性值的键值对。8.如权利要求7所述的方法，其特征在于，当所述可编辑内容的类型为文案时，所述可编辑内容的属性包括字数下限、字数上限以及对齐方式中的任意一种或多种；当所述可编辑内容的类型为图片时，所述可编辑内容的属性包括宽和/或高。9.如权利要求6所述的方法，其特征在于，当所述节点的标识满足所述设定的图层命名规则中的配色一项时，在与所述SVG文件的颜色数据相对应的颜色元数据的对应的颜色描述项中，增加一个键为该节点的标识，值为该节点的颜色信息的键值对，包括：当所述节点的标识满足所述设定的图层命名规则中的配色一项时，若确定所述节点的填充色为纯色，则在与所述SVG文件的颜色数据相对应的颜色元数据的对应的颜色描述项中，增加一个键为该节点的标识，值为包括第一子键值对以及第二子键值对的键值对，其中，第一子键值对的键为填充类型、值为该节点的填充色对应的颜色值，第二子键值对的值为边框类型、值为该节点的边框色对应的颜色值；或者，若确定所述节点的填充色为渐变色，则在与所述SVG文件的颜色数据相对应的颜色元数据的对应的颜色描述项中，增加一个键为该节点的标识，值为第三子键值对的键值对；其中，第三子键值对的键为填充类型、值为一个由所述节点所包含的各子节点对应的色彩信息所组成的数组；每一子节点的色彩信息包含颜色、不透明度以及位移信息。10.一种基于权利要求1～9任一所述方法所生成的图片模板的图片生成方法，其特征在于，包括：针对任一图片模板，获取所述图片模板所对应的数据以及元数据，并将所述图片模板所对应的数据渲染为编辑面板；获取用户基于所述编辑面板对所述图片模板所对应的数据中的一个或多个数据进行修改时，所输入的修改信息；并针对每一存在修改的数据，根据该数据对应的元数据以及该数据对应的修改信息，对所述图片模板的文档对象模型中的与该数据相对应的节点的内容进行修改；根据修改后的各节点的内容，得到新的文档对象模型，并基于所述新的文档对象模型，生成所需的图片。11.如权利要求10所述的方法，其特征在于，针对每一存在修改的数据，根据该数据对应的元数据以及该数据对应的修改信息，对所述图片模板的文档对象模型中的与该数据相对应的节点的内容进行修改，包括：若确定该数据对应的修改信息为文案，且，该数据对应的元数据中包含字数上限和/或字数下限，则根据该数据对应的元数据中的字数上限和/或字数下限对该数据对应的新的文案进行校验；并在校验成功后，基于该数据所对应的键，确定所述图片模板的文档对象模型中的相应节点，并基于该新的文案更新该节点的文案；其中，若该数据对应的元数据包含对齐方式，则当对齐方式为居左时，直接基于该新的文案更新该节点的文案；若对齐为居中或居右时，在更新该节点的文案之前，获取该节点的水平向中点或最右点坐标，记为第一坐标，再更新该节点的文案，之后，根据新的渲染结果，获取该节点的新的水平向中点或最右点坐标，记为第二坐标；根据第一坐标以及第二坐标，计算该节点的水平向偏移量；将该节点的对齐属性值减去该偏移量，得到该节点的新的对齐属性值。12.如权利要求10所述的方法，其特征在于，针对每一存在修改的数据，根据该数据对应的元数据以及该数据对应的修改信息，对所述图片模板的文档对象模型中的与该数据相对应的节点的内容进行修改，包括：若确定该数据对应的修改信息为图片，则若确定该数据对应的元数据含有宽高信息，则将该数据对应的新图片缩放裁切为所述宽高信息所限定的尺寸，并基于设定的图片编码方式对缩放裁切后的新图片进行编码得到对应的字符串；以及，使用该数据所对应的键，确定所述图片模板的文档对象模型中的相应节点，并根据基于缩放裁切后的新图片所生成的字符串更新该节点的原图片；若确定该数据对应的元数据不包含宽高信息，则确定所述图片模板中，该节点是否应用遮罩图形，若是，则获取该遮罩图形的外接矩形的宽高值，并基于该外接矩形的宽高值对该新图片保持宽高比缩放，使得缩放后的新图片适合于该外接矩形，之后，基于设定的图片编码方式对该缩放后的新图片进行编码得到对应的字符串，并根据基于该缩放后的新图片所生成的字符串更新该节点的原图片；若否，则获取该节点的原图片的宽高值，并基于该原图片的宽高值对新图片保持宽高比缩放，之后，基于设定的图片编码方式对缩放后的新图片进行编码得到对应的字符串，并根据基于该缩放后的新图片所生成的字符串更新该节点的原图片。13.如权利要求10所述的方法，其特征在于，针对每一存在修改的数据，根据该数据对应的元数据以及该数据对应的修改信息，对所述图片模板的文档对象模型中的与该数据相对应的节点的内容进行修改，包括：若确定该数据对应的修改信息为配色信息，则根据该数据对应的新的配色信息在该数据中的位置，获取该数据对应的元数据中对应位置上的颜色描述项；遍历该颜色描述项所包含的每一键值对，根据每一键值对的键获得所述图片模板的文档对象模型中的相应节点，再根据该键值对的值所包含的不同颜色信息，对该节点进行配色；其中，若该键值对的值含有以边框类型为键的子键值对，则更新该节点...
【专利技术属性】
技术研发人员：叶浩，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。