标签：截图 网页 自定义 标签 导出 svg 页面 图片

分享一个轻量的前端网页可自定义区域样式的截图实现方案，原生js实现。

一、没有废话：项目demo地址。

二、实现原理：

1. 将页面需要导出的dom元素克隆，执行XML序列化后塞入svg的foreignObject标签；（通过svg的foreignObject标签可以在svg中渲染出html页面内容）
2. 将svg标签作为字符串与'data:image/svg+xml;charset=utf-8,'拼接，得到base64形式的svg图片，把这个字符串作为一个img标签的src；
3. 将这个img标签渲染到canvas上，通过canvas的toDataURL把base64形式的svg图片转为base64形式的png图片，最后通过a标签下载下来

三、demo介绍：

有四个测试场景，分别测试了基本页面元素、svg、图片、canvas等导出为图片是否与浏览器页面展示一致以及自定义修改截图内容。

最后一个测试场景下载全部，是将三个测试场景放在一起进行的一个截图测试，其中导出的图片里隐藏了每个测试场景的下载按钮。

• 页面展示：

•  导出的图片：

标签：截图,网页,自定义,标签,导出,svg,页面,图片
来源： https://www.cnblogs.com/257248gzh/p/16533426.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。