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

徐小夕 等级 830 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数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

前端如何实现一键截图功能?
前言 网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
.html 的文件如何使用 php
### 应用场景 有一个待开发的 H5,客户部的同事需要先给一个链接,先去印刷物料。 想到是 h5,那必然是.html 文件,于是給客户部的同时生成了一个二维码内容为 `https://xxx.com/h5.html` 的二维码。 结果前端小朋友开发是使用的 `[php](https://www.oschina.net/p/php)` 混合 `htm
H5性能优化方面的探索
H5性能优化方面的探索 =========== > H5很重要,很重要,很重要,重要的事情必须重复多遍,H5的优点:跨平台、迭代快、开发体验好。缺点:加载慢,用户体验差。所以在接下来很长一段时间内我将会从H5的几个缺点发面去研究如何优化。 一、缓存问题及其解决办法 ------------ 经常遇到一个问题,H5页面由于缓存问题经常在H5发布新版本之后
HTML5基础知识(一)
Web网页的开发主要包括H5+CSS+JS三个部分,这里先学习一下H5的基础知识。 一、基础语法 ====== 1\. html的基本格式 ------------- <!DOCTYPE html> <html lang="en"> <!--根标签--> <head> <!--头部
HTML5游戏开发凭什么这么火?看了你就知道了...
很多人都会问[H5游戏](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fedu.51cto.com%2Fcourse%2Fcourse_id-1307.html)有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然
2018.3.29 网页中嵌套网页的两种方法
第一种: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>     </head>     <body>         <marquee direction="right" style="color:
Nginx解决跨域问题(CORS)
前言 == CORS(Cross-Origin Resource Sharing) 跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。  如:a.c
vip视频网站爬虫
 vip视频网站爬虫 ========== 电影网站:[http://www.08ge.com/play/?make=dianying&id=fqvlYhH5QHb3Sh.html](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.08ge.com%2Fplay%2F%3Fmake
Android与H5混合开发
        Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
Angular2+ iframe跨域调用父页面js
**业务场景:列表页面添加一个导入功能,该导入功能由第三方页面提供,导入完成后需要通知主列表刷新数据。** **先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例)** **_(postMessage介绍:[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/pos
ExMobi+Agile Lite开发内置浏览器APP
微信对内置浏览器的定制封装,使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。 由于在实际项目中有需要在移动端使用到H5,而大部分H5页面都是来源于网络的,所以这里尝试使用[ExMobi](https://www.oschina.net/action/GoToLi
IE下 iframe子页面document.documentElement报错问题(未指明的错误。)
测试环境:IE8  jquery1.11.1 问题描述: 如果使用了<iframe>,并且在iframe页面中用到了jquery,那么在加载iframe页面时会报错.(未指明的错误) 经过排查,错误来自红色部分 "focus": function( elem ) {     return elem === document.activeE
SpringBoot Web Https 配置
不管是游戏服务器开发,还是其它服务开发,越来越多的平台都要求服务端必须支持https的访问。以增加安全性。比如目前火热的小程序,要求服务端必须支持https,苹果商店也有说http请求要修改为https。所以https将会是游戏服务器的普遍需求。 一,证书生成 ======    证书可以自己使用jdk生成进行测试。但是在正常使用的时候,需要去第三方机构