文档章节

html2canvas 生成的图片变模糊解决方案

前端老手
 前端老手
发布于 09/17 18:26
字数 579
阅读 47
收藏 0
需求:

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

为什么会模糊?

网上介绍说明是: 原来浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个像素点来渲染1个像素,举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。知道了这一点,这个问题也就能理解了。当浏览器去渲染canvas的时候,他会用2个像素点的宽度去渲染canvas,因此在大多数retina设备的浏览器中会出现绘制的图片或文字变模糊的情况。

解决方案

1.先获取设备的PixelRatio,可参考hidpi-canvas提供的方法getPixelRatio.
2.将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。

部分代码

  


在项目中发现生成的图片还是有点糊,还真是怪了,再看了下DOM结构,背景图是放在body中的,那既然背景图还是糊,那改成图片。在DOM中放一个div,再把图片放在里面,div 下的图片设置样式{position:absolute;top:0;left:0;width:100%;height:100%:z-index:1;},生成的图片的样式层级设置到最高,发现跟图片差不多清晰了,终于解决了这个大坑!踩坑的筒子请举手!!!


转载请注明:前端录»html2canvas 生成的图片变模糊解决方案

本文转载自:https://www.mk2048.com/blog/blog.php?id=1hcika21j

前端老手
粉丝 10
博文 613
码字总数 0
作品 0
卢湾
技术主管
私信 提问
移动端js模拟截屏生成图片并下载功能的实现方案+踩坑过程

一. 项目中有需求如下: 将营业日报生成图片下载至用户手机保存 二. 踩坑思路: 首先,因为用的是第三方的app(钉钉)内嵌webview开发,所以无法拿到截屏的api(而且需要生成的日报超出一个屏...

小p
01/18
0
0
一次 H5 「保存页面为图片」 的踩坑之旅

1. 需求 最近丁香医生的产品大佬又双叒叕搞事情,想要在 H5 中做一个医生邀请提问的功能,可以将医生的二维码名片分享出去,支持移动、PC 和微信。之前的图片是由后端生成的,并且会缓存三天...

丁香园F2E
2017/11/25
0
0
html2canvas的踩坑之路

前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期. html2canvas介绍 的详细...

Anonlyyy
2018/06/29
0
0
H5拍照应用开发经历的那些坑儿

一、项目简介 1.1、项目背景: 这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮。 1.2、系统...

我是李达康
2015/03/31
9K
0
html2canvas-实现页面截图

如何将HTML页面保存为图片? 将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。 使用HtmlCanvas2实现。 使用rasterizeHTML.js实现。 优缺点分析: ...

爱吃橘子的毛毛虫
2018/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
8
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部