CN117093386B - 页面截图方法、装置、计算机设备和存储介质 - Google Patents

页面截图方法、装置、计算机设备和存储介质 Download PDF

Info

Publication number
CN117093386B
CN117093386B CN202311355962.4A CN202311355962A CN117093386B CN 117093386 B CN117093386 B CN 117093386B CN 202311355962 A CN202311355962 A CN 202311355962A CN 117093386 B CN117093386 B CN 117093386B
Authority
CN
China
Prior art keywords
page
screenshot
target
running environment
file
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.)
Active
Application number
CN202311355962.4A
Other languages
English (en)
Other versions
CN117093386A (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202311355962.4A priority Critical patent/CN117093386B/zh
Publication of CN117093386A publication Critical patent/CN117093386A/zh
Application granted granted Critical
Publication of CN117093386B publication Critical patent/CN117093386B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/54Interprogram communication
    • G06F9/547Remote procedure calls [RPC]; Web services
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/54Interprogram communication
    • G06F9/543User-generated data transfer, e.g. clipboards, dynamic data exchange [DDE], object linking and embedding [OLE]
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/2866Architectures; Arrangements
    • H04L67/289Intermediate processing functionally located close to the data consumer application, e.g. in same machine, in same home or in same sub-network
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/50Network services
    • H04L67/56Provisioning of proxy services
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00Indexing scheme relating to G06F9/00
    • G06F2209/54Indexing scheme relating to G06F9/54
    • G06F2209/545Gui
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00Indexing scheme relating to G06F9/00
    • G06F2209/54Indexing scheme relating to G06F9/54
    • G06F2209/549Remote execution
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/455Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529Embedded in an application, e.g. JavaScript in a Web browser
    • YGENERAL 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
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE 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/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

本申请涉及一种页面截图方法、装置、计算机设备、存储介质和计算机程序产品。所述方法可应用于云技术领域,所述方法包括:响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;基于所述对象代理信息确定所述待截图页面的页面运行环境;在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。采用本方法能够提高页面截图的准确性。

Description

页面截图方法、装置、计算机设备和存储介质
技术领域
本申请涉及计算机技术领域,特别是涉及一种页面截图方法、装置、计算机设备和存储介质。
背景技术
随着计算机科学的发展,用户在终端浏览网页时,通过对网页进行页面截图,从而能够以图片的形式保留或分享网页的页面内容。
现有的针对网页页面的截图,是通过终端所运行页面应用的截图工具对网页进行重新绘制而实现的,然而,由于终端以及客户端的多样性,有些终端和客户端之间可能不兼容,从而在基于客户端的截图工具进行截图时无法有效的渲染网页的内容,导致页面截图效果较差。
发明内容
基于此,有必要针对上述技术问题,提供一种能够提高页面截图效果的道页面截图方法、装置、计算机设备和存储介质。
第一方面,本申请提供了一种页面截图方法。所述方法包括:
响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
基于所述对象代理信息确定所述待截图页面的页面运行环境;
在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。
第二方面,本申请还提供了一种页面截图装置。所述装置包括:
对象代理信息获取模块,用于响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
页面运行环境确定模块,用于基于所述对象代理信息确定所述待截图页面的页面运行环境;
页面文件生成模块,用于在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
文件发送模块,用于将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。
第三方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
基于所述对象代理信息确定所述待截图页面的页面运行环境;
在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。
第四方面,本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:
响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
基于所述对象代理信息确定所述待截图页面的页面运行环境;
在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。
第五方面,本申请还提供了一种计算机程序产品。所述计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现以下步骤:
响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
基于所述对象代理信息确定所述待截图页面的页面运行环境;
在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
将所述页面文件发送至服务器,以使所述服务器基于所述页面文件对所述待截图页面进行截图。
上述页面截图方法、装置、计算机设备、存储介质和计算机程序产品,在待截图页面的截图操作,获取待截图页面的对象代理信息,基于对象代理信息确定待截图页面的页面运行环境,以便后续基于页面运行环境选取恰当的截图方案,从而提高截图的准确性;在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用,确定出待截图页面与页面运行环境的兼容情况,在某些功能不兼容时,可以在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图,从而实现对待截图页面的完整截图,提高了页面截图的准确性;同时,通过在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,避开了直接将截图页面发送给服务器进行截图时可能存在的不安全因素,提高了页面截图时的数据安全性。
附图说明
图1为一个实施例中页面截图方法的应用环境图;
图2为一个实施例中页面截图方法的流程示意图;
图3为一个实施例中待截图页面的示意图;
图4为另一个实施例中待截图页面的示意图;
图5为另一个实施例中待截图页面的示意图;
图6为另一个实施例中页面截图方法的流程示意图;
图7为另一个实施例中页面截图方法的流程示意图;
图8为另一个实施例中页面截图方法的流程示意图;
图9为一个实施例中DOM-to-image截图步骤的流程示意图;
图10为一个实施例中html2canvas截图步骤的流程示意图;
图11为另一个实施例中待截图页面的示意图;
图12为一个实例中的页面截图示意图;
图13为一个实施例中页面截图装置的结构框图;
图14为一个实施例中页面截图装置的结构框图;
图15为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
本申请实施例提供的页面截图方法,可以应用于云技术领域,云技术(Cloudtechnology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来,实现数据的计算、储存、处理和共享的一种托管技术。
云技术(Cloud technology)基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称,可以组成资源池,按需所用,灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源,如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用,将来每个物品都有可能存在自己的识别标志,都需要传输到后台系统进行逻辑处理,不同程度级别的数据将会分开处理,各类行业数据皆需要强大的系统后盾支撑,只能通过云计算来实现。
云计算(cloud computing)是一种计算模式,它将计算任务分布在大量计算机构成的资源池上,使各种应用系统能够根据需要获取计算力、存储空间和信息服务。提供资源的网络被称为“云”。“云”中的资源在使用者看来是可以无限扩展的,并且可以随时获取,按需使用,随时扩展,按使用付费。
作为云计算的基础能力提供商,会建立云计算资源池(简称云平台,一般称为IaaS(Infrastructure as a Service,基础设施即服务)平台,在资源池中部署多种类型的虚拟资源,供外部客户选择使用。云计算资源池中主要包括:计算设备(为虚拟化机器,包含操作系统)、存储设备、网络设备。
本申请实施例提供的页面截图方法,可以应用于如图1所示的应用环境中。其中,终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上,也可以放在云上或其他服务器上。该页面截图方法可以通过终端102单独执行,或者由终端102和服务器104协同执行。在一些实施例中,该页面截图方法由终端102单独执行,终端102响应于在待截图页面的截图操作,获取待截图页面的对象代理信息;基于对象代理信息确定待截图页面的页面运行环境;在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用时,在页面运行环境中基于待截图页面生成目标语言的页面文件;将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图。
其中,终端102可以但不限于是各种台式计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备,物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端102以及服务器104可以通过有线或无线通信方式进行直接或间接地连接,本申请在此不做限制。
在一个实施例中,如图2所示,提供了一种页面截图方法,以该方法应用于图1中的终端为例进行说明,包括以下步骤:
S202,响应于在待截图页面的截图操作,获取待截图页面的对象代理信息。
其中,待截图页面是指想要对其进行截图或屏幕捕捉的特定网页或网站页面,具体可以是HTML(Hypertext Markup Language,超文本标记语言)页面,HTML页面是由HTML代码构成的文档,用于在互联网上呈现文本、图像、链接、多媒体和其他内容。HTML页面由一系列的HTML标签(HTML tags)组成,这些标签定义了页面上的不同元素和结构,标签通常由尖括号(<>)括起来,并包括在元素的开始标签和结束标签之间,用于指示元素的类型和属性,例如,<p>标签表示段落,<img>标签表示图像。
截图操作是指触发截图功能的具体操作,具体可以是对截图按钮的点击操作,或者是对页面应用内置截图工具的截图快捷键的触发操作。如图3所示的待截图页面中,展示有截图按钮302,用户可以点击该截图按钮302,终端响应于对该截图按钮302的点击操作获取该待截图页面的对象代理信息;如图4所示的待截图页面中,并未展示有截图按钮,用户可以触发截图快捷键,终端响应于对截图快捷键的触发操作取该待截图页面的对象代理信息。
对象代理信息也可以称为用户代理信息(User Agent),用于标识页面应用的相关信息,具体可以包括页面应用的名称和版本号,页面应用所属终端的操作系统信息、设备信息等。
页面应用是指负责加载、渲染和呈现待截图页面的应用,具体可以是独立页面应用或者内置页面应用,独立页面应用是独立运行的应用程序,通常运行在计算机、移动设备或其他平台上,用于浏览和展示网页内容,比如Web浏览器,Web浏览器包括Chrome浏览器、Safari浏览器等;内置页面应用是指一个网页应用程序,嵌入到另一个应用程序的界面中,以在该应用程序内部显示网页内容,这些应用程序通常使用内置的Web视图或浏览器控件来加载和渲染网页,例如移动应用程序和桌面应用程序,许多移动应用程序内部嵌入了Web视图,以便显示网页内容,这使得应用程序能够以混合方式提供本地和Web内容。用户可以在应用程序中访问网页,执行截图操作等,一些桌面应用程序也可以嵌入Web浏览器控件,以显示网页内容,这些应用程序可以在桌面操作系统上运行,同时加载和呈现网页。
具体的,终端在通过页面应用显示出待截图页面之后,用户可以触发针对待截图页面的截图操作,终端响应于在待截图页面的截图操作,触发对象代理信息获取指令,基于对象代理信息获取指令获取待截图页面的对象代理信息。
例如,终端响应于在待截图页面的截图操作,生成如下JavaScript命令“console.log(navigator.userAgent)”,并基于该JavaScript命令来获取User Agent。
S204,基于对象代理信息确定待截图页面的页面运行环境。
其中,页面运行环境是指待截图页面在用户访问时所处的计算机或设备环境,以及与之相关的软件和硬件配置,具体可以包括操作系统类型、页面应用类型、页面应用版本等信息。
需要说明的是,本申请实施例中的页面运行环境具体可以是第一页面应用提供的运行环境或者第二页应用提供的运行环境,第一页面应用是指独立页面应用,第二页面应用是指内置页面应用,可以理解的是,若待截图页面是通过第一页面应用进行显示的,则页面运行环境则为第一页面应用所提供的运行环境,若待截图页面是通过第二页面应用进行显示的,则页面运行环境则为第二页面应用提供的运行环境。
具体的,终端在得到待截图页面的对象代理信息之后,对所得到的对象代理信息进行解析,得到解析结果,并从解析结果中提取出应用标识信息,基于应用标识信息确定待截图页面的页面运行环境。
例如,当应用标识信息为"Chrome"、"Firefox"、"Safari"、"Edge" 中的任意一个时,确定待截图页面的页面应用为第一页面应用,进而确定待截图页面的页面运行环境为第一页面应用提供的运行环境;当应用标识信息为"WebView"、"UIWebView"、"WKWebView"中的任意一个时,确定待截图页面的页面应用为第二页面应用,进而确定待截图页面的页面运行环境为第二页面应用提供的运行环境。
S206,在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用时,在页面运行环境中基于待截图页面生成目标语言的页面文件。
其中,页面元素是构成待截图页面的基本组成部分,具体可以是文本、图像、链接、表单、按钮、菜单、视频、音频、标签等,每个页面元素都具有特定的功能和外观,以协同构建整个待截图页面的布局和交互。
第一页面应用内置的截图功能无法截取的页面元素是指应用了第一页面应用内置的截图功能所不支持的样式、布局或渲染方式的页面元素,例如,一些页面元素应用了特殊的样式、过渡或动画效果,这些效果在静态截图中可能无法完全呈现,因为截图通常只捕获页面的静态状态,如图5所示的待截图页面 “我爱学习”四个字应用了动画效果,在展示该待截图页面时,“我”、“爱”、“学”、“习”四个字依次逐渐展示,因为截图通常只捕获页面的静态状态,从而这四个字的动画效果在静态截图中可能无法完全呈现;一些页面元素可能通过JavaScript或CSS自定义渲染,这使得它们的呈现方式不同于标准的HTML元素,这样的元素可能需要特殊的截图处理才能捕获其呈现效果。
目标页面应用可以是根据实际需求预先指定的页面应用,比如,目标页面应用为Safari浏览器之外的其他独立页面应用,也即目标页面应用可以是Chrome浏览器、Firefox浏览器、Edge浏览器等。
目标语言可以是对待截图页面进行转换的指定语言,具体是与当前待截图页面所使用语言不同的语言,例如当前待截图页面为基于超文本标记语言的页面,即HTML页面,目标语言可以是SVG(Scalable Vector Graphics,可伸缩矢量图形)语言。
具体的,终端在确定出页面运行环境为第一页面应用提供的运行环境之后,还进一步判断待截图页面中是否存在第一页面应用内置的截图功能无法截取的页面元素时,在当前的页面运行环境中基于带截图页面生成目标语言的页面文件;此外还可以确定第一页面应用是否为目标页面应用,若第一页面应用为目标页面应用,则在页面运行环境中基于待截图页面生成目标语言的页面文件。
例如,可以在页面运行环境中将HTML格式的待截图页面转换为SVG格式的页面文件,即SVG页面文件。
S208,将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图。
具体的,终端得到基于目标语言的页面文件之后,可以将该基于目标语言的页面文件发送给服务器,服务器在接收到目标语言的页面文件之后,可以对基于目标语言的页面文件进行加载,得到待截图页面,并对待截图页面进行截图,得到待截图页面的页面截图。
此外,服务器在得到待截图页面的页面截图之后还可以将页面截图返回给终端,以使终端可以对页面截图进行后续处理,例如显示该页面截图或者保存该页面截图。
需要说明的是,在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用,终端也可以不对待截图页面进行转换,而是直接将待截图页面发送给服务器,例如将HTML格式的待截图页面发送给服务器,以使服务器对待截图页面进行截图,但这种直接发送的方式可能会存在一定的安全风险,例如待截图页面包含潜在的恶意内容或脚本,会导致服务器受到攻击;而通过对待截图页面进行转换,可以在转换过程中对页面内容进行处理和清理,以剔除潜在的恶意代码或安全威胁,之后再将转换所得的SVG页面文件发送给服务器,从而可以提高安全性。
上述页面截图方法中,在待截图页面的截图操作,获取待截图页面的对象代理信息,基于对象代理信息确定待截图页面的页面运行环境,以便后续基于页面运行环境选取恰当的截图方案,从而提高截图的准确性;在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用,确定出待截图页面与页面运行环境的兼容情况,在某些功能不兼容时,可以在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图,从而实现对待截图页面的完整截图,提高了页面截图的准确性;同时,通过在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,避开了直接将截图页面发送给服务器进行截图时,可能存在的不安全因素,提高了页面截图时的数据安全性。
在一个实施例中,上述页面截图方法还包括截图测试的过程,该截图测试过程具体包括以下步骤:对待截图页面进行解析,得到待截图页面中的页面元素和页面元素的样式信息;基于页面元素的样式信息从页面元素中选取应用了待测试样式的候选页面元素;通过第一页面应用内置的截图功能对候选页面元素进行截图测试,得到截图测试结果。
解析是指将页面的原始内容分析和转换成可被计算机程序理解和处理的数据结构的过程,具体可以是将HTML格式的待截图页面解析为文档对象模型(Document ObjectModel,DOM)树或其他数据结构;DOM树是一个树状结构,表示了网页的层次结构,包括页面元素、页面元素的样式信息,样式信息用于确定页面元素的外观和布局。
待测试样式是指可能不被第一页面应用内置的截图功能所支持的样式。可以理解的是,页面截图功能通常是针对标准的HTML和CSS样式设计的,但某些自定义或非标准的样式属性可能无法被截图功能正确地处理或捕获。
例如,待测试样式具体可以是一些CSS(Cascading Style Sheets,层叠样式表)样式,比如background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform等,其中background-blend-mode用于控制背景图片的混合模式、background-clip: text用于指定背景应该被裁剪到文本内容的形状、box-decoration-break用于控制在元素的内部或跨越元素边界的盒子装饰(如边框、内边距等)在元素跨越线断开时如何表现、repeating-linear-gradient()是CSS中的线性渐变函数,用于创建一个重复的线性渐变背景,它可以在背景中创建平铺效果、font-variant-ligatures用于控制字体是否启用或禁用连字(ligatures),连字是某些字体中两个或多个字符连接在一起形成的特殊字符组合、mix-blend-mode用于指定元素的内容与其背景之间的混合模式,影响元素的可见性和外观、writing-mode用于控制文本的书写模式,包括水平书写(horizontal-tb)、垂直书写(vertical-rl和vertical-lr)等、border-image用于将图像或样式应用到元素的边框上,以代替传统的边框样式、box-shadow用于向元素添加阴影效果,可以控制阴影的颜色、大小、模糊度等属性、filter用于对元素应用图像滤镜效果,如模糊、亮度、对比度等,以改变元素的外观、zoom用于非标准的浏览器功能,它用于缩放元素的大小、transform用于在二维或三维平面上对元素进行变换,包括旋转、缩放、平移等。
具体的,计算机设备可以获取待截图页面的HTML源代码,通过第一页面应用内置的解析器或解析库对待截图页面的HTML源代码进行解析,将其转换为DOM树,并对DOM树进行遍历,得到待截图页面中的页面元素和各页面元素的样式信息,针对任意一个页面元素,将该页面元素的样式信息与待测试样式进行比较,若其应用了待测试样式,则将该页面元素确定为候选页面元素,针对任意一个候选页面元素,调用第一页面应用内置的截图功能对候选页面元素进行截图,得到候选页面元素的截图结果,并基于截图结果确定截图测试结果。
可以理解的是,当候选页面元素的数量为至少两个时,若存在任意一个候选页面元素的截图测试结果为不通过,则确定待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素。当截图测试结果表征待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素时,在页面运行环境中基于待截图页面生成目标语言的页面文件。
上述实施例中,计算机设备通过对待截图页面进行解析,得到待截图页面中的页面元素和页面元素的样式信息;基于页面元素的样式信息从页面元素中选取应用了待测试样式的候选页面元素;通过第一页面应用内置的截图功能对候选页面元素进行截图测试,得到截图测试结果,从而可以确定出截图页面与页面运行环境的兼容情况,以便在某些功能不兼容时,可以在页面运行环境中基于待截图页面生成目标语言的页面文件,以基于页面文件对待截图页面进行截图,提高截图的准确性。
在一个实施例中,页面元素包括文本元素和图像元素,终端在页面运行环境中基于待截图页面生成目标语言的页面文件的过程包括以下步骤:在页面运行环境中,将文本元素转换为目标语言的目标文本元素,将图像元素转换为目标语言的目标图像元素,以及基于样式信息生成基于目标语言的目标样式信息,得到包含目标文本元素、目标图像元素和目标样式信息的页面文件。
其中,目标文本元素是指在目标语言中表示文本内容的元素,目标图像元素是指在目标语言中表示图像内容的元素,目标样式信息是指在目标语言中用于表示元素样式的属性和值。例如目标语言为SVG,在SVG中,常用的文本元素是<text>元素、常用的图像元素是<image>元素,样式信息通常使用XML属性来表示。
具体的,针对任意一个文本元素,终端创建基于目标语言的初始文本元素,例如SVG的<text>元素,并将该文本元素复制到初始文本元素中,得到目标文本元素;针对任意一个图像元素,终端创建基于目标语言的初始图像元素,例如SVG的<image>元素,将图像元素的位置、大小、图像资源等属性复制到初始图像元素中,得到目标图像元素;基于目标语言的样式属性,将待截图页面中各页面元素的样式信息映射得到目标样式信息,并使用目标语言(例如SVG)的文档结构创建一个新的文档,将所有目标文本元素和目标图像元素添加到文档中,确保它们被正确嵌套和布局,将目标样式信息应用到相应的元素上,最终,将生成的文档保存为页面文件,页面文件可以是SVG文件或其他目标语言的文件格式。
可以理解的是,待截图页面的页面元素中除了文本元素和图像元素之外还可以存在一些其他元素,比如链接元素、表格元素、表单元素、嵌入元素等,针对其他元素可以按照其他元素所适用的转换规则对其进行转换,从而得到基于目标语言的相应目标元素。
上述实施例中,终端通过在页面运行环境中,将文本元素转换为目标语言的目标文本元素,将图像元素转换为目标语言的目标图像元素,以及基于样式信息生成基于目标语言的目标样式信息,得到包含目标文本元素、目标图像元素和目标样式信息的页面文件,提高了页面的兼容性、可移植性、样式一致性和安全性,以便后续可直接结余页面文件进行页面截图,提高了截图的准确性。
在一个实施例中,上述页面截图方法还包括以下步骤:当待截图页面中不存在第一页面应用内置的截图功能无法截取的页面元素、且第一页面应用不是目标页面应用时,通过目标库对待截图页面的文档对象模型树进行解析转换,得到适用于目标库的待渲染元素和渲染布局样式;按照渲染布局样式将待渲染元素绘制到画布上,得到待截图页面的截图图像。
其中,目标库是用于对待截图页面进行渲染以进行截图的库,具体可以是html2canvas库,html2canvas库将网页的HTML元素和CSS样式渲染成一个画布(Canvas)上的图像。
具体的,当待截图页面中不存在第一页面应用内置的截图功能无法截取的页面元素、且第一页面应用不是目标页面应用(第一页面应用为Safari浏览器)时,终端可以调用目标库,并获取用户根据需求所定义的配置信息,并对文档对象模型树进行复制,得到复制的文档对象模型树,并对复制的文档对象模型树进行解析转换,得到适用于目标库的待渲染元素和渲染布局样式,在目标库中创建一个画布渲染器,通过画布渲染器将按照元素的渲染布局样式属性(如位置、尺寸、颜色等)将解析得到的待渲染元素绘制到画布上,确保元素在生成的画布上的位置和样式与原始待截图页面一致,画布上将包含了待截图页面的图像,将这个图像生成为图像文件,比如PNG或JPEG格式,从而得到待截图页面的截图图像。
其中,配置信息为截图操作的各项参数,包括截图的目标元素、分辨率、背景颜色、忽略某些元素等。
上述实施例中,终端在待截图页面中不存在第一页面应用内置的截图功能无法截取的页面元素、且第一页面应用不是目标页面应用时,通过目标库对待截图页面的文档对象模型树进行解析转换,得到适用于目标库的待渲染元素和渲染布局样式;按照渲染布局样式将待渲染元素绘制到画布上,得到待截图页面的截图图像,通过使用目标库进行文档对象模型树解析和渲染,可以以程序化的方式快速、灵活地生成页面截图,从而提高了截图效率,并确保了截图准确性。
在一个实施例中,上述页面截图方法还包括以下步骤:在页面运行环境为第二页面应用提供的运行环境的情况下,在页面运行环境中基于待截图页面生成目标语言的页面文件。
具体的,在页面运行环境为第二页面应用提供的运行环境的情况下,终端可以在第二页面应用提供的运行环境中对待截图页面进行解析,得到待截图页面中的页面元素和页面元素的样式信息,页面元素包括文本元素和图像元素,并将文本元素转换为目标语言的目标文本元素,将图像元素转换为目标语言的目标图像元素,以及基于样式信息生成基于目标语言的目标样式信息,得到包含目标文本元素、目标图像元素和目标样式信息的页面文件,以便后续可以基于页面文件对待截图页面进行截图。
上述实施例中,终端在页面运行环境为第二页面应用提供的运行环境的情况下,在页面运行环境中基于待截图页面生成目标语言的页面文件可以适应不同的需求和环境,确保截图操作能够顺利进行,从而提高截图的准确性和效率。
在一个实施例中,上述页面截图方法还包括以下步骤:检测页面运行环境与基于目标语言的外部引用功能之间的兼容性,以及检测页面运行环境与基于目标语言的图像嵌入功能之间的兼容性;终端将页面文件发送至服务器的过程还包括以下步骤:当页面运行环境与外部引用功能、图像嵌入功能不兼容时,将页面文件发送至服务器。
其中,外部引用功能(foreignObject)是一项用于目标语言的功能,例如SVG的外部引用功能,允许在SVG图像中嵌入其他XML命名空间的内容,具体可以用于嵌入HTML或其他XML标记语言的内容,检测页面运行环境与基于目标语言的外部引用功能之间的兼容性是为了验证当前的运行环境是否能使用外部引用功能;图像嵌入功能(data:image/svg+xml)是一种数据URL方案,允许将SVG(可伸缩矢量图形)图像嵌入到网页或文档中,检测页面运行环境与基于目标语言的图像嵌入功能之间的兼容性是为了验证当前的运行环境是否能正确解析和显示以data:image/svg+xml格式嵌入的SVG图像。
具体的,若当前的页面运行环境为第一页面应用所提供的运行环境,则检测第一页面应用所提供的运行环境与基于目标语言的外部引用功能之间的兼容性,以及检测第一页面应用所提供的运行环境与基于目标语言的图像嵌入功能之间的兼容性,若第一页面应用所提供的运行环境与外部引用功能、图像嵌入功能均不兼容时,将所生成的页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图;若当前的页面运行环境为第二页面应用所提供的运行环境,则检测第二页面应用所提供的运行环境与基于目标语言的外部引用功能之间的兼容性,以及检测第二页面应用所提供的运行环境与基于目标语言的图像嵌入功能之间的兼容性,若第二页面应用所提供的运行环境与外部引用功能、图像嵌入功能均不兼容时,将所生成的页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图。
上述实施例中,终端通过检测页面运行环境与基于目标语言的外部引用功能之间的兼容性,以及检测页面运行环境与基于目标语言的图像嵌入功能之间的兼容性,可以基于某些功能的兼容性检测结果确定恰当的截图方案,无论是第一页面应用还是第二页面应用提供的运行环境,都能够实现对待截图页面的截图,即使当前的页面运行环境不支持特定的功能,也不会导致截图失败或导致截图不准确,能够通过服务器来处理和生成截图,从而提高了截图的准确性。
在一个实施例中,终端检测页面运行环境与基于目标语言的外部引用功能之间的兼容性的步骤包括以下步骤:获取待测试外部元素和基于目标语言的初始元素;在页面运行环境下,启用外部引用功能将待测试外部元素添加到初始元素,得到目标测试元素;基于目标测试元素确定页面运行环境与基于目标语言的外部引用功能之间的兼容性。
其中,待测试外部元素可以是要嵌入到目标语言中的外部内容,具体可以是从待截图页面中提取出的内容,也可以是新创建的用于测试的内容;初始元素具体可以是SVG的根元素。
具体的,终端可以从待截图页面中提取出待测试外部元素,并基于目标语言生成初始元素,并在页面运行环境下,启用外部引用功能将待测试外部元素添加到初始元素,得到目标测试元素,并访问目标测试元素所引用的外部资源,具体可以是检查元素的显示、布局和交互行为是否与预期一致,当一致时,确定当前的页面运行环境与基于目标语言的外部引用功能之间是兼容的,当不一致时,则确定当前的页面运行环境与基于目标语言的外部引用功能之间是不兼容的。
上述实施例中,终端通过获取待测试外部元素和基于目标语言的初始元素;在页面运行环境下,启用外部引用功能将待测试外部元素添加到初始元素,得到目标测试元素;基于目标测试元素确定页面运行环境与基于目标语言的外部引用功能之间的兼容性,基于所确定的页面运行环境与基于目标语言的外部引用功能之间的兼容性可以选取与当前页面运行环境适配的截图方案,从而提高了截图的准确性。
在一个实施例中,终端检测页面运行环境与基于目标语言的图像嵌入功能之间的兼容性的过程还包括以下步骤:获取待测试图像对象;在页面运行环境下启用图像嵌入功能,对待测试图像对象进行属性赋值,得到待测试图像对象基于目标语言的属性预设值;对待测试图像对象进行属性值读取,得到属性读取值;基于属性读取值与属性预设值之间的匹配关系,确定页面运行环境与基于目标语言的图像嵌入功能之间的兼容性。
其中,待测试图像对象可以是要嵌入到目标语言中的图像对象,具体可以是从待截图页面中提取出的图像对象,也可以是新创建的用于测试的图像对象。
具体的,终端可以从待截图页面中提取出待测试图像对象,并在页面运行环境下启用图像嵌入功能,以对待测试图像对象进行属性赋值,得到待测试图像对象基于目标语言的属性预设值,对待测试图像对象进行属性值读取,得到属性读取值,当属性读取值与属性预设值相同时,确定页面运行环境与基于目标语言的图像嵌入功能之间是兼容的;当属性读取值与属性预设值不相同时,确定页面运行环境与基于目标语言的图像嵌入功能之间是不兼容的。
例如目标语言为SVG时,设置待测试图像对象的src属性,将其赋值为一个包含简单SVG的data:image/svg+xml数据URI(Uniform Resource Identifier,统一资源标识符),然后再读取待测试图像对象的src属性值,得到一个读取值,若读取值与之前设置属性值相同,则说明当前页面运行环境支持data:image/svg+xml数据URI;如果不相同,说明不支持。其中src属性值用于设置图像对象的来源。
上述实施例中,终端通过获取待测试图像对象;在页面运行环境下启用图像嵌入功能,对待测试图像对象进行属性赋值,得到待测试图像对象基于目标语言的属性预设值;对待测试图像对象进行属性值读取,得到属性读取值;基于属性读取值与属性预设值之间的匹配关系,确定页面运行环境与基于目标语言的图像嵌入功能之间的兼容性,基于所确定的页面运行环境与基于目标语言的图像嵌入功能之间的兼容性可以选取与当前页面运行环境适配的截图方案,从而提高了截图的准确性。
在一个实施例中,上述页面截图方法还包括以下步骤:当页面运行环境与外部引用功能或图像嵌入功能中的至少一种兼容时,基于页面文件生成图像数据;将图像数据绘制到画布上,得到待截图页面的截图图像。
具体的,若当前的页面运行环境与外部引用功能或图像嵌入功能中的至少一种兼容时,也即是当前的页面运行环境支持外部引用功能或图像嵌入功能中的至少一种时,终端可以使用基于目标语言的页面文件创建一个图像对象,也即图像数据,并将该图像对象绘制到画布上,从而实现将页面文件的内容绘制到画布上,并将绘制有页面文件的内容的画布保存为图片文件,得到待截图页面的截图图像。
例如,针对基于SVG语言的页面文件,即SVG文件,使用SVG文件的内容创建一个Image对象或使用DataURL来表示SVG文件,然后将它绘制到Canvas上,将Canvas中的内容以DataURL的形式返回将这个DataURL保存为图片文件或将其用于显示,得到待截图页面的截图图像。
上述实施例中,终端在页面运行环境与外部引用功能或图像嵌入功能中的至少一种兼容时,基于页面文件生成图像数据;将图像数据绘制到画布上,得到待截图页面的截图图像,基于页面运行环境对一些功能的兼容性情况,选择合适的截图方案,从而提高了截图效率,并确保了截图准确性。
在一个实施例中,上述页面截图方法还包括以下步骤:通过外部引用功能将待截图页面中的外部资源嵌入至页面文件中,得到第一目标页面文件;或者,通过图像嵌入功能将待截图页面中的图像嵌入至页面文件中,得到第二目标页面文件;或者,通过外部引用功能和图像嵌入功能,将待截图页面中的外部资源和图像嵌入至页面文件中,得到第三目标页面文件;终端基于页面文件生成图像数据的过程包括以下步骤:基于第一目标页面文件、第二目标页面文件或第三目标页面文件生成图像数据。
具体的,若当前的页面运行环境与外部引用功能之间是兼容,则确定待截图页面中是否存在外部资源,若存在外部资源,则通过外部引用功能将待截图页面中的外部资源嵌入至页面文件中,得到包含所有相关资源的第一目标页面文件,从而可以提高页面的加载性能;若当前页面的运行环境与图像嵌入功能之间是兼容的,则确定待截图页面中是否存在图像,若存在,则图像嵌入功能将待截图页面中的图像嵌入至页面文件中,得到第二目标页面文件,第二目标页面文件中的图像已经被编码为数据URL,这样的页面文件更容易处理,因为它不依赖于外部图像文件的存在;若当前页面运行环境与外部引用功能和图像嵌入功能均兼容时,则定待截图页面中是否同时存在外部资源和图像,若存在,则通过外部引用功能和图像嵌入功能,将待截图页面中的外部资源和图像嵌入至页面文件中,得到第三目标页面文件,第三目标页面文件包含待截图页面中的全部资源,确保页面的完整性,无论在何种环境中打开,都不会出现资源丢失或加载问题;进而终端可以基于第一目标页面文件、第二目标页面文件或第三目标页面文件生成图像数据,并将图像数据绘制到画布上,得到待截图页面的截图图像。
上述实施例中,终端通过外部引用功能将待截图页面中的外部资源嵌入至页面文件中,得到第一目标页面文件;或者,通过图像嵌入功能将待截图页面中的图像嵌入至页面文件中,得到第二目标页面文件;或者,通过外部引用功能和图像嵌入功能,将待截图页面中的外部资源和图像嵌入至页面文件中,得到第三目标页面文件,实现了根据实际页面运行环境的兼容情况,对待截图页面进行不同的处理,以生成更加完整的页面文件,进而基于所生成的页面文件进行截图时,可以提高截图的准确性。
在一个实施例中,服务器基于页面文件对待截图页面进行截图的过程包括以下步骤:当接收到页面文件时,启用第三页面应用以创建空白页面;将页面文件中的页面数据渲染到空白页面中,得到目标页面;对目标页面进行截图,得到待截图页面的页面图像。
其中,第三页面应用可以是浏览器引擎或其他截图工具,具体可以是无头浏览器,比如通过Puppeteer控制的屋头浏览器,Puppeteer是一个Node.js库,用于控制无头Chrome或Chromium浏览器。空白页面是指没有任何内容或者仅包含最基本结构的网页;目标页面是与待截图页面内容相同的页面。
具体的,服务器在接收到基于目标语言的页面文件之后,启动第三页面应用,通过第三页面应用创建空白页面,并使用第三页面应用提供的方法,将页面文件中的页面数据加载到空白页面中,得到与待截图页面相同的目标页面,并使用三页面应用提供的截图功能对目标页面进行截图,得到待截图页面的页面图像。
上述实施例中,服务器通过接收基于目标语言的页面文件,并根据页面文件实现对待截图页面的截图,实现了在终端的页面运行环境与待截图页面不兼容时依然可以对待截图页面进行截图,提高了页面截图的准确性,并且避开了直接将截图页面发送给服务器进行截图时,可能存在的不安全因素,提高了页面截图时的数据安全性。
在一个实施例中,如图6所示,还提供了一种页面截图方法,以该方法应用于图1中的终端为例进行说明,包括以下步骤:
S602,响应于在待截图页面的截图操作,获取待截图页面的对象代理信息。
S604,基于对象代理信息确定待截图页面的页面运行环境。
其中,当页面运行环境为第一页面应用提供的运行环境时,执行步骤S606;当页面运行环境为第二页面应用提供的运行环境时,执行步骤S612。
S606,确定待截图页面中是否存在第一页面应用内置的截图功能无法截取的页面元素。
其中,当待截图页面中不存在第一页面应用内置的截图功能无法截取的页面元素时,执行步骤S608;当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素时,执行步骤S612。
S608,确定第一页面应用是否为目标页面应用。
其中,当确定第一页面应用不是目标页面应用时,执行步骤S610;当确定第一页面应用是目标页面应用时,执行步骤S612。
S610,通过目标库对待截图页面的文档对象模型树进行解析转换,得到适用于目标库的待渲染元素和渲染布局样式;按照渲染布局样式将待渲染元素绘制到画布上,得到待截图页面的截图图像。
S612,在当前的页面运行环境中基于待截图页面生成目标语言的页面文件。
S614,确定当前的页面运行环境是否支持基于目标语言的外部引用功能和图像嵌入功能。
其中,若当前的页面运行环境支持基于目标语言的外部引用功能、图像嵌入功能中的至少一个,则执行步骤S616;若当前的页面运行环境不支持基于目标语言的外部引用功能、图像嵌入功能,则执行步骤S618。
S616,基于页面文件生成图像数据;将图像数据绘制到画布上,得到待截图页面的截图图像。
S618,将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图。
具体的,服务器当接收到所述页面文件时,启用第三页面应用以创建空白页面;将所述页面文件中的页面数据渲染到所述空白页面中,得到目标页面;对所述目标页面进行截图,得到所述待截图页面的页面图像。
本申请还提供一种应用场景,该应用场景具体可以应用上述页面截图方法,参考图7,该方法具体包括以下步骤:
步骤1、进入对应服务页面。
其中,服务页面即为待截图页面。
具体的,终端响应于用户操作进入对应服务页面。
步骤2、终端判断。
具体的,进入对应服务页面之后,终端响应于用户触发的截图操作确定当前的页面运行环境,当前的页面运行环境可以是独立页面应用或者内置页面应用,独立页面应用也可以称为Web端,内置页面应用也可以称为客户端;若当前的页面运行环境为独立页面应用所提供的运行环境,执行步骤3;若当前的页面运行环境为内置页面应用所提供的运行环境,则执行步骤7。
其中,终端在确定当前的页面运行环境时,具体可以使用userAgent这个字段所对应的代码直接进行判断。
步骤3、解析待截图页面元素(结构样式)。
对待截图页面进行解析,待截图页面可以是基于HTML的页面,HTML代码主要包括HTML(结构)+CSS(样式)+JS业务逻辑,这里将代码解析为可以展示的页面元素。
步骤4、判断是否存在不支持的高级CSS特性。
确定解析出的页面元素中是否存在独立页面应用所提供的运行环境所不支持的高级CSS特性,若不存在,则执行步骤5;若存在,则执行步骤7。
具体判断过程可以通过以下方式实现:在页面内执行高级的CSS特性即可判断,执行成功即支持,执行失败即不支持,有返回值。高级的CSS特性包括background-blend-mode、background-clip:text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform。
步骤5、判断页面应用类别。
执行代码可以获取userAgent参数,userAgent里包含页面应用类别,若当前的独立页面应用为safari之外的其它独立页面应用,则执行步骤6;若当前的独立页面应用为safari,则执行步骤7。
步骤6、html2canvas截图。
采用html2canvas截图方案对待截图页面进行截图。
步骤7、解析待截图页面元素(结构样式)生成SVG代码。
其中,将HTML的待截图页面可以直接转换为基于SVG的页面文件,得到的基于SVG的页面文件中可以包含有foreignobject标签和data:image/svgxml。
步骤8、判断是否支持foreignobject和data:image/svgxml。
当前页面运行环境下执行foreignobject或data:image/svgxml就行,支持的话就会返回true并生效,不支持就不回生效。
如图8所示,若当前的页面运行环境支持foreignobject或data:image/svgxml,则采用客户端截图方案,执行步骤9;若前的页面运行环境不支持foreignobject和data:image/svgxml,则采用服务端截图方案,执行步骤10。
步骤9、DOM-to-image截图。
步骤10、服务端接收SVG,使用puppeteer进行服务端截图。
具体的,在服务端使用puppeteer拉起一个浏览器,并将SVG内容渲染到拉起的chrome浏览器里的网页内容上,并对其进行截图。
此外,参考图9,DOM-to-image截图的过程包括以下步骤:
步骤d1、递归克隆、处理DOM节点。
基于HTML的待截图页面是以树状的DOM元素构成,多个的DOM元素组成待截图页面,要将待截图页面的至少一部分区域生成海报,就需要将这一区域的DOM进行处理,因为不可能直接处理显示的源内容,所以需要克隆复制一份到内存中来处理。
步骤d2、将DOM转化为SVG。
将所提取的DOM元素转换为SVG元素。
步骤d3、将SVG处理成图片放置在Canvas。
将SVG元素处理成图片放置在Canvas上,Canvas画布可以读取SVG内容作为信息,从而显示。
步骤d4:将Canvas转化为图片。
将显示有SVG内容的Canvas画布转化为图片,得到截图图像。
此外,参考图10,html2canvas截图的过程包括以下步骤:
步骤h1、调用html2canvas:调用这个html2canvas库;步骤h2、构建默认配置:指的是配置信息的初始化;步骤h3、调用documentCloner:克隆DOM树结构;步骤h4、调用parseTree:解析DOM树;步骤h5、New CanvasRenderder:构建画布;步骤h6、render方法:将内容渲染到画布上。
如图11所示的待截图页面,根据文字提示内容“长按图片可以保存分享”,用户通过长按待截图页面,可以触发步骤2进入截图流程,通过执行步骤2至10,从而实现对待截图页面的截图,得到图12所示的截图图像。
应该理解的是,虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思,本申请实施例还提供了一种用于实现上述所涉及的页面截图方法的页面截图装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似,故下面所提供的一个或多个页面截图装置实施例中的具体限定可以参见上文中对于页面截图方法的限定,在此不再赘述。
在一个实施例中,如图13所示,提供了一种页面截图装置,包括:对象代理信息获取模块1302、页面运行环境确定模块1304、页面文件生成模块1306和文件发送模块1308,其中:
对象代理信息获取模块1302,用于响应于在待截图页面的截图操作,获取待截图页面的对象代理信息;
页面运行环境确定模块1304,用于基于对象代理信息确定待截图页面的页面运行环境;
页面文件生成模块1306,用于在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用时,在页面运行环境中基于待截图页面生成目标语言的页面文件;
文件发送模块1308,用于将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图。
上述实施例中,在待截图页面的截图操作,获取待截图页面的对象代理信息,基于对象代理信息确定待截图页面的页面运行环境,以便后续基于页面运行环境选取恰当的截图方案,从而提高截图的准确性;在页面运行环境为第一页面应用提供的运行环境的情况下,当待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素,或第一页面应用为目标页面应用,确定出待截图页面与页面运行环境的兼容情况,在某些功能不兼容时,可以在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,以使服务器基于页面文件对待截图页面进行截图,从而实现对待截图页面的完整截图,提高了页面截图的准确性;同时,通过在页面运行环境中基于待截图页面生成目标语言的页面文件,将页面文件发送至服务器,避开了直接将截图页面发送给服务器进行截图时,可能存在的不安全因素,提高了页面截图时的数据安全性。
在一个实施例中,如图14所示,装置还包括:截图测试模块1310,用于:对待截图页面进行解析,得到待截图页面中的页面元素和页面元素的样式信息;基于页面元素的样式信息从页面元素中选取应用了待测试样式的候选页面元素;通过第一页面应用内置的截图功能对候选页面元素进行截图测试,得到截图测试结果;
页面文件生成模块1306,还用于:当截图测试结果表征待截图页面中存在第一页面应用内置的截图功能无法截取的页面元素时,在页面运行环境中基于待截图页面生成目标语言的页面文件。
在一个实施例中,页面元素包括文本元素和图像元素;页面文件生成模块1306,还用于:在页面运行环境中,将文本元素转换为目标语言的目标文本元素,将图像元素转换为目标语言的目标图像元素,以及基于样式信息生成基于目标语言的目标样式信息,得到包含目标文本元素、目标图像元素和目标样式信息的页面文件。
在一个实施例中,如图14所示,装置还包括:截图模块1312,用于:当待截图页面中不存在第一页面应用内置的截图功能无法截取的页面元素、且第一页面应用不是目标页面应用时,通过目标库对待截图页面的文档对象模型树进行解析转换,得到适用于目标库的待渲染元素和渲染布局样式;按照渲染布局样式将待渲染元素绘制到画布上,得到待截图页面的截图图像。
在一个实施例中,页面文件生成模块1306,还用于:在页面运行环境为第二页面应用提供的运行环境的情况下,在页面运行环境中基于待截图页面生成目标语言的页面文件。
在一个实施例中,如图14所示,装置还包括:兼容性检测模块1314,用于:检测页面运行环境与基于目标语言的外部引用功能之间的兼容性,以及检测页面运行环境与基于目标语言的图像嵌入功能之间的兼容性;文件发送模块1308,还用于:当页面运行环境与外部引用功能、图像嵌入功能不兼容时,将页面文件发送至服务器。
在一个实施例中,兼容性检测模块1314,还用于:获取待测试外部元素和基于目标语言的初始元素;在页面运行环境下,启用外部引用功能将待测试外部元素添加到初始元素,得到目标测试元素;基于目标测试元素确定页面运行环境与基于目标语言的外部引用功能之间的兼容性。
在一个实施例中,兼容性检测模块1314,还用于:获取待测试图像对象;在页面运行环境下启用图像嵌入功能,对待测试图像对象进行属性赋值,得到待测试图像对象基于目标语言的属性预设值;对待测试图像对象进行属性值读取,得到属性读取值;基于属性读取值与属性预设值之间的匹配关系,确定页面运行环境与基于目标语言的图像嵌入功能之间的兼容性。
在一个实施例中,截图模块1312,还用于:当页面运行环境与外部引用功能或图像嵌入功能中的至少一种兼容时,基于页面文件生成图像数据;将图像数据绘制到画布上,得到待截图页面的截图图像。
在一个实施例中,页面文件生成模块1306,还用于:通过外部引用功能将待截图页面中的外部资源嵌入至页面文件中,得到第一目标页面文件;或者,通过图像嵌入功能将待截图页面中的图像嵌入至页面文件中,得到第二目标页面文件;或者,通过外部引用功能和图像嵌入功能,将待截图页面中的外部资源和图像嵌入至页面文件中,得到第三目标页面文件;截图模块1312,用于:基于第一目标页面文件、第二目标页面文件或第三目标页面文件生成图像数据。
在一个实施例中,截图模块1312还用于:当接收到页面文件时,启用第三页面应用以创建空白页面;将页面文件中的页面数据渲染到空白页面中,得到目标页面;对目标页面进行截图,得到待截图页面的页面图像。
上述页面截图装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中,提供了一种计算机设备,该计算机设备可以是终端,其内部结构图可以如图15所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中,处理器、存储器和输入/输出接口通过系统总线连接,通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信,无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面截图方法。该计算机设备的显示单元用于形成视觉可见的画面,可以是显示屏、投影装置或虚拟现实成像装置,显示屏可以是液晶显示屏或电子墨水显示屏,该计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图15中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,还提供了一种计算机设备,包括存储器和处理器,存储器中存储有计算机程序,该处理器执行计算机程序时实现上述各方法实施例中的步骤。
在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
在一个实施例中,提供了一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
需要说明的是,本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等),均为经用户授权或者经过各方充分授权的信息和数据,且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory,ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory,MRAM)、铁电存储器(Ferroelectric Random Access Memory,FRAM)、相变存储器(Phase Change Memory,PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory,RAM)或外部高速缓冲存储器等。作为说明而非局限,RAM可以是多种形式,比如静态随机存取存储器(Static Random AccessMemory,SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory,DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等,不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等,不限于此。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面截图方法,其特征在于,所述方法包括:
响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
基于所述对象代理信息确定所述待截图页面的页面运行环境;
在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;所述目标语言是与所述待截图页面所使用语言不同的语言;
将所述页面文件发送至服务器,以使所述服务器在接收到所述页面文件时,启用第三页面应用以创建空白页面;将所述页面文件中的页面数据渲染到所述空白页面中,得到目标页面;对所述目标页面进行截图,得到所述待截图页面的页面图像;
所述方法还包括:
对所述待截图页面进行解析,得到所述待截图页面中的页面元素和所述页面元素的样式信息;
基于所述页面元素的样式信息从所述页面元素中选取应用了待测试样式的候选页面元素;
通过所述第一页面应用内置的截图功能对所述候选页面元素进行截图测试,得到截图测试结果;
所述在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件,包括:
当所述截图测试结果表征所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
所述方法还包括:
当所述待截图页面中不存在所述第一页面应用内置的截图功能无法截取的页面元素、且所述第一页面应用不是所述目标页面应用时,通过目标库对所述待截图页面的文档对象模型树进行解析转换,得到适用于所述目标库的待渲染元素和渲染布局样式;
按照所述渲染布局样式将所述待渲染元素绘制到画布上,得到所述待截图页面的截图图像;
所述方法还包括:
检测所述页面运行环境与基于所述目标语言的外部引用功能之间的兼容性,以及检测所述页面运行环境与基于所述目标语言的图像嵌入功能之间的兼容性;
所述将所述页面文件发送至服务器,包括:
当所述页面运行环境与所述外部引用功能、所述图像嵌入功能不兼容时,将所述页面文件发送至服务器;
所述检测所述页面运行环境与基于所述目标语言的外部引用功能之间的兼容性,包括:
获取待测试外部元素和基于所述目标语言的初始元素;
在所述页面运行环境下,启用所述外部引用功能将所述待测试外部元素添加到所述初始元素,得到目标测试元素;
基于所述目标测试元素确定所述页面运行环境与基于所述目标语言的外部引用功能之间的兼容性;
所述检测所述页面运行环境与基于所述目标语言的图像嵌入功能之间的兼容性,包括:
获取待测试图像对象;
在所述页面运行环境下启用图像嵌入功能,对所述待测试图像对象进行属性赋值,得到所述待测试图像对象基于所述目标语言的属性预设值;
对所述待测试图像对象进行属性值读取,得到属性读取值;
基于所述属性读取值与所述属性预设值之间的匹配关系,确定所述页面运行环境与基于所述目标语言的图像嵌入功能之间的兼容性;
所述方法还包括:
当所述页面运行环境与所述外部引用功能或所述图像嵌入功能中的至少一种兼容时,基于所述页面文件生成图像数据;
将所述图像数据绘制到画布上,得到所述待截图页面的截图图像;
所述方法还包括:
通过所述外部引用功能将所述待截图页面中的外部资源嵌入至所述页面文件中,得到第一目标页面文件;或者,
通过所述图像嵌入功能将所述待截图页面中的图像嵌入至所述页面文件中,得到第二目标页面文件;或者,
通过所述外部引用功能和所述图像嵌入功能,将所述待截图页面中的外部资源和图像嵌入至所述页面文件中,得到第三目标页面文件;
所述基于所述页面文件生成图像数据,包括:
基于所述第一目标页面文件、所述第二目标页面文件或所述第三目标页面文件生成图像数据。
2.根据权利要求1所述的方法,其特征在于,所述页面元素包括文本元素和图像元素;所述在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件,包括:
在所述页面运行环境中,将所述文本元素转换为所述目标语言的目标文本元素,将所述图像元素转换为所述目标语言的目标图像元素,以及基于所述样式信息生成基于所述目标语言的目标样式信息,得到包含所述目标文本元素、所述目标图像元素和所述目标样式信息的页面文件。
3.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在所述页面运行环境为第二页面应用提供的运行环境的情况下,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件。
4.根据权利要求1至3中任一项所述的方法,其特征在于,所述待截图页面是HTML页面,所述目标语言是SVG语言。
5.一种页面截图装置,其特征在于,所述装置包括:
对象代理信息获取模块,用于响应于在待截图页面的截图操作,获取所述待截图页面的对象代理信息;
页面运行环境确定模块,用于基于所述对象代理信息确定所述待截图页面的页面运行环境;
页面文件生成模块,用于在所述页面运行环境为第一页面应用提供的运行环境的情况下,当所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素,或所述第一页面应用为目标页面应用时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;所述目标语言是与所述待截图页面所使用语言不同的语言;
文件发送模块,用于将所述页面文件发送至服务器;
截图模块,用于所述服务器在接收到所述页面文件时,启用第三页面应用以创建空白页面;将所述页面文件中的页面数据渲染到所述空白页面中,得到目标页面;对所述目标页面进行截图,得到所述待截图页面的页面图像;
所述装置还包括截图测试模块,用于:
对所述待截图页面进行解析,得到所述待截图页面中的页面元素和所述页面元素的样式信息;
基于所述页面元素的样式信息从所述页面元素中选取应用了待测试样式的候选页面元素;
通过所述第一页面应用内置的截图功能对所述候选页面元素进行截图测试,得到截图测试结果;
所述页面文件生成模块还用于:
当所述截图测试结果表征所述待截图页面中存在所述第一页面应用内置的截图功能无法截取的页面元素时,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件;
所述截图模块还用于:
当所述待截图页面中不存在所述第一页面应用内置的截图功能无法截取的页面元素、且所述第一页面应用不是所述目标页面应用时,通过目标库对所述待截图页面的文档对象模型树进行解析转换,得到适用于所述目标库的待渲染元素和渲染布局样式;
按照所述渲染布局样式将所述待渲染元素绘制到画布上,得到所述待截图页面的截图图像;
所述装置还包括兼容性检测模块,用于:
检测所述页面运行环境与基于所述目标语言的外部引用功能之间的兼容性,以及检测所述页面运行环境与基于所述目标语言的图像嵌入功能之间的兼容性;
所述文件发送模块还用于:
当所述页面运行环境与所述外部引用功能、所述图像嵌入功能不兼容时,将所述页面文件发送至服务器;
所述兼容性检测模块,还用于:
获取待测试外部元素和基于所述目标语言的初始元素;
在所述页面运行环境下,启用所述外部引用功能将所述待测试外部元素添加到所述初始元素,得到目标测试元素;
基于所述目标测试元素确定所述页面运行环境与基于所述目标语言的外部引用功能之间的兼容性;
所述兼容性检测模块,还用于:
获取待测试图像对象;
在所述页面运行环境下启用图像嵌入功能,对所述待测试图像对象进行属性赋值,得到所述待测试图像对象基于所述目标语言的属性预设值;
对所述待测试图像对象进行属性值读取,得到属性读取值;
基于所述属性读取值与所述属性预设值之间的匹配关系,确定所述页面运行环境与基于所述目标语言的图像嵌入功能之间的兼容性;
所述截图模块还用于:
当所述页面运行环境与所述外部引用功能或所述图像嵌入功能中的至少一种兼容时,基于所述页面文件生成图像数据;
将所述图像数据绘制到画布上,得到所述待截图页面的截图图像;
所述页面文件生成模块,还用于:
通过所述外部引用功能将所述待截图页面中的外部资源嵌入至所述页面文件中,得到第一目标页面文件;或者,
通过所述图像嵌入功能将所述待截图页面中的图像嵌入至所述页面文件中,得到第二目标页面文件;或者,
通过所述外部引用功能和所述图像嵌入功能,将所述待截图页面中的外部资源和图像嵌入至所述页面文件中,得到第三目标页面文件;
所述截图模块还用于:
基于所述第一目标页面文件、所述第二目标页面文件或所述第三目标页面文件生成图像数据。
6.根据权利要求5所述的装置,其特征在于,所述页面元素包括文本元素和图像元素;所述页面文件生成模块还用于:
在所述页面运行环境中,将所述文本元素转换为所述目标语言的目标文本元素,将所述图像元素转换为所述目标语言的目标图像元素,以及基于所述样式信息生成基于所述目标语言的目标样式信息,得到包含所述目标文本元素、所述目标图像元素和所述目标样式信息的页面文件。
7.根据权利要求5所述的装置,其特征在于,所述页面文件生成模块还用于:
在所述页面运行环境为第二页面应用提供的运行环境的情况下,在所述页面运行环境中基于所述待截图页面生成目标语言的页面文件。
8.根据权利要求5至7中任一项所述的装置,其特征在于,所述待截图页面是HTML页面,所述目标语言是SVG语言。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至4中任一项所述的方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至4中任一项所述的方法的步骤。
CN202311355962.4A 2023-10-19 2023-10-19 页面截图方法、装置、计算机设备和存储介质 Active CN117093386B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311355962.4A CN117093386B (zh) 2023-10-19 2023-10-19 页面截图方法、装置、计算机设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311355962.4A CN117093386B (zh) 2023-10-19 2023-10-19 页面截图方法、装置、计算机设备和存储介质

Publications (2)

Publication Number Publication Date
CN117093386A CN117093386A (zh) 2023-11-21
CN117093386B true CN117093386B (zh) 2024-02-09

Family

ID=88770187

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311355962.4A Active CN117093386B (zh) 2023-10-19 2023-10-19 页面截图方法、装置、计算机设备和存储介质

Country Status (1)

Country Link
CN (1) CN117093386B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109195021A (zh) * 2018-07-12 2019-01-11 北京猫眼文化传媒有限公司 截图分享方法和装置
CN110244896A (zh) * 2019-06-24 2019-09-17 北京向上一心科技有限公司 网页内截图方法、装置、控制器及存储介质
CN113382083A (zh) * 2021-06-30 2021-09-10 建信金融科技有限责任公司 一种网页截图方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109195021A (zh) * 2018-07-12 2019-01-11 北京猫眼文化传媒有限公司 截图分享方法和装置
CN110244896A (zh) * 2019-06-24 2019-09-17 北京向上一心科技有限公司 网页内截图方法、装置、控制器及存储介质
CN113382083A (zh) * 2021-06-30 2021-09-10 建信金融科技有限责任公司 一种网页截图方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
"基于HTML5的响应式Web页面重组适配技术研究";蒋凌燕等;《计算机与现代化》;20150215(第02期);第10-13页 *

Also Published As

Publication number Publication date
CN117093386A (zh) 2023-11-21

Similar Documents

Publication Publication Date Title
CN110235122B (zh) 用于将web内容转化为可重复使用的模板和组件的系统和方法
US9507480B1 (en) Interface optimization application
CN105955888B (zh) 一种页面调试预览方法及系统
US10542123B2 (en) System and method for generating and monitoring feedback of a published webpage as implemented on a remote client
US20130326333A1 (en) Mobile Content Management System
KR101494844B1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
JP5930497B2 (ja) テンプレートファイルの処理方法及び装置
US8645823B1 (en) Converting static websites to resolution independent websites in a web development environment
JP2010532513A (ja) データシステム及び方法
US9053199B2 (en) Uniquely identifying script files by appending a unique identifier to a URL
US20150227276A1 (en) Method and system for providing an interactive user guide on a webpage
US9881002B1 (en) Content localization
US8671389B1 (en) Web application resource manager on the web and localizable components
US20160259630A1 (en) Systems, apparatus and methods for sharing visual model-based applications
CN112256990B (zh) 一种图像处理方法及装置、计算机可读存储介质
CN104050238A (zh) 一种地图标注方法和装置
CN103092941A (zh) 在电子设备上呈现内容的方法和装置
JP2014524623A5 (zh)
JP2021512415A (ja) デジタルコンポーネントのバックドロップレンダリング
CA2983248C (en) Rendering graphical assets natively on multiple screens of electronic devices
CN110365776B (zh) 图片批量下载方法、装置、电子设备及存储介质
US10198408B1 (en) System and method for converting and importing web site content
CN114756228A (zh) 页面处理方法、装置、设备及存储介质
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
CN114168875A (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
GR01 Patent grant
GR01 Patent grant