手机为啥截屏总是模糊的呢？

Posted 2023-05-15

分享是传播活动，吸引用户最重要的一环。现有分享手段多是题目配合单张图片，利用点击的方式跳转到目标页面。在信息越来越丰富的今天，单个题目和图片对用户的吸引力是有限的。而在对推广要求更高的营销场景和裂变过程中，我们往往需要将页面内容一部分作为图片整体分享出去。直接利用手机原生的截屏功能会有几个问题：
内容格式无法自定义。

翻页情况无法处理。

视窗区域不可控。

本文通过讨论现有截屏的方案和闲鱼内部截屏方案，介绍如何利用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。参数具体含义如图中所示。 参考技术A 我觉得可能是因为你的这个手机的分辨率是不太好的，因为有的时候分辨率要是不好的话，然后你的这个照片就是模糊的。下面是关于分辨率的扩展资料。

分辨率，又称解析度、解像度，可以细分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。
中文名
分辨率
外文名
Image 参考技术B 若使用的是vivo手机，手机截屏的图片与屏幕分辨率会保持一致。如果手机屏幕分辨率较低，那截屏之后放大查看可能会比较模糊；若图片经过软件传输，图片分辨率和大小会被压缩，也会导致截图模糊，建议在上传或发送截图时尽量选择原图传送。

vivo X90 Pro

¥4999

vivo X Fold+

¥9999

vivo S16 Pro

¥2999

vivo Pad

¥2499

查

看

更

多

官方电话官方服务
官方网站寄修服务服务中心配件价格在线客服保障服务

参考技术C 一般都与手机设置有关。打开设置，进入页面，点击显示，选择屏幕分辨率进入，可以看到有三种分辨率设置，将它设置为最高水准即可。 参考技术D 1，按home键和锁屏键同时按下就是截屏幕
2，可以通过开启 AssistiveTouch 来截图，方法是：
手机依次进入 设置---通用---辅助用能，
进入后找到并打开 AssistiveTouch 功能，
打开后点击屏幕中出现的小白点，选择设备---更多，然后点击 屏幕快照 即可

为啥我的iWatch 没法截屏

首先看手机上有没有打开这个开关，如果已经打开 同事按下侧面的两个按钮就会截图，图片会储存在手机相册里

参考技术A 想要在 iwatch 上截图的话，也需要同时按下二个按钮，即同时按上“数码皇冠+侧边按钮”二个。同样地，此时手表会闪一下，并配有照相的声音，就代表截图成功了。