H5分享截图方案优化(h5页面调用手机截图功能)
ztj100 2025-03-13 22:12 52 浏览 0 评论
背景
分享是传播活动,吸引用户最重要的一环。现有分享手段多是题目配合单张图片,利用点击的方式跳转到目标页面。在信息越来越丰富的今天,单个题目和图片对用户的吸引力是有限的。而在对推广要求更高的营销场景和裂变过程中,我们往往需要将页面内容一部分作为图片整体分享出去。直接利用手机原生的截屏功能会有几个问题:
内容格式无法自定义。
翻页情况无法处理。
视窗区域不可控。
本文通过讨论现有截屏的方案和闲鱼内部截屏方案,介绍如何利用web实现移动端高还原度富图文分享。
现有方案:Html2Canvas
介绍
html2canvas是一种基于canvas,将DOM结构绘制在canvas上面产生图片的第三方库。通过如下的方式可以将对应的DOM结构绘制成图片保存出来。优势在于上手简单,使用方便。
绘制原理
原理如下图所示。核心逻辑是克隆对应节点DOM结构,利用parse解析成数据,构建canvas进行内容绘制,返回对应的canvas。
实际使用中发现存在如下问题
图片跨域不支持。生成的图片存在跨域限制问题。
绘制清晰度低。即使使用api
scale
放大后绘制,又会由于生成base64格式图片内容过长导致无法传输。圆弧计算精度低。由于html2canvas是计算像素后绘制到canvas上,而canvas展示又会经过浏览器绘制,导致像素精度降低。
深度节点出现黑色情况。由于DOM结构过深,经过像素计算后,会偶尔出现像素丢失情况。
现有方案:SVG
介绍
该方案是利用svg可以包裹DOM结构的特性,将对应目标装载进去,之后将svg导出成base64格式的图片。使用方式如下。通过xmlns指定命名空间,防止多集合下元素和属性的冲突。后缀中的 svg
和xhtml
分别表示解析方式。利用不同的解析方式,实现了svg内部嵌入html的方式。
之后只要通过 encodeURIComponent(svg)
将对应的svg转换成base64就可以。优势是容易上手且不依赖第三方库。
实际使用中发现存在如下问题
SVG无法连接到外部的资源。比如通过cdn引入的css以及html中的图片连接都会被限制。
不支持js执行。现如今SPA页面都需要执行JS后才会渲染对应的DOM节点,而SVG却不支持JS的执行。
SVG位置和大小不确定。遇到需要及时展示的情况,需要实时计算位置才行。
解决方案
思路
从上面可以看到,现有的两种主流移动端截屏方案都有自己的不足。相比之下,利用canvas绘制的方法更适合SPA应用。那么我们需要解决的是html2canvas对应的几个问题:图片跨域,清晰度低,圆弧计算精度差,深层节点解析出错。
图片跨域
通过 newImage
的方式生成图片,在image.onload
阶段使用canvas绘制图片。此时会产生跨域限制,需要通过crossOrigin='Anonymous'
设置来解决这个问题。
提高清晰度
在绘制中发现,如果采用宽度375px的canvas将图片导出,会出现图片模糊的情况。一种方案是提高原图片清晰度,但是加载速度会大大提高,用户体验不友好。另一种方式是放大canvas,利用 drawImage
中的参数控制图片坐标和canvas中的绘制坐标。drawImage
中包含几个参数:控制图片的sx, sy, sWidth, sHeight和控制canvas绘制的x, y, width, height。参数具体含义如图中所示。
将方法中width和height乘上ratio,放大图片,控制绘制坐标,就能在canvas特定位置上绘制出想要的内容。考虑到小canvas在展示阶段清晰度足够,仅保存阶段需要放大三倍绘制的特性,采用第二种方法在几乎没有提高性能开销的前提下,提高清晰度。我们以实际绘制截图来看一下效果。下图左边是一倍结果,右图是三倍结果。
圆弧精度低和深层DOM解析
圆弧精度低和深层DOM解析出错问题本质上还是由于DOM结构过于复杂,当采用通用方案处理时,难免无法覆盖。考虑到移动端内容有限,结构简单的特点。决定采用特定DOM节点针对性绘制的方案解决深层DOM解析出错的问题。好处如下:1)方法原子化,维护简单。2)绘制高度自定义化,自由组织界面结构。3)拓展性强。在同事胖仔的帮助下实现特定DOM节点绘制方案。方案构建过程中主要有如下几个难点:圆角矩形,文字自动换行。
圆角矩形:通过截断的方式绘制特定背景的圆角矩形。原理是通过
createPattern
的方式在canvas上获取图片内容,再利用Path的方式,绘制对应的路线,利用canvas.arc
绘制圆弧部分,利用canvas.lineTo
绘制直线部分,截取想要的内容,实现圆角矩形。
图片内容获取。 context.createPattern(imgUrl,"no-repeat")
圆角矩形区域绘制
绘制内容
文本自动换行:思路是通过 measureText
获得当前文本宽度,每次添加一个字,比对此时文本宽度和行宽,超过时候绘制当前行,进行换行,y增加行高,重复这个过程。
效果
实现了一套移动端截屏方法。解决了现有第三方库html2canvas绘制清晰度低,圆弧计算精度低,深层DOM解析出错的问题。
采用原子化实现方法。支持截屏自定义绘制,而不是如html2canvas和svg只能通过复数次绘制不同DOM节点,来拼凑目标的方式。
总结
在互联网时代,尤其是5G马上要来临的今天。传统的分享模式,标题+单图片,逐渐难以满足越来越丰富的活动宣传要求。而流量的廉价化和短视频火热的时下,富图文传播无疑能传递更多的信息。目前我们已经实现了基本DOM节点绘制方案,并在站内活动中使用富图文分享。相信在不久的将来,我们能够利用移动端截屏分享功能帮助更多闲鱼用户高效率分享内容,让用户乐在闲鱼,玩在闲鱼。
相关推荐
- Vue3非兼容变更——函数式组件(vue 兼容)
-
在Vue2.X中,函数式组件有两个主要应用场景:作为性能优化,因为它们的初始化速度比有状态组件快得多;返回多个根节点。然而在Vue3.X中,有状态组件的性能已经提高到可以忽略不计的程度。此外,有状态组...
- 利用vue.js进行组件化开发,一学就会(一)
-
组件原理/组成组件(Component)扩展HTML元素,封装可重用的代码,核心目标是为了可重用性高,减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...
- Vue3 新趋势:10 个最强 X 操作!(vue.3)
-
Vue3为前端开发带来了诸多革新,它不仅提升了性能,还提供了...
- 总结 Vue3 组件管理 12 种高级写法,灵活使用才能提高效率
-
SFC单文件组件顾名思义,就是一个.vue文件只写一个组件...
- 前端流行框架Vue3教程:17. _组件数据传递
-
_组件数据传递我们之前讲解过了组件之间的数据传递,...
- 前端流行框架Vue3教程:14. 组件传递Props效验
-
组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...
- 前端流行框架Vue3教程:25. 组件保持存活
-
25.组件保持存活当使用...
- 5 个被低估的 Vue3 实战技巧,让你的项目性能提升 300%?
-
前端圈最近都在卷性能优化和工程化,你还在用老一套的Vue3开发方法?作为摸爬滚打多年的老前端,今天就把私藏的几个Vue3实战技巧分享出来,帮你在开发效率、代码质量和项目性能上实现弯道超车!一、...
- 绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!
-
前端的兄弟姐妹们五一假期快乐,谁还没在Vue3项目上栽过跟头?满心欢喜写好的组件,一到实际场景就频频崩溃,页面加载慢得像蜗牛,操作卡顿到让人想砸电脑。用户疯狂吐槽,领导脸色难看,自己改代码改到怀疑...
- 前端流行框架Vue3教程:15. 组件事件
-
组件事件在组件的模板表达式中,可以直接使用...
- Vue3,看这篇就够了(vue3 从入门到实战)
-
一、前言最近很多技术网站,讨论的最多的无非就是Vue3了,大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊,Vue3对于一个低代码平台的前端更深层次意味着什么...
- 前端流行框架Vue3教程:24.动态组件
-
24.动态组件有些场景会需要在两个组件间来回切换,比如Tab界面...
- 前端流行框架Vue3教程:12. 组件的注册方式
-
组件的注册方式一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册...
- 焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!
-
前端圈的朋友们,谁还没在Vue3项目上踩过性能的坑?满心期待开发出的组件,一到高并发场景就频繁假死,用户反馈页面点不动,产品经理追着问进度,自己调试到心态炸裂!别以为这是个例,不少人在电商大促、数...
- 前端流行框架Vue3教程:26. 异步组件
-
根据上节课的代码,我们在切换到B组件的时候,发现并没有网络请求:异步组件:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)