一种PSD文件的自动化切图方法、系统、设备及介质

技术领域

本发明涉及PSD文件处理技术领域，尤其涉及一种PSD文件的自动化切图方法、系统、设备及介质。

背景技术

当前的PSD文件切图流程主要是人工在Photoshop中手动切图和手动检查图层规格。需要人工手动操作，耗费大量时间和人力资源。这不仅影响了项目进度，还增加了人力成本。由于人为因素，手动切图容易出现遗漏图层、切割不准确等问题，这可能导致最终产品的质量不稳定。并且，当前流程缺乏自动化脚本，无法提高效率和减少错误。没有自动化的支持，流程的效率和一致性都受到限制。

发明内容

本发明的目的在于提供一种PSD文件的自动化切图方法、系统、设备及介质，实现了自动化的PSD文件切图流程，节省大量人工操作时间，提高了工作效率，以解决上述现有问题的至少之一。

本发明提供了一种PSD文件的自动化切图方法，所述方法具体包括：

导入PSD文件，基于Node.js插件和psd.js插件解析所述PSD文件，根据预设规则对所述PSD文件的图层进行切割，导出PSD图片；

基于检测规则，确定所述PSD图片是否被正确切割；

基于JavaScript的canvas，或者，基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径。

进一步的，所述基于Node.js插件和psd.js插件解析所述PSD文件，具体包括：

安装Node.js插件和psd.js插件，创建PSD文件处理脚本，在所述PSD文件处理脚本中引用所述Node.js插件的fs模块和所述psd.js插件的psd模块；

根据所述fs模块读取所述PSD文件，将所述PSD文件存储至缓冲区变量psdBuffer中；

根据所述psd模块解析所述PSD文件，获得PSD数据对象；

通过调用tree()方法，从所述PSD数据对象中获取所有图层的层级结构；

根据descendants()方法循环遍历每个图层，通过layer.image.toPng()方法获取每个图层的图像数据并转换为PNG格式。

进一步的，所述根据预设规则对所述PSD文件的图层进行切割，具体包括：

根据所述PSD文件的每个图层的图层名称，将包含关键字的图层名称的图层进行切割；

根据所述PSD文件的图层组结构，将所述PSD文件的每个图层组进行切割；

根据所述PSD文件的每个图层的图层类型，将属于不同图层类型的图层分别进行切割；

根据所述PSD文件的每个图层在PSD画布上的位置，对所述PSD文件的每个图层组进行切割；

根据所述PSD文件的每个图层的图层尺寸，对超过规定图层尺寸的图层进行切割；

根据所述PSD文件的每个图层涉及的业务功能区域，对属于同一个业务功能区域的图层进行切割。

进一步的，所述检测规则包括图片命名规则、图片大小规则、图片位置规则和图片文字规则；所述基于检测规则，确定所述PSD图片是否被正确切割，具体包括：

根据所述图片命名规则，确定所述PSD图片的命名是否为目标图片名称；

根据所述图片大小规则，确定所述PSD图片的宽高是否在规定宽高范围内；

根据所述图片位置规则，确定所述PSD图片的位置是否在规定位置范围内；

根据所述图片文字规则，对所述PSD图片转换为灰度图像后进行阈值分割，再通过tesseract.js组件进行文字特征识别，确定所述PSD图片是否包含目标文字特征。

更进一步的，所述对所述PSD图片转换为灰度图像后进行阈值分割，再通过tesseract.js组件进行文字特征识别，具体包括：

根据sharp库的greyscale()方法将所述PSD图片转换为灰度图像，或者，根据opencv4nodejs库的cv.cvtColor()方法将所述PSD图片转换为灰度图像；

根据sharp库的threshold()方法将所述灰度图像进行阈值分割，或者，根据opencv4nodejs库的cv.threshold()将所述灰度图像进行阈值分割；

根据tesseract.js库中的worker.recognize()方法将阈值分割后的灰度对象进行文字特征识别。

进一步的，所述基于JavaScript的canvas，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径，具体包括：

指定所述PSD图片的来源路径；

创建canvas元素，设置所述canvas元素的尺寸；

根据ctx.drawImage()方法，将所述PSD图片绘制到所述canvas元素上；

根据canvas.toDataURL()方法，将所述canvas元素上的图像数据以Base64编码的数据URL形式导出并保存到指定目录路径。

进一步的，所述基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径，具体包括：

引入node-fetch库；

指定所述PSD图片的来源路径；

设置apiKey变量，所述apiKey变量用于存储tinypng插件的API密钥；

创建用于接受所述PSD图片的来源路径的压缩图像异步函数，在所述压缩图像异步函数中根据所述node-fetch库的fetch方法向tinypng插件发送POST请求，获得压缩后的PSD图片的URL地址并导出保存到指定目录路径。

本发明还提供了一种PSD文件的自动化切图装置，所述装置具体包括：

导入切割模块，用于导入PSD文件，基于Node.js插件和psd.js插件解析所述PSD文件，根据预设规则对所述PSD文件的图层进行切割，导出PSD图片；

图片检测模块，用于基于检测规则，确定所述PSD图片是否被正确切割；

压缩导出模块，用于基于JavaScript的canvas，或者，基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径。

本发明还提供了一种计算机设备，包括：存储器和处理器及存储在存储器上的计算机程序，当所述计算机程序在处理器上被执行时，实现如上述方法中任一项所述的PSD文件的自动化切图方法。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时，实现如上述方法中任一项所述的PSD文件的自动化切图方法。

与现有技术相比，本发明具有以下技术效果的至少之一：

1、实现了自动化的PSD文件切图流程，节省大量人工操作时间，提高了工作效率。

2、进行自动化PSD文件切图可以确保图层规格的一致性，减少因人工操作而引起的不一致性问题，从而提高了图像切图的标准化水平。

3、自动化的过程可以更精确地按照预设规则进行操作，减少人为因素导致的遗漏和切割不准确等错误。

4、自动压缩切割后的图层，减小文件大小，并将图像文件导出到本地，方便后续使用和发布。

附图说明

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

图1是本发明实施例提供的一种PSD文件的自动化切图方法的流程示意图；

图2是本发明实施例提供的一种PSD文件的自动化切图方法的解析PSD文件的流程示意图；

图3是本发明实施例提供的一种PSD文件的自动化切图方法的图片文字规则的流程示意图；

图4是本发明实施例提供的一种PSD文件的自动化切图装置的结构示意图；

图5是本发明实施例提供的一种计算机设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本申请说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

当前的PSD文件切图流程主要是人工在Photoshop中手动切图和手动检查图层规格。需要人工手动操作，耗费大量时间和人力资源。这不仅影响了项目进度，还增加了人力成本。由于人为因素，手动切图容易出现遗漏图层、切割不准确等问题，这可能导致最终产品的质量不稳定。并且，当前流程缺乏自动化脚本，无法提高效率和减少错误。没有自动化的支持，流程的效率和一致性都受到限制。

参照图1，本发明实施例提供了一种PSD文件的自动化切图方法，所述方法具体包括：

S101：导入PSD文件，基于Node.js插件和psd.js插件解析所述PSD文件，根据预设规则对所述PSD文件的图层进行切割，导出PSD图片。

参照图2，在一些实施例中，所述基于Node.js插件和psd.js插件解析所述PSD文件，具体包括：

安装Node.js插件和psd.js插件，创建PSD文件处理脚本，在所述PSD文件处理脚本中引用所述Node.js插件的fs模块和所述psd.js插件的psd模块；

根据所述fs模块读取所述PSD文件，将所述PSD文件存储至缓冲区变量psdBuffer中；

根据所述psd模块解析所述PSD文件，获得PSD数据对象；

通过调用tree()方法，从所述PSD数据对象中获取所有图层的层级结构；

根据descendants()方法循环遍历每个图层，通过layer.image.toPng()方法获取每个图层的图像数据并转换为PNG格式。

该实施例中，首先使用npm或yarn安装Node.js插件和psd.js插件，以便在脚本中使用其功能。然后，创建一个新的JavaScript文件，用于编写处理PSD文件的脚本。在脚本文件中，使用require或import语句引入Node.js的fs模块和psd.js插件的psd模块，fs模块用于文件操作，psd模块用于处理PSD文件。

使用fs模块的fs.readFileSync()方法读取PSD文件，将文件内容存储到一个缓冲区变量(比如psdBuffer)中；使用psd模块的psd.parse(psdBuffer)方法解析缓冲区中的PSD文件内容，获得一个PSD数据对象(可以命名为psdData)；使用psd模块的psdData.tree()方法获取PSD文件的图层层级结构；使用psd模块的descendants()方法遍历图层层级结构，然后使用psd模块的layer.layer.image.toPng()方法获取每个图层的图像数据并将其转换为PNG格式。

在一些实施例中，所述根据预设规则对所述PSD文件的图层进行切割，具体包括：

根据所述PSD文件的每个图层的图层名称，将包含关键字的图层名称的图层进行切割；

根据所述PSD文件的图层组结构，将所述PSD文件的每个图层组进行切割；

根据所述PSD文件的每个图层的图层类型，将属于不同图层类型的图层分别进行切割；

根据所述PSD文件的每个图层在PSD画布上的位置，对所述PSD文件的每个图层组进行切割；

根据所述PSD文件的每个图层的图层尺寸，对超过规定图层尺寸的图层进行切割；

根据所述PSD文件的每个图层涉及的业务功能区域，对属于同一个业务功能区域的图层进行切割。

该实施例中，可以根据图层的名称来判断应该如何切割图像，例如，如果图层名称包含了"header"、"footer"等关键字，可以将这些图层作为页面的头部和底部；当在PSD文件中使用了图层组来组织不同的元素(如按钮、文本框等)，可以按照图层组来切割图像，将每个图层组作为一个独立的图像；根据图层在PSD画布上的位置，可以切割出不同的部分，例如可以将画布的左上、右上、左下和右下部分分别切割出来作为不同的图像；当只需要特定类型的图层，比如只需要切割出文本图层、形状图层等时，可以根据图层的类型来进行切割；如果图层的尺寸相对较大，可以根据尺寸来切割，将大图层分成多个小图像；如果设计涉及不同的功能区域，如导航栏、侧边栏、内容区等，可以根据这些功能区域来切割图像。

S102：基于检测规则，确定所述PSD图片是否被正确切割。

在一些实施例中，所述检测规则包括图片命名规则、图片大小规则、图片位置规则和图片文字规则；所述基于检测规则，确定所述PSD图片是否被正确切割，具体包括：

根据所述图片命名规则，确定所述PSD图片的命名是否为目标图片名称；

根据所述图片大小规则，确定所述PSD图片的宽高是否在规定宽高范围内；

根据所述图片位置规则，确定所述PSD图片的位置是否在规定位置范围内；

根据所述图片文字规则，对所述PSD图片转换为灰度图像后进行阈值分割，再通过tesseract.js组件进行文字特征识别，确定所述PSD图片是否包含目标文字特征。

该实施例中，在图片命名规则方面，比如在每个PSD文件中，界面的不同部分使用特定的命名前缀，如"btn_"表示按钮，"txt_"表示文本框等，如果按钮部分使用了"txt_"的命名前缀则不属于目标图片名称；在图片文字规则方面，比如在界面设计中，一些按钮上需要包含特定标签文字，如“登录”、“注册”等，需要检测是否含有这些目标文字特征。

参照图3，在一些实施例中，所述对所述PSD图片转换为灰度图像后进行阈值分割，再通过tesseract.js组件进行文字特征识别，具体包括：

根据sharp库的greyscale()方法将所述PSD图片转换为灰度图像，或者，根据opencv4nodejs库的cv.cvtColor()方法将所述PSD图片转换为灰度图像；

根据sharp库的threshold()方法将所述灰度图像进行阈值分割，或者，根据opencv4nodejs库的cv.threshold()将所述灰度图像进行阈值分割；

根据tesseract.js库中的worker.recognize()方法将阈值分割后的灰度对象进行文字特征识别。

该实施例中，将彩色PSD图片转换为灰度图像可以减少处理的复杂性，使得后续阈值分割和文字识别更加准确，由于灰度图像只包含亮度信息，有助于突出图像中的细节。阈值分割能够将灰度图像中的像素分为两个部分，一部分是大于阈值的像素，另一部分是小于等于阈值的像素。这有助于提取出图像中的目标特征，比如文字。阈值分割还可以根据需要调整阈值值，以便更好地提取特定特征。最后，通过使用tesseract.js进行文字特征识别，可以将阈值分割后的图像中的文字内容提取出来，有助于判断图像中是否包含了目标文字特征，从而验证图像的内容。

S103：基于JavaScript的canvas，或者，基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径。

在一些实施例中，所述基于JavaScript的canvas，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径，具体包括：

指定所述PSD图片的来源路径；

创建canvas元素，设置所述canvas元素的尺寸；

根据ctx.drawImage()方法，将所述PSD图片绘制到所述canvas元素上；

根据canvas.toDataURL()方法，将所述canvas元素上的图像数据以Base64编码的数据URL形式导出并保存到指定目录路径。

该实施例中，首先确定PSD图片的路径，该路径将用于读取PSD图片数据，然后使用HTML的元素创建一个空白的画布，并设置其尺寸，以便绘制PSD图片，通过创建canvas元素，可以在网页上模拟一个图像画布，用于绘制图像数据。

使用ctx.drawImage()方法将PSD图片绘制到创建的canvas元素上，允许你将PSD图片显示在网页中，便于后续处理和导出。使用canvas.toDataURL()方法将绘制在canvas元素上的图像数据以Base64编码的数据URL(Uniform Resource Locator，统一资源定位符)形式导出，并保存到指定的目录路径。

在一些实施例中，所述基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径，具体包括：

引入node-fetch库；

指定所述PSD图片的来源路径；

设置apiKey变量，所述apiKey变量用于存储tinypng插件的API密钥；

创建用于接受所述PSD图片的来源路径的压缩图像异步函数，在所述压缩图像异步函数中根据所述node-fetch库的fetch方法向tinypng插件发送POST请求，获得压缩后的PSD图片的URL地址并导出保存到指定目录路径。

该实施例中，在POST请求的头部中，通过tinypng插件的API密钥设置授权头部，指定POST请求的内容类型为application/x-www-form-urlencoded，application/x-www-form-urlencoded是一个MIME类型，用于指示发送的数据是经过URL编码的表单数据，在请求的正文部分使用fs.promises.readFile方法读取图像文件，并以Base64编码的方式作为请求的正文内容。最后，等待响应的JSON数据，将其解析为JavaScript对象，从响应数据中获取了压缩后图像的URL。

参照图4，本发明实施例还提供了一种PSD文件的自动化切图装置4，所述装置4具体包括：

导入切割模块401，用于导入PSD文件，基于Node.js插件和psd.js插件解析所述PSD文件，根据预设规则对所述PSD文件的图层进行切割，导出PSD图片；

图片检测模块402，用于基于检测规则，确定所述PSD图片是否被正确切割；

压缩导出模块403，用于基于JavaScript的canvas，或者，基于tinypng插件，对所述PSD图片进行自动压缩后，导出并保存到指定目录路径。

可以理解的是，如图1所示的PSD文件的自动化切图方法实施例中的内容均适用于本PSD文件的自动化切图装置实施例中，本PSD文件的自动化切图装置实施例所具体实现的功能与如图1所示的PSD文件的自动化切图方法实施例相同，并且达到的有益效果与如图1所示的PSD文件的自动化切图方法实施例所达到的有益效果也相同。

需要说明的是，上述装置之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

参照图5，本发明实施例还提供了一种计算机设备5，包括：存储器502和处理器501及存储在存储器502上的计算机程序503，当所述计算机程序503在处理器501上被执行时，实现如上述方法中任一项所述的PSD文件的自动化切图方法。

所述计算机设备5可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。该计算机设备5可包括，但不仅限于，处理器501、存储器502。本领域技术人员可以理解，图3仅仅是计算机设备5的举例，并不构成对计算机设备5的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括输入输出设备、网络接入设备等。

所称处理器501可以是中央处理单元(Central Processing Unit，CPU)，该处理器501还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器502在一些实施例中可以是所述计算机设备5的内部存储单元，例如计算机设备5的硬盘或内存。所述存储器502在另一些实施例中也可以是所述计算机设备5的外部存储设备，例如所述计算机设备5上配备的插接式硬盘，智能存储卡(Smart MediaCard,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器502还可以既包括所述计算机设备5的内部存储单元也包括外部存储设备。所述存储器502用于存储操作系统、应用程序、引导装载程序(BootLoader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器502还可以用于暂时地存储已经输出或者将要输出的数据。

本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时，实现如上述方法中任一项所述的PSD文件的自动化切图方法。

该实施例中，所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。在某些司法管辖区，根据立法和专利实践，计算机可读介质不可以是电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所公开的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。