CN115809387A - 基于svg的网页元素截图实现方法 - Google Patents
基于svg的网页元素截图实现方法 Download PDFInfo
- Publication number
- CN115809387A CN115809387A CN202211509107.XA CN202211509107A CN115809387A CN 115809387 A CN115809387 A CN 115809387A CN 202211509107 A CN202211509107 A CN 202211509107A CN 115809387 A CN115809387 A CN 115809387A
- Authority
- CN
- China
- Prior art keywords
- elements
- dom tree
- screenshot
- picture
- canvas
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 11
- 230000000694 effects Effects 0.000 claims abstract description 5
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
Images
Abstract
本发明公开了一种基于SVG的网页元素截图实现方法，包括：遍历需要截取的元素及其子元素，作为行内样式直接写入对应元素；通过SVG重写整个DOM树；添加边框，展现一屏的效果；等比例缩放DOM树；创建一个新的img元素，通过Data URL和之前重写的DOM树给其src赋值；通过canvas重绘DOM树；遍历之前记录的外部引用图片，通过canvas重绘图片，使其还原到原本的位置；等待全部元素绘制完成后通过canvas生成二进制数据；调用接口发送二进制数据，返回截图对应的url；本发明解决了运营在手动截取组件时截取风格不统一、无法截取长图、操作繁琐等问题。
Description
技术领域
本发明涉及计算机软件技术领域，特别是一种基于SVG的网页元素截图实现方法。
背景技术
运营管理平台是运营用于管理下发给电视终端数据的平台，其中的launcher系统则管理电视终端直接展示的内容。在launcher系统中，运营会事先配置好内容，再将内容填充到组件，多个组件组成一个板块，最后审核、发布，这样电视上展示的内容就会随之更新。
在运营日常使用时，自定义组件由于其灵活性成为最常用的组件，而为了方便预览，运营每次创建自定义组件时需要手动截图并上传图片，而手动截图存在以下缺陷：
1、每个运营截图的格式有所差异，例如把展示的按钮也截了进去或者没截空白处，无法展示一屏的效果；
2、当出现滚动条时，无法截取整个长图；
3、手动截图操作繁琐。
发明内容
为解决现有技术中存在的问题，本发明的目的是提供一种基于SVG的网页元素截图实现方法，本发明解决了运营在手动截取组件时截取风格不统一、无法截取长图、操作繁琐等问题。
为实现上述目的，本发明采用的技术方案是：一种基于SVG的网页元素截图实现方法，包括以下步骤：
(1)遍历需要截取的元素及其子元素，获取其样式，并作为行内样式直接写入对应元素；
(2)对于img标签，如果图片源是外部引用，记录其尺寸、位置和路径src，并清空其src；
(3)通过SVG重写整个DOM树；
(4)添加边框，展现一屏的效果；
(5)根据用户设置的截图尺寸，等比例缩放DOM树；
(6)创建一个新的img元素，通过Data URL和之前重写的DOM树给其src赋值；
(7)通过canvas重绘DOM树；
(8)遍历之前记录的外部引用图片，依次创建新的img元素并设置其尺寸、位置和src，通过canvas重绘图片，使其还原到原本的位置；
(9)等待全部元素绘制完成后通过canvas生成二进制数据；
(10)调用接口发送二进制数据，返回截图对应的url。
本发明的有益效果是：
1、本发明统一了截图的风格，避免了预览图不规范的情况；对于超过一屏的自定义组件也能完整截取，同时增加了边框，方便运营看到一屏的边界；省去了手动截图、上传的过程，提高了运营的配属效率。
2、本发明不依赖其他库，仅基于SVG标准和HTML标准，兼容性高；对于外部引用的图片也能保存；可以手动设置截图的尺寸并等比例缩放图片。
附图说明
图1为本发明实施例的流程框图。
具体实施方式
下面结合附图对本发明的实施例进行详细说明。
实施例
如图1所示，一种基于SVG的网页元素截图实现方法，实现步骤如下：
(1)遍历需要截取的元素及其子元素，获取其样式，并作为行内样式直接写入对应元素。
(2)对于img标签，如果图片源是外部引用，记录其尺寸、位置和src，并清空其src。
(3)通过SVG重写整个DOM树。
(4)添加边框，展现一屏的效果。
(5)根据用户设置的截图尺寸，等比例缩放DOM树。
(6)创建一个新的img元素，通过Data URL和之前重写的DOM树给其src赋值。
(7)通过canvas重绘DOM树。
(8)遍历之前记录的外部引用图片，依次创建新的img元素并设置其尺寸、位置和src，通过canvas重绘图片，使其还原到原本的位置。
(9)等待全部元素绘制完成后通过canvas生成二进制数据。
(10)调用接口发送二进制数据，返回截图对应的url。
以上所述实施例仅表达了本发明的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。
Claims (1)
1.一种基于SVG的网页元素截图实现方法，其特征在于，包括以下步骤：
(1)遍历需要截取的元素及其子元素，获取其样式，并作为行内样式直接写入对应元素；
(2)对于img标签，如果图片源是外部引用，记录其尺寸、位置和路径src，并清空其src；
(3)通过SVG重写整个DOM树；
(4)添加边框，展现一屏的效果；
(5)根据用户设置的截图尺寸，等比例缩放DOM树；
(6)创建一个新的img元素，通过Data URL和之前重写的DOM树给其src赋值；
(7)通过canvas重绘DOM树；
(8)遍历之前记录的外部引用图片，依次创建新的img元素并设置其尺寸、位置和src，通过canvas重绘图片，使其还原到原本的位置；
(9)等待全部元素绘制完成后通过canvas生成二进制数据；
(10)调用接口发送二进制数据，返回截图对应的url。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211509107.XA CN115809387A (zh) | 2022-11-29 | 2022-11-29 | 基于svg的网页元素截图实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211509107.XA CN115809387A (zh) | 2022-11-29 | 2022-11-29 | 基于svg的网页元素截图实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115809387A true CN115809387A (zh) | 2023-03-17 |
Family
ID=85484569
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211509107.XA Pending CN115809387A (zh) | 2022-11-29 | 2022-11-29 | 基于svg的网页元素截图实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115809387A (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8286076B1 (en) * | 2011-06-22 | 2012-10-09 | Google Inc. | Rendering approximate webpage screenshot client-side |
| US20140047413A1 (en) * | 2012-08-09 | 2014-02-13 | Modit, Inc. | Developing, Modifying, and Using Applications |
| US20170116162A1 (en) * | 2004-06-25 | 2017-04-27 | Apple Inc. | Procedurally expressing graphic objects for web pages |
| CN107766359A (zh) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | 一种将页面内容转换为图片的方法、装置以及计算设备 |
| CN107885848A (zh) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | 基于web技术的网页截屏方法 |
| CN111694493A (zh) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | 一种网页截图方法、计算机设备及可读存储介质 |
| CN112784202A (zh) * | 2021-02-03 | 2021-05-11 | 中国电子科技集团公司第二十八研究所 | 一种基于web技术的提高网页截图清晰度的方法 |
| CN114692034A (zh) * | 2020-12-30 | 2022-07-01 | 北京国双科技有限公司 | 图像显示方法、装置、电子设备及计算机存储介质 |
-
2022
- 2022-11-29 CN CN202211509107.XA patent/CN115809387A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170116162A1 (en) * | 2004-06-25 | 2017-04-27 | Apple Inc. | Procedurally expressing graphic objects for web pages |
| US8286076B1 (en) * | 2011-06-22 | 2012-10-09 | Google Inc. | Rendering approximate webpage screenshot client-side |
| US20140047413A1 (en) * | 2012-08-09 | 2014-02-13 | Modit, Inc. | Developing, Modifying, and Using Applications |
| CN107766359A (zh) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | 一种将页面内容转换为图片的方法、装置以及计算设备 |
| CN107885848A (zh) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | 基于web技术的网页截屏方法 |
| CN111694493A (zh) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | 一种网页截图方法、计算机设备及可读存储介质 |
| CN114692034A (zh) * | 2020-12-30 | 2022-07-01 | 北京国双科技有限公司 | 图像显示方法、装置、电子设备及计算机存储介质 |
| CN112784202A (zh) * | 2021-02-03 | 2021-05-11 | 中国电子科技集团公司第二十八研究所 | 一种基于web技术的提高网页截图清晰度的方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107832108B (zh) | 3D canvas网页元素的渲染方法、装置及电子设备 | |
| CN107885848B (zh) | 基于web技术的网页截屏方法 | |
| US10210144B2 (en) | Creation and display of a webpage with alternative layouts for different webpage widths | |
| KR101130484B1 (ko) | 형상들을 사용하는 공통 차팅 | |
| CN111651966A (zh) | 数据报告文件生成方法、装置与电子设备 | |
| CN111951356B (zh) | 基于json数据格式的动画渲染方法 | |
| CN110633436A (zh) | 可视化、自定义全景编辑方法、系统、存储介质及设备 | |
| CN111399831A (zh) | 页面的展示方法和装置、存储介质、电子装置 | |
| CN111176643A (zh) | 子系统首页的生成方法及计算机可读存储介质 | |
| US9501812B2 (en) | Map performance by dynamically reducing map detail | |
| CN108875085B (zh) | 混合应用的图片处理方法、装置、计算机设备及存储介质 | |
| JP5303534B2 (ja) | 体裁情報処理装置及び方法 | |
| CN115809387A (zh) | 基于svg的网页元素截图实现方法 | |
| CN112954030A (zh) | 一种Web端图片压缩方法、装置及电子设备 | |
| CN111915705B (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| CN112307385A (zh) | 网页数据加载和处理方法、装置、电子设备及存储介质 | |
| CN108153845B (zh) | 一种实现后台图像数据导出的方法及装置 | |
| CN116578795A (zh) | 网页页面的生成方法及装置、存储介质、电子设备 | |
| CN115586941A (zh) | 一种移动端rn页面录屏回放的方法及装置 | |
| CN114866801B (zh) | 视频数据的处理方法、装置、设备及计算机可读存储介质 | |
| CN113691835B (zh) | 视频植入方法、装置、设备及计算机可读存储介质 | |
| CN109714624B (zh) | 一种基于QTextEdit的直播弹幕的显示方法及系统 | |
| CN111881648A (zh) | 一种生成电子书字体文件的方法 | |
| CN110825390A (zh) | 可视化大屏项目快速部署 | |
| CN112995711B (zh) | 一种web前端视频的分帧与图片处理合成方法及系统 |
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 |