还原设计稿的方法、装置、计算机设备和存储介质

技术领域

本申请涉及数据处理领域，尤其涉及一种还原设计稿的方法、装置、计算机设备和存储介质。

背景技术

网页的页面设计，通常是软件工程师根据设计师提供的原稿进行代码编写，由编写的代码生成网页，生成的网页或可以称为生成稿。

由于在代码编写过程中，软件工程师是无法直接看到生成结果的，所以无法得知编写的代码是否有误。

现有技术中的检测网页和设计原稿的方法，大多是在页面生成之后，将设计图和网页页面通过人工直接进行对比，而此项工作可能并非软件工程师负责的。这就使得如果两者有不同，需要重新反馈至软件工程师，由软件工程师根据不同点去代码中寻找对应的代码串，通过修改代码串来使生成网页与设计原稿相一致。

上述方法，需要在网页完全生成之后才能对比。此外，根据页面与设计原稿的不同，需要去回溯代码中存在的问题，并且可能需要在软件工程师和设计师之间多次往返，使得现有技术中的还原设计稿的方法效率非常低。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本申请提供了一种还原设计稿的方法、装置、计算机设备和存储介质，能提高还原设计稿的效率。

第一方面，本申请提供了一种还原设计稿的方法，所述方法包括：

将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；

调整所述第一图层的透明度至预设透明度；

获取所述生成稿与所述设计稿的差异；

获取所述差异对应的代码，以使所述差异对应的代码被修改；

根据修改后代码更新所述生成稿；

获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。

本申请实施例中，所述第一图层为所述生成稿，所述第二图层为所述设计稿；或

所述第一图层为所述设计稿，所述第二图层为所述生成稿。

本申请实施例中，所述将生成稿和设计稿重叠，包括：

将所述生成稿的主体图像和所述设计稿的主体图像重叠；或

将所述生成稿的边缘和所述设计稿的边缘重叠；或

将所述生成稿的中心和所述设计稿的中心重叠；或

将所述生成稿中的关键字和所述设计稿中的关键字重叠。

本申请实施例中，将所述生成稿中的关键字和所述设计稿中的关键字重叠，包括：

获取所述生成稿中的文字；

将所述生成稿中的任一文字作为第一关键字；

获取所述设计稿中的文字；

获取所述设计稿中与所述第一关键字相同的文字作为第二关键字；

将所述第一关键字和所述第二关键字重叠。

本申请实施例中，所述重叠的生成稿和设计图部署在可视化界面上的第一区域，所述生成稿对应的代码部署在所述可视化界面上的第二区域，所述第一区域的生成稿与所述第二区域的代码相对应，

其中，所述第一区域和第二区域不重叠；

所述第一区域和第二区域横向并行排列，或所述第一区域和第二区域垂直并行排列。

本申请实施例中，所述第一区域的生成稿与第二区域的代码相对应，包括：

所述生成稿划分为多个显示单元，所述代码划分为多个功能单元，每一个所述显示单元与至少一个所述功能单元相对应。

本申请实施例中，所述设计稿划分为多个设计单元，

获取所述生成稿与所述设计稿的差异，包括：

获取所述显示单元与对应的设计单元之间的第一差异，所述差异包括颜色差异、大小差异、间隔差异中的一个或多个。

本申请实施例中，所述获取所述差异对应的代码，包括：

获取与所述第一差异对应的功能单元，以使所述功能单元中的代码被修改；

所述根据修改后代码更新生成稿，包括：

仅更新所述修改后的代码对应的显示单元。

本申请实施例中，所述获取设计稿与生成稿之间的差异，并修改差异对应的代码，直到生成稿与设计稿无差异之后，所述方法还包括：

根据使所述生成稿与设计稿无差异的代码，重新生成定稿生成稿；

判断所述定稿生成稿与所述设计稿之间是否存在差异。

第二方面，提供了一种还原设计稿的装置，所述装置包括：

重叠单元，用于将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；

透明度调整单元，用于调整所述第一图层的透明度至预设透明度；

差异获取单元，获取所述生成稿与所述设计稿的差异；

代码获取单元，获取所述差异对应的代码，以使所述差异对应的代码被修改；

生成单元，根据修改后代码更新所述生成稿；

所述差异获取单元还用于获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。

第三方面，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法的步骤。

本申请提供了一种还原设计稿的方法，所述方法包括：将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；调整所述第一图层的透明度至预设透明度；获取所述生成稿与所述设计稿的差异；获取所述差异对应的代码，以使所述差异对应的代码被修改；根据修改后代码更新所述生成稿；获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。本申请实施例的方法中，将生成稿和设计稿重叠，根据两者之间的差异，修改对应的代码，直到生成稿和设计稿没有差异，即生成高可以还原设计稿。本申请实施例的方法，采用了更加直观的方法来获取生成稿和设计稿之间的差异，能够直接修改差异对应的代码，简化了还原设计稿的流程，提高了效率。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例中还原设计稿的方法的应用环境图；

图2为本申请实施例中还原设计稿的方法的流程示意图；

图3为本申请实施例中将生成稿和设计稿重叠的示意图；

图4为本申请实施例中将生成稿和设计稿重叠的示意图；

图5为本申请实施例中可视化界面的示意图；

图6为本申请实施例中可视化界面的示意图；

图7为本申请实施例中可视化界面的示意图；

图8为本申请实施例中还原设计稿的装置的示意图；

图9为本申请实施例中计算机设备的内部结构图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1为一个实施例中还原设计稿的方法的应用环境图。参照图1，该还原设计稿的方法应用于还原设计稿的系统。该还原设计稿的系统包括终端110和服务器120。终端110和服务器120通过网络连接。终端110具体可以是台式终端或移动终端，移动终端具体可以手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

本申请实施例中，终端110中可以用于执行本申请还原设计稿的方法，服务器120可以用于接收能够还原设计稿的代码，或本申请的方法也可以应用于服务器120中。

本申请实施例中的设计稿，可以是的手绘稿，或可以是用素材拼接而成的文档。本申请实施例中的生成稿，是根据代码生成的网页、 APP页面或其他展示页面。

本申请实施例中，还原设计稿指的使是根据代码生成的生成稿和设计稿相同。

如图2所示，在一个实施例中，提供了一种还原设计稿的方法。本实施例主要以该方法应用于上述图1中的终端110(或服务器120)来举例说明。参照图2，该还原设计稿的方法具体包括如下步骤：

步骤210，将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；

本申请实施例中，所述第一图层为所述生成稿，所述第二图层为所述设计稿；或

所述第一图层为所述设计稿，所述第二图层为所述生成稿。

即本申请实施实施例中，设计稿在上，或者生成稿在上，都是可以的。

步骤220，调整所述第一图层的透明度至预设透明度；

本申请实施例中，透明度是表示第一图层的透明程度，100％透明表示全透明，0％透明表示不透明。

本申请实施例中，根据设计稿的不同，预设透明度可以是不同的，例如如果设计稿全部都是文字，由于文字的差异容易辨识，那么透明度可以设置稍低一些，比如80％，就可以通过第一图层看到与第二图层的差异了。如果是较为精细的图画，那么预设透明度可以稍高一些，比如50％，方便辨识差异。

步骤230，获取所述生成稿与所述设计稿的差异；

步骤240，获取所述差异对应的代码，以使所述差异对应的代码被修改；

步骤250，根据修改后代码更新所述生成稿；

步骤260，获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。

本申请公开了一种还原设计稿的方法，所述方法包括：将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；调整所述第一图层的透明度至预设透明度；获取所述生成稿与所述设计稿的差异；获取所述差异对应的代码，以使所述差异对应的代码被修改；根据修改后代码更新所述生成稿；获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。本申请实施例的方法中，将生成稿和设计稿重叠，根据两者之间的差异，修改对应的代码，直到生成稿和设计稿没有差异，即生成高可以还原设计稿。本申请实施例的方法，采用了更加直观的方法来获取生成稿和设计稿之间的差异，能够直接修改差异对应的代码，简化了还原设计稿的流程，提高了效率。

本申请实施例中，步骤210中，所述将生成稿和设计稿重叠，包括：

将所述生成稿的主体图像和所述设计稿的主体图像重叠；或

将所述生成稿的边缘和所述设计稿的边缘重叠；或

将所述生成稿的中心和所述设计稿的中心重叠；或

将所述生成稿中的关键字和所述设计稿中的关键字重叠。

本申请实施例中，将所述生成稿中的关键字和所述设计稿中的关键字重叠，包括：

获取所述生成稿中的文字；

将所述生成稿中的任一文字作为第一关键字；

获取所述设计稿中的文字；

获取所述设计稿中与所述第一关键字相同的文字作为第二关键字；

将所述第一关键字和所述第二关键字重叠。

设计稿和生成稿中可以包括多个文字，在提取出文字之后，可以选择任意文字作为第一关键字。但由于生成稿中的文字可能会重复，而重复的字还需要根据上下文或大体位置才能确定生成稿中对应的第二关键字，因此优选不重复的文字作为第一关键字，可以节约获取对应的第二关键字的时间。

如果所有的文字都是重复的，那么如上所述，需要根据上下文，以及文字的大体位置来确认关键字。大体位置可以是靠近上边缘、靠近中心等位置信息。

本申请实施例中，为了将生成稿和设计稿之间的差异更直观的显示出来，会把生成稿和设计稿重叠。将生成稿和设计稿重叠的方式有多种，可以包括上述实施方式，但不限于上述实施方式。

图3所示为本申请实施例的将生成稿和设计稿重叠的示意图，图3 中，是将生成稿和设计稿的中心相重合。图3中可以看出，生成稿中的圆和设计稿中的圆存在差异。

图4所示为本申请实施例的将生成稿和设计稿重叠的示意图，图4 中，是将设计稿中的关键字和生成稿中的关键字重叠。图4中可以看出，设计稿中的关键字“一”和生成稿中的关键字“一”重叠了，但是其余的字还存在差异，即生成稿中的文字间距和设计稿中的文字的间距是不同的。

本申请实施例中，获取差异的方法有多种，通常是先将生成稿和设计图划分为多个块，可以按照类型划分，例如文字部分、图片部分、链接部分，然后根据不同类型进行比对。

文字部分可以是先提取出文字，然后比较字体、大小、颜色、间距等。

图片部分可以采用现有技术中的各种图像处理方法来比对，或可以采用图像比对模型、神经网络模型来进行比对。

链接部分，由于设计图中可能无法直接将链接显示出来，因此生成稿中的链接部分包含的文字和设计稿中链接部分包含的文字对比完成之后，还需要根据设计稿附加的参数来进行对比。设计稿的附加参数可以用于指明链接跳转的其他页面，或可以是需要用户操作、选择、确认的。这一部分可能无法在设计稿中直接展示出来，但是可以通过设计稿的附加参数来体现。

附加参数可以是指参数，或可以是其他设计稿，例如跳转后的设计稿的样式，需要用户确认的设计稿、用户确认后的设计稿等。

本申请实施例中，链接部分、文字部分、图形部分都可能包括附加参数。因此也可以专门将有附加参数的部分分出来，或可以和链接部分、文字部分、图形部分相结合。如果是相结合的情况，那么需要将设计稿的附加参数提出取来，和生成稿中的对应的部分相比对，来判断是否有差异。

本申请实施例中，生成稿和设计稿还可以不需要进行划分，而直接采用现有技术中的各种算法、比对模型等来获取差异，在此不再赘述。

本申请实施例中，所述重叠的生成稿和设计图部署在可视化界面上的第一区域，所述生成稿对应的代码部署在所述可视化界面上的第二区域，所述第一区域的生成稿与所述第二区域的代码相对应，

其中，所述第一区域和第二区域不重叠；

所述第一区域和第二区域横向并行排列，或所述第一区域和第二区域垂直并行排列。

图5所示为本申请实施例的可视化界面的示意图。如图5所示，左侧510为第一区域，右侧520为第二区域。重叠的生成稿和设计稿设置在第一区域中，对应的代码设置在第二区域中。

第一区域和第二区域可以是如图5所示的横向并行排列，或可以是垂直并行排列，如图6所示。

本申请实施例中，设置第一区域和第二区域，以及第一区域和第二区域不重叠，可以使还原设计稿的过程更加直观。

本申请实施例中，所述第一区域的生成稿与第二区域的代码相对应，包括：

所述生成稿划分为多个显示单元，所述代码划分为多个功能单元，每一个所述显示单元与至少一个所述功能单元相对应。

生成稿根据其功能、显示方式、属性等，可以划分为多个显示单元，如图5所示，上部511的内容为图片，设置为第一显示单元；中部为文字描述部分，设置为第二显示单元512；下部为用户可操作的部分，例如可以选择颜色、尺寸、配套设备等，设置为第三显示单元513。根据每一个显示单元的具体内容，还可以划分为多个子显示单元，例如文字描述部分，每一个网页都有的通用文字，可以是第一子显示单元；针对本商品的文字，可以是第二子显示单元；有链接的文字，可以是第三子显示单元。子显示单元在图中未示出。

图6中与图5中标号相同的单元有相同或相似的功能，在此不再赘述。

代码也被划分为多个功能单元，功能单元可以是完成特定功能的代码、代码段或字符串。

生成稿中的每一个显示单元可以对应一个或多个功能单元，如图5 所示，第一显示单元511对应功能单元521，第二显示单元512对应功能单元522和523，第三显示单元513对应功能单元524。

本申请实施例中，可以通过如图5所示的链接方式/箭头方式来指示显示单元和功能单元之间的对应关系。在实际应用中，功能单元中包括的代码行数可能很多，无法在一个功能单元的界面中完全展开，所说在功能单元中，代码可以是折叠显示，或可以是简要显示，或可以是缩小后显示。显示单元和功能单元之间的对应关系也可以通过高亮显示、或前台显示，或放大显示等方式来指示显示单元和功能单元之间的对应关系。

例如图7所示，原本可视化界面如图7上方示意图所示，第一区域为710，第二区域为720，其中第一区域包括显示单元711、712和 713，第二区域中包括功能单元721、722、723和724。功能单元中的代码是折叠的。

点击图7第一区域的显示单元711，对应的第二区域的功能单元 721会在第二区域中放大，置于第二区域的上层，并将已折叠的代码全部展开，便于代码的修改，如图7下方示意图所示。

本申请实施例中，所述设计稿划分为多个设计单元，

获取所述生成稿与所述设计稿的差异，包括：

获取所述显示单元与对应的设计单元之间的第一差异，所述差异包括颜色差异、大小差异、字体差异、间隔差异或属性差异。

属性差异指的可以是链接跳转、需要用户操作、需要用户确认等属性，该部分属性在设计稿中可能无法直接展示出来，但是可以通过设计稿的附加参数来体现。附加参数如上述实施例中所说明，在此不再赘述。

本申请实施例中，所述获取所述差异对应的代码，包括：

获取与所述第一差异对应的功能单元，以使所述功能单元中的代码被修改；

所述根据修改后代码更新生成稿，包括：

仅更新所述修改后的代码对应的显示单元。

本申请实施例中，更新了某一个功能单元的中的代码之后，仅根据修改后的代码对应的显示单元，无需将整个生成稿更新，这样可以节约生成稿整体更新的频率，节约系统资源，提高效率。

本申请实施例中，所述获取设计稿与生成稿之间的差异，并修改差异对应的代码，直到生成稿与设计稿无差异之后，所述方法还包括：

根据使所述生成稿与设计稿无差异的代码，重新生成定稿生成稿；

判断所述定稿生成稿与所述设计稿之间是否存在差异。

本申请实施例中，在代码修改后，只更新对应的生成稿，在生成稿和设计稿无差异之后，根据代码，重新生成完整的生成稿，该生成稿称为定稿生成稿，然后再进行下一次的差异判断，这样可以减少因某一处代码修改而造成的生成稿中非对应显示单元的改变，例如图5 中所示的，第一显示单元511对应功能单元521，第二显示单元512对应功能单元522和523，在修改功能单元521之后，只更新第一显示单元511，但由于代码编写的不规范，或者代码之间参数、结果的相互引用，可能会造成第二显示单元512的更新。在本申请实施例中，在第一显示单元511和第二显示单元512与设计稿无差异之后，会根据功能单元521、522和523，重新生成第一显示单元511和第二显示单元 512，并重新判断第一显示单元511和第二显示单元512与设计稿是否存在差异。

本申请实施例中，将设计稿换分为至少一个设计单元，将生成稿划分为至少一个显示单元，将代码划分为至少一个功能单元，在进行设计稿和生成稿之间的比对时，可以按照显示单元与对应的设计单元进行对比，如果有多个显示单元与多个设计单元，那么可以并行进行比对，从而可以减少比对的时间。

图2为一个实施例中还原设计稿的方法的流程示意图。应该理解的是，虽然图2的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

和上述还原设计稿的方法相对应，本申请还提供了一种还原设计稿的装置。在一个实施例中，如图8所示，所述装置包括：

重叠单元810，用于将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；

透明度调整单元820，用于调整所述第一图层的透明度至预设透明度；

差异获取单元830，获取所述生成稿与所述设计稿的差异；

代码获取单元840，获取所述差异对应的代码，以使所述差异对应的代码被修改；

生成单元850，根据修改后代码更新所述生成稿；

所述差异获取单元830还用于获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。

本申请实施例中，所述第一图层为所述生成稿，所述第二图层为所述设计稿；或

所述第一图层为所述设计稿，所述第二图层为所述生成稿。

本申请实施例中，所述重叠单元810还用于：

将所述生成稿的主体图像和所述设计稿的主体图像重叠；或

将所述生成稿的边缘和所述设计稿的边缘重叠；或

将所述生成稿的中心和所述设计稿的中心重叠；或

将所述生成稿中的关键字和所述设计稿中的关键字重叠。

本申请实施例中，所述重叠单元810还用于：

获取所述生成稿中的文字；

将所述生成稿中的任一文字作为第一关键字；

获取所述设计稿中的文字；

获取所述设计稿中与所述第一关键字相同的文字作为第二关键字；

将所述第一关键字和所述第二关键字重叠。

本申请实施例中，所述重叠的生成稿和设计图部署在可视化界面上的第一区域，所述生成稿对应的代码部署在所述可视化界面上的第二区域，所述第一区域的生成稿与所述第二区域的代码相对应，

其中，所述第一区域和第二区域不重叠；

所述第一区域和第二区域横向并行排列，或所述第一区域和第二区域垂直并行排列。

本申请实施例中，所述第一区域的生成稿与第二区域的代码相对应，包括：

所述生成稿划分为多个显示单元，所述代码划分为多个功能单元，每一个所述显示单元与至少一个所述功能单元相对应。

本申请实施例中，所述设计稿划分为多个设计单元，

获取所述生成稿与所述设计稿的差异，包括：

获取所述显示单元与对应的设计单元之间的第一差异，所述差异包括颜色差异、大小差异、间隔差异中的一个或多个。

本申请实施例中，所述差异获取单元830还用于：

获取与所述第一差异对应的功能单元，以使所述功能单元中的代码被修改；

所述根据修改后代码更新生成稿，包括：

仅更新所述修改后的代码对应的显示单元。

本申请实施例中，所述生成单元850还用于：在获取设计稿与生成稿之间的差异，并修改差异对应的代码，直到生成稿与设计稿无差异之后：

根据使所述生成稿与设计稿无差异的代码，重新生成定稿生成稿；

判断所述定稿生成稿与所述设计稿之间是否存在差异。

本申请实施例的还原设计稿的装置，能提高还原设计稿的效率。

图9示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110(或服务器120)。如图9所示，该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现还原设计稿的方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行还原设计稿的方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；调整所述第一图层的透明度至预设透明度；获取所述生成稿与所述设计稿的差异；获取所述差异对应的代码，以使所述差异对应的代码被修改；根据修改后代码更新所述生成稿；获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。本申请实施例的方法，能提高还原设计稿的效率。

在一个实施例中，处理器执行计算机程序时还实现上述方法的步骤，在此不再赘述。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；调整所述第一图层的透明度至预设透明度；获取所述生成稿与所述设计稿的差异；获取所述差异对应的代码，以使所述差异对应的代码被修改；根据修改后代码更新所述生成稿；获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。本申请实施例的方法，能提高还原设计稿的效率。

在一个实施例中，计算机程序被处理器执行时还实现上述方法的步骤，在此不再赘述。

在一个实施例中，提供了一种计算机程序产品或计算机程序，所述计算机程序产品或计算机程序包括计算机指令，所述计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行以下步骤：将生成稿和设计稿重叠，所述置于上层的为第一图层，所述置于下层的为第二图层；调整所述第一图层的透明度至预设透明度；获取所述生成稿与所述设计稿的差异；获取所述差异对应的代码，以使所述差异对应的代码被修改；根据修改后代码更新所述生成稿；获取更新后的所述生成稿与所述设计稿之间的差异，并修改所述差异对应的代码，直到所述生成稿与所述设计稿无差异。本申请实施例的方法，能提高还原设计稿的效率。

在一个实施例中，计算机程序产品或计算机程序执行时还实现上述方法的步骤，在此不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器 (ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM 以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型 SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态 RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本申请的具体实施方式，使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。