CN112989244A - 一种基于web端快捷生成H5页面的psd导入方法 - Google Patents

一种基于web端快捷生成H5页面的psd导入方法 Download PDF

Info

Publication number
CN112989244A
CN112989244A CN201911211277.8A CN201911211277A CN112989244A CN 112989244 A CN112989244 A CN 112989244A CN 201911211277 A CN201911211277 A CN 201911211277A CN 112989244 A CN112989244 A CN 112989244A
Authority
CN
China
Prior art keywords
psd
file
generating
web
data
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.)
Pending
Application number
CN201911211277.8A
Other languages
English (en)
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.)
Guangzhou Faisco Internet Technology Co ltd
Original Assignee
Guangzhou Faisco Internet 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 Guangzhou Faisco Internet Technology Co ltd filed Critical Guangzhou Faisco Internet Technology Co ltd
Priority to CN201911211277.8A priority Critical patent/CN112989244A/zh
Publication of CN112989244A publication Critical patent/CN112989244A/zh
Pending legal-status Critical Current

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/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种基于web端快捷生成H5页面的psd导入方法，包括以下步骤：S1：引入psd插件；S2：用psd插件解析psd文件，对psd文件的每个图层的数据做分析，得到psd文件的树结构，并返回数据；S3：对重新组合解析之后的psd文件树结构的节点进行对应操作；S4：收集图层信息并传给后台；S5：整合后台返回的数据并生成H5页面。本发明通过对上传的psd文件的每一个元素进行解析，获取每一个元素的信息之后再生成图片，最后生成一个跟psd文件的内容一样的页面，能够有效的对psd文件里面的元素进行充分解析。

Description

一种基于web端快捷生成H5页面的psd导入方法
技术领域
本发明涉及web端生成页面技术领域，尤其涉及一种基于web端快捷生成H5页面的psd导入方法。
背景技术
psd文件上传类似其他文件上传，不同就在于psd文件上传需要对文件内部的元素进行解析才能生成页面，这一点相对其他文件上传来说会比较复杂一些。所以目前psd文件上传这一块的技术方案相对来说还是比较缺乏，psd上传都比较单一，对psd文件里面的元素解析仍然没有完全到位，所以现提出了一种基于web端快捷生成H5页面的psd导入方法。
发明内容
基于背景技术存在的技术问题，本发明提出了一种基于web端快捷生成H5页面的psd导入方法。
本发明提出的一种基于web端快捷生成H5页面的psd导入方法，包括以下步骤：
S1：引入psd插件；
S2：用psd插件解析psd文件，对psd文件的每个图层的数据做分析，得到psd文件的树结构，并返回数据；
S3：对重新组合解析之后的psd文件树结构的节点进行对应操作；
S4：收集图层信息并传给后台；
S5：整合后台返回的数据并生成H5页面。
优选地，所述S1中的psd插件为psd.js。
优选地，所述S2中的数据包括文件结构、文件的大小、图层的大小、图层的名称和字体数据。
优选地，所述S3中的对节点进行对应操作的方法为root()方法、isRoot()方法、children()方法、hasChildren()方法、childless()方法、ancestors()方法、sibl ings()方法、nextSibling()方法、prevSibl ing()方法、hasSiblings()方法、onlyChild()方法、descendants()方法、subtree()方法、depth()方法或path()方法。
本发明中的有益效果为：
通过对上传的psd文件的每一个元素进行解析，获取每一个元素的信息之后再生成图片，最后生成一个跟psd文件的内容一样的页面，能够有效的对psd文件里面的元素进行充分解析。
附图说明
图1为本发明提出的一种基于web端快捷生成H5页面的psd导入方法的流程示意图；
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。
实施例1，参照图1，一种基于web端快捷生成H5页面的psd导入方法，包括以下步骤：
S1：引入psd插件；
var PSD＝require(‘psd’)；
S2：用psd插件解析psd文件，对psd文件的每个图层的数据做分析，得到psd文件的树结构，并返回数据；
var psd＝PSD.fromFile(“path/file.psd”)；
psd.tree()方法；
S3：对重新组合解析之后的psd文件树结构的节点进行对应操作；
S4：收集图层信息并传给后台；
S5：整合后台返回的数据并生成H5页面。
本发明中，S1中的psd插件为psd.js，S2中的数据包括文件结构、文件的大小、图层的大小、图层的名称和字体数据，S3中的对节点进行对应操作的方法为root()方法。
实施例2，参照图1，其与实施例1的区别仅在于，S3中的对节点进行对应操作的方法为isRoot()方法。
实施例3，参照图1，其与实施例1-2的区别仅在于，S3中的对节点进行对应操作的方法为children()方法。
实施例4，参照图1，其与实施例1-3的区别仅在于，S3中的对节点进行对应操作的方法为hasChildren()方法。
实施例5，参照图1，其与实施例1-4的区别仅在于，S3中的对节点进行对应操作的方法为childless()方法。
实施例6，参照图1，其与实施例1-5的区别仅在于，S3中的对节点进行对应操作的方法为siblings()方法。
实施例7，参照图1，其与实施例1-6的区别仅在于，S3中的对节点进行对应操作的方法为nextSibling()方法。
实施例8，参照图1，其与实施例1-7的区别仅在于，S3中的对节点进行对应操作的方法为prevSibling()方法。
实施例9，参照图1，其与实施例1-8的区别仅在于，S3中的对节点进行对应操作的方法为hasSiblings()方法。
实施例10，参照图1，其与实施例1-9的区别仅在于，S3中的对节点进行对应操作的方法为onlyChild()方法。
实施例11，参照图1，其与实施例1-10的区别仅在于，S3中的对节点进行对应操作的方法为descendants()方法。
实施例12，参照图1，其与实施例1-11的区别仅在于，S3中的对节点进行对应操作的方法为subtree()方法。
实施例13，参照图1，其与实施例1-12的区别仅在于，S3中的对节点进行对应操作的方法为depth()方法。
实施例14，参照图1，其与实施例1-13的区别仅在于，S3中的对节点进行对应操作的方法为path()方法。
实施例15，参照图1，其与实施例1-14的区别仅在于，S3中的对节点进行对应操作的方法为ancestors()方法。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护范围之内。

Claims (4)

1.一种基于web端快捷生成H5页面的psd导入方法，其特征在于，包括以下步骤：
S1：引入psd插件；
S2：用psd插件解析psd文件，对psd文件的每个图层的数据做分析，得到psd文件的树结构，并返回数据；
S3：对重新组合解析之后的psd文件树结构的节点进行对应操作；
S4：收集图层信息并传给后台；
S5：整合后台返回的数据并生成H5页面。
2.根据权利要求1所述的一种基于web端快捷生成H5页面的psd导入方法，其特征在于，所述S1中的psd插件为psd.js。
3.根据权利要求2所述的一种基于web端快捷生成H5页面的psd导入方法，其特征在于，所述S2中的数据包括文件结构、文件的大小、图层的大小、图层的名称和字体数据。
4.根据权利要求3所述的一种基于web端快捷生成H5页面的psd导入方法，其特征在于，所述S3中的对节点进行对应操作的方法为root()方法、isRoot()方法、children()方法、hasChildren()方法、childless()方法、ancestors()方法、siblings()方法、nextSibling()方法、prevSibling()方法、hasSiblings()方法、onlyChild()方法、descendants()方法、subtree()方法、depth()方法或path()方法。
CN201911211277.8A 2019-12-02 2019-12-02 一种基于web端快捷生成H5页面的psd导入方法 Pending CN112989244A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911211277.8A CN112989244A (zh) 2019-12-02 2019-12-02 一种基于web端快捷生成H5页面的psd导入方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911211277.8A CN112989244A (zh) 2019-12-02 2019-12-02 一种基于web端快捷生成H5页面的psd导入方法

Publications (1)

Publication Number Publication Date
CN112989244A true CN112989244A (zh) 2021-06-18

Family

ID=76330933

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911211277.8A Pending CN112989244A (zh) 2019-12-02 2019-12-02 一种基于web端快捷生成H5页面的psd导入方法

Country Status (1)

Country Link
CN (1) CN112989244A (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103777989A (zh) * 2012-10-25 2014-05-07 阿里巴巴集团控股有限公司 用于将视觉稿源文件生成html标记的方法及系统
CN104020984A (zh) * 2013-02-28 2014-09-03 阿里巴巴集团控股有限公司 一种生成静态页面的方法及装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103777989A (zh) * 2012-10-25 2014-05-07 阿里巴巴集团控股有限公司 用于将视觉稿源文件生成html标记的方法及系统
CN104020984A (zh) * 2013-02-28 2014-09-03 阿里巴巴集团控股有限公司 一种生成静态页面的方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
路人甲丶: "psd.js中文文档(译)", pages 1 - 5, Retrieved from the Internet <URL:https://juejin.cn/post/6844903870880038926> *

Similar Documents

Publication Publication Date Title
CN106569824B (zh) 页面数据编译的方法和装置、页面渲染的方法和装置
CN106648945B (zh) 一种接口数据测试方法、装置及电子设备
US9329849B2 (en) Systems and methods for converting typed code
CN102184184B (zh) 一种网页动态信息获取方法
CA2539474A1 (en) System and method for dynamic generation and customization of web service client applications for terminals
CN104484216A (zh) 服务接口文档和在线测试工具生成方法、装置
CN112100550A (zh) 一种页面构建方法和装置
US8407179B2 (en) Method of determining influence of a member within a dataset
JP2011198354A (ja) デスクトップ・アプリケーション移行のためのシステムと方法
CN105404514B (zh) JavaScript渲染方法和装置
JP2021174530A (ja) ビデオフレームの処理方法及び処理装置、電子機器、記憶媒体並びにコンピュータプログラム
CN109460220A (zh) 报文预定义代码生成方法、装置、电子设备和存储介质
CN113238740B (zh) 代码生成方法、代码生成装置、存储介质及电子设备
CN110287429A (zh) 数据解析方法、装置、设备及存储介质
CN112582073B (zh) 医疗信息获取方法、装置、电子设备和介质
CN114168149A (zh) 一种数据转换方法及装置
CN112784535A (zh) 一种json、xml格式数据智能转换为传统数据表格式的算法
CN113268232B (zh) 一种页面皮肤生成方法、装置和计算机可读存储介质
CN112989244A (zh) 一种基于web端快捷生成H5页面的psd导入方法
CN112785284A (zh) 基于结构化文档的报文入库方法及装置
US10896161B2 (en) Integrated computing environment for managing and presenting design iterations
CN105793842B (zh) 序列化消息之间的转换方法和装置
CN116204421A (zh) 测试用例生成方法、装置、存储介质和计算机设备
US20100106750A1 (en) Disambiguation of tabular data
CN107451167B (zh) 站内点击位的点击数据获取方法、装置和系统

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