前端如何实现一键截图功能?

徐小夕 等级 519 0 0

前端如何实现一键截图功能?

前言

网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如H5页面中, 植入更多信息收集, 交互能力. 这一块的应用探索, 页面截图是一个非常好的解决方案.

接下来笔者就来复盘一下如何基于网页, 一键生成页面海报的功能, 并将此能力, 集成到笔者的开源项目H5-Dooring中为编辑器赋能.

正文

在实现具体功能之前, 我们先看看具体的实现效果: 前端如何实现一键截图功能? 从演示中我们可以看出, 我们最终目标是实现在PC端生成H5页面的截图, 所以可能会涉及到以下几个问题:

  • 如何实现将页面转化为图片
  • 如何实现H5效果模拟并截取实际的H5页面

我们可以先来想想实现思路, 如何能基于dom转化为图片? 这块技术也是老生常谈的课题了, 我们都知道可以用canvas来实现, 大致流程如下: 前端如何实现一键截图功能? 我们如果用原生的实现方案, 大致要经历以上几个步骤, 其中第二步是关键环节也是最复杂的一步, 我们需要手动实现dom到canvas的映射, 最后转化为标准的canvas绘图对象. 当然现成也有很多库可以直接帮我们简化这一步骤, 比如html2canvas, dom-to-image. 接下来我们就来解决第一个问题.

如何实现将页面转化为图片

在亲自调研了html2canvas库并使用的过程中, 笔者发现了很多问题, 比如如果样式中出现%单位, 或者有一些图片背景的问题, 导致html2canvas并没有很好的work, 而且渲染还原度和清晰度都有问题, 所以笔者暂时没有深入研究(不过这些问题可以通过修改库本身解决), 后面笔者直接用了dom-to-image, 发现使用起来很简单, 而且几乎不会出现上面说的这些问题, 所以笔者果断采用了dom-to-image, 后面看了该库的源码, 感觉写的也很优雅易懂, 后期做二次开发应该问题不是很大. 我们可以看看其官网的基本使用:

// 引入
import domtoimage from 'dom-to-image';

// 生成图片
domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

用法也很简单, 而且它提供了足够多的配置项, 我们可以灵活配置. 前端如何实现一键截图功能?

第一个问题就这么解决了, 不过在使用过程中发现图片模糊的问题, 这块网上也有很多解决方案. 比如先放大dom, 在处理成canvas最后生成图片的时候在缩小等, 这块笔者就不一一举例了.

如何实现H5效果模拟并截取实际的H5页面

因为我们设计的H5页面都在pc端完成的, 所以要想生成H5预览图, 无非是本地模拟尺寸, 进行渲染, 具体方案如下:

  • 采用iframe作为H5页面容器去生成截图
  • 直接限制宽度在当前页面生成截图
  • 采用服务端爬虫一键模拟手机访问生成截图

上面说的方案都可以尝试, 第三种方案笔者之前也开源过爬虫应用来解决这个问题, 感兴趣的可以研究了解以下, 我们很明显会选择第一种方案来实现, 就如演示中的, 我们看到的弹窗中的H5其实是在iframe中渲染的: 前端如何实现一键截图功能? 实现思路有了, 该问题也就很好实现了, 我们只需要在父页面和iframe实现消息通信即可, 比如在iframe加载完成之后手动通知iframe截取自身. 基本实现代码如下:

// 编辑器页面, 也就是父页面
// 定义截图子页面句柄函数
window.getFaceUrl = (url) => {
  setFaceUrl(url)
  setShowModalIframe(false)
}

// iframe页面, 也就是预览页面
const generateImg = (cb:any) => {
    domtoimage.toBlob(refImgDom.current, 
      {
        width,
        height,
      }
    )
    .then(function (blob:Blob) {
        const formData = new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/upload/free', formData).then((res:any) => {
          cb && cb(res.url)
        })
    })
    .catch(function (error:any) {
        console.error('oops, something went wrong!', error);
    });
}

// 触发父页面的方法,将图片传给父页面
generateImg((url:string) => {
  parent.window.getFaceUrl(url);
})

最后

以上教程笔者已经集成到H5-Dooring中,对于一些更复杂的交互功能,通过合理的设计也是可以实现的,大家可以自行探索研究。

github地址:H5编辑器H5-Dooring

如果想学习更多H5游戏, webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
前端如何实现一键截图功能?
前言 网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的
Android WebView加载优化
1.前言 最近几年关于原生WebView与H5混合开发的项目越来越多,这种开发带来了很多便利,但也会有一些缺点,比如说通过WebView加载H5会有一定的卡顿现象,会影响用户体验。下面本文就此问题一一展开讨论。 2. 场景 根据日常需求一般是通过webView.loadUrl()方法加载指定的网页,其大概流程如下: (https://i
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
看了10款文档编辑器之后, 我决定...
作为一名技术工作者, 我们经常会遇到编写技术文档, 技术分享等需求, 网上也有很多现成的文档管理工具, 出于好奇心, 我拉着朋友一起实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— powerNice(http://h5.dooring.cn/powernice). powerNice(http://h5.door
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
Chrome 中 Set-Cookie SameSite 问题
关于 “Chrome 修改对未设置 SameSite 的 cookie,视作 SameSite:Lax 处理的变更” 的问题,目前看,最妥善的解决方案还是按照规矩办事儿,目前 Chrome 是行动最快的,而 FireFox 和 Edge 也在积极跟进,持支持态度。 影响范围: 如果你的项目中有如下跨域场景: 1. 跨域的 ajax
JarvisOJ——Web-wp
写在前面 这几天 BUU 平台机房出故障了,回来把 JarvisOJ 平台已经做过的和剩下的 web 全部写一遍 wp 吧,很怀念大一那时候跟鹏神晚上通宵干题的时光,一转眼都过了一年了 PORT51需要用公网的一台服务器访问其 51 端口curl localport 51 http://web.jarvisoj.com:32770/ LOCALHOST添加
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术