html2canvas 图片中的文字显示模糊 图片模糊 二维码模糊 的原因之一

最新推荐文章于 2023-07-14 17:20:19 发布
最新推荐文章于 2023-07-14 17:20:19 发布
阅读量5.3k 收藏 2
点赞数
分类专栏： 坑 文章标签： html2canvas 模糊 图片 文字
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/80871494
版权

有些h5项目有长按保存图片的需求，可以使用 html2canvas 来实现相对应的功能，

但是在项目中发现有的地方模糊不清，比如网页中有一张二维码的图片模糊，无法识别，

后来发现，图片之类的不要当作背景图片，也就是直接放在 <img>  标签中即可,

解决了图片模糊的问题； 

cvper
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
canvas.js html2canvas解决图片模糊版本
04-15
解决html2canvas图片模糊问题，必须使用此版本
html2canvas案例解决模糊不清及滚动下拉问题（已测试，可直接应用到项目中）
02-08
html2canvas案例解决模糊不清及滚动下来问题（已测试，可直接应用到项目中）
html2canvas 图片文字模糊
qq_37324690的博客
11-11 2681
图片模糊可以使用 img 绝对定位代替背景图片 如果必须使用backgroundImage可以先将需要熏染的元素宽高相应的放大2倍 canvas 生成的时候响应的缩小响应的倍数，这样生成的 图片相对不模糊 但是受到背景图片大小的限制 小心使用 里面使用的图片也需要考虑图片跨域问题 ...
【html2canvas】html2canvas生成慢和模糊的问题
tuzi007a的博客
04-25 2247
等加载完dom再生成图片，所以慢，有些用不到的dom，可以通过。来忽略掉，在react中，写作。这样能让图片清晰不少。
通过 html2canvas 生成海报截图导致图片模糊的优化方法
lMasterSparkl的博客
10-21 1572
1.问题基本信息 使用vue制作h5页面，需求是生成带二维码的海报进行分享。 通过qrcodejs2生成指定url路径的二维码 通过使用html2canvas生成指定div的截图信息 问题：生成的海报模糊 2.解决办法 不多废话直接贴关键代码 body部分： <div class="poster_bg"> <div class="share_title"> <p style="margin: 0.5rem">长按图片保存并转发&l
html2canvas的使用与清晰度优化
z17864151193的博客
05-30 4809
这是html页面代码： <view id="Top4Img" class="posterImage" ref="Top0Img"> <image class="bgImg" src="../../static/invite/images/invite4.jpg" /> <view class="title">今日签</view> <view class="num">{{userInfo
html2Canvas常见问题以及解决
沉淀，积累、进步
12-24 7585
html2Canvas常见问题以及解决:图片模糊，白边，跨域等等问题
html canvas 模糊,解决 canvas 在高清屏中绘制模糊的问题
weixin_42362931的博客
06-05 2204
使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。因此，要做 Retina 屏...
html2canvas 下载图片，scale、dpi处理图像模糊
Ann_52547的博客
07-14 2274
html2canvas 下载图片，scale、dpi处理图像模糊
Html2Canvas 常见问题
Eighteen Z
07-28 5319
1. 文字样式丢失且都变成为最小号字体。 解决方案： 需要截图的节点根样式添加font-variant: normal； 2. 文字向下偏移。 解决方案： 指定html2canvas的版本号为1.0.0-alpha.12 3. 不完整，缺失，留白。 出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。 解决方案： 截图之前控制滚动条至顶部。 4. 模糊，不清晰。 出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。 解决方案： 将背景图通过img标签加定位的方式实现。 ...
使用html2canvas实现将html内容写入到canvas中生成图片
01-21
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片，这里我使用到了html2canvas插件，这个插件是基于canvas实现的 html2canvas官网： http://html2canvas.hertzen.com/ ...
html2canvas生成的图片偏移不完整的解决方法
11-20
问题背景：生成的图片在一个弹窗里面，如果页面没有滚动条就是正常的，但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边，如下：   解决办法：   楼主查了很多资料，也...
html2canvas关于图片不能正常截取的解决方案
12-11
但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果，google了半天未果。此时有些许绝望。突然想到了，为什么不去它的 官网...
利用html2canvas将echarts多图表导出成一个图片
12-15
利用html2canvas插件，将一个或多个echarst导出到一个图片中
笔记本能连上wifi 但是浏览器打不开，使用手机的热点却可以正常上网的问题？
热门推荐
cvper's world !
03-20 8万+
状况描述：window8.1操作系统，之前无论是连接WiFi还是直插网线都可以，今天来到北京却突然发现连的上                 WiFi，却打不开浏览器， 我打开手机热点，笔记本却能好好的正常工作。处理步骤：整整一天，各种百度，各种设置，各种修复软件下载，结果还是不行，吃完晚饭，从房东那得到路由器                 的登录密码，去后台一看，连着呢，没有问题，各种配置都是...
实现 swiper 的左右箭头放到外面，定制箭头的样式
cvper's world !
06-18 2万+
swiper 很好用，但是设计可不会按照 swiper 的样式给你设计图，一般情况下轮播图会有下面这种情况：    swiper 本身的箭头在里面；     而我们需要箭头在外面；      swiper 默认的样式是 箭头部分在内部，那我们要如何实现siwper 的箭头放到外面呢？第一步：实现一个不带箭头的轮播图； 代码：&lt;!DOCTYPE html&gt;&lt;html lang="e...
sign in 与 log in ；登陆与登录
cvper's world !
01-09 1万+
浏览British Broadcasting corporation 的官网，发现其登陆写的是sign in，如图： 登录界面： 平时习惯用log in，两种都是可以的； 登陆：浏览一个网站登陆是这个 登录：用户名密码用这个 还是有区别的，容易忽视
在同一个页面中多次使用swiper 轮播插件，要避免相互影响
cvper's world !
06-18 1万+
在项目中使用轮播是很常见的，swiper 就是其中之一，pc 端，移动端都可以使用，效果还是不错的；曾经在写一个页面的时候，其中有两个轮播图，于是都用swiper 来写了，写完之后发现显示的效果不是预期的效果，有很大的问题；后来检查发现两个轮播图相互影响了，样式啥的冲突了，因为我没有单独的给container或者slide 起类名，所以样式相互冲突了；现在总结一下在同一个页面中使用多个 swipe...
a:link{ 超链接 }样式在浏览器中颜色没有变化的原因？
cvper's world !
03-05 6981
问题：我们都知道链接的样式在设置的时候可以有四种状态，          a:link{}  或者a{}   设置链接的颜色     ，          a:visited{}           设置点击链接之后显示的颜色     ，          a:hover{}             设置光标悬停在链接上时显示的颜色     ，          a:active{}       ...
html2canvas图片模糊
最新发布
10-12
html2canvas是一个用于将HTML元素转换成图像的JavaScript库。但是，有时候在使用html2canvas时，生成的图像可能会出现模糊的问题。 出现这种情况的原因有很多，以下是几个可能导致html2canvas图像模糊的原因： 1. 页面缩放问题：如果页面进行了缩放，html2canvas可能会将缩放后的图像进行截取，导致图像模糊。可以尝试将页面还原到默认的缩放比例。 2. 图片大小问题：如果将较大的HTML元素转换为图像，并且图像显示的尺寸较小，html2canvas可能会在缩放图像时导致模糊。可以尝试将图像显示尺寸与原始元素尺寸保持一致。 3. CSS样式问题：有些CSS样式可能会影响html2canvas生成的图像质量。例如，使用CSS的transform属性进行旋转、缩放等效果可能会导致图像模糊。可以尝试去除或优化这些CSS样式。 4. 字体渲染问题：如果html2canvas无法正确地渲染页面中的特定字体，则可能会导致图像模糊。可以尝试加载相应的字体文件或使用默认的通用字体。 5. html2canvas库版本问题：如果使用的是过时或有已知问题的html2canvas库版本，也可能导致图像模糊。可以尝试更新到最新的版本。 要解决html2canvas生成的图像模糊问题，可以尝试上述提到的解决方法。另外，还可以查阅html2canvas官方文档和开发者社区，了解是否有其他用户遇到了类似的问题，并尝试寻找解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值