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

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

网络异常,图片无法展示
|


前言


网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如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, 后面看了该库的源码, 感觉写的也很优雅易懂, 后期做二次开发应该问题不是很大. 我们可以看看其官网的基本使用:


// 引入importdomtoimagefrom'dom-to-image';
// 生成图片domtoimage.toPng(node)
    .then(function (dataUrl) {
varimg=newImage();
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页面, 也就是预览页面constgenerateImg= (cb:any) => {
domtoimage.toBlob(refImgDom.current, 
      {
width,
height,
      }
    )
    .then(function (blob:Blob) {
constformData=newFormData();
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);
})


目录
打赏
0
0
0
0
22
分享
相关文章
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
139 4
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
68 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
245 0
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
564 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
124 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
58 0
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
106 13
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    25
  • 3
    详解智能编码在前端研发的创新应用
    16
  • 4
    巧用通义灵码,提升前端研发效率
    14
  • 5
    智能编码在前端研发的创新应用
    10
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    26
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    14
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    29
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    7
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    36
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    67
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    97
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    149
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    85
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等