html2canvas 生成的图片变模糊解决方案菜鸟教程下载_图片入门攻略

需求: 背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。 为什么会模糊? 网上介绍说明是: 原来浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个像素点来渲染1个像素,举例来说,假设

html2canvas 生成的图片变模糊解决方案菜鸟教程下载

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

html2canvas 生成的图片变模糊解决方案菜鸟教程下载_图片入门攻略

为什么会模糊? 

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

解决方案

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

部分代码

html2canvas 生成的图片变模糊解决方案菜鸟教程下载_图片入门攻略

在项目中发现生成的图片还是有点糊,还真是怪了,再看了下DOM结构,背景图是放在body中的,那既然背景图还是糊,那改成图片。在DOM中放一个div,再把图片放在里面,div 下的图片设置样式

{position:absolute;top:0;left:0;width:100%;height:100%:z-index:1;}

生成的图片的样式层级设置到最高,发现跟图片差不多清晰了,终于解决了这个大坑! 

海计划公众号
(0)
上一篇 2020/03/26 23:29
下一篇 2020/03/26 23:29

您可能感兴趣的内容

  • 说说JS中的沙箱使用指南_沙箱菜鸟知识

    其实在前端编码中,或多或少都会接触到沙箱,可能天真善良的你没有留意到,又可能,你还并不知道它的真正用途,学会使用沙箱,可以避免潜在的代码注入以及未知的安全问题。前言沙箱,即sandbox,顾名思义,就是让你的程序跑在一个隔离的环境下,不对外界的其他程序造成影响,通过创建类似沙盒的独立作业环境,在其内部运行的程序并不能对硬盘产生永久性的影响。举个简单的栗子,其

    2020/03/26
  • 全栈工程师是什么?为什么要做Web全栈工程师?教程视频_工程师入门百科

    随着软件技术的发展以及市场需求的变化,全栈工程师似乎已成为未来发展趋势。很多Flag公司都已经声称只招Full Stack的员工,那么面对这样的市场形势,对于正在求职路上或者是想要跳槽的程序员来说,我们需要如何准备,如何应战?现在,小编带你了解为什么这次我选全栈工程师!什么是全栈工程师?全栈工程师指的是一个程序员对前端知识和后端架构都有深入的了解并且有足够的

    2020/04/03
  • 常用正则表达式基础知识_正则使用帮助

    表达式全集字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。^匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置。$匹配输入字符串的结束位置。如果设置了R

    2020/03/24
  • JS算法题之字符串转换整数小白攻略_算法题小白帮助

    题目描述请你来实现一个 atoi 函数,使其能将字符串转换成整数。首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止。当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之后面尽可能多的连续数字组合起来,作为该整数的正负号;假如第一个非空字符是数字,则直接将其与之后连续的数字字符组合起来,形成整数。该字符串除了有效的整数部分之

    2020/03/29
  • 扔掉 cli,webpack工程轻量化配置实战教程视频_cli菜鸟指南

    前言之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板,介绍文章在此。之后通过一些实践,除去了cli工具相对复杂的配置结构,提供轻量化版本的配置方案。之所以说是轻量化,是相对于Vue、React等框架提供的官方cli工具而言的。并不是说这些cli工具不好,它们本身提供了开箱即用的良好特性,又集成了很多提升开发体验的插件,确实能降低

    2020/03/23
  • 网站交互、开发方式和前端框架介绍指南教程_交互小白攻略

    这个世界唯一不变的可能就是变化,历史的车轮滚滚向前,它不会因任何人的消极缓慢而停止。时代抛弃你时,连一声再见都不会说。从最开始的Javascrpit、到后来的Jquery、(ExtJs、EasyUI、MiniUI)、Bootstrap、Layui,再到如今的mvvm框架(Vue.js、Angular.js、React.js),整个前端的发展趋势一直在改变。就

    2020/03/30
  • 优质的圈子,有多么重要?小白基础_话题教程视频

    1今天偶然想到了这个话题,姑且来谈谈。好多人其实都知道,我大学学的是国际商务,这是一个跟计算机八竿子都打不着的专业。后来我自己学习了计算机方面的一些知识,在最开始的时候,可能大一大二的样子吧,还想着去本学校计算机专业班级蹭课,顺便多认识一些懂计算机的老师和同学。所以那时我在很多的 QQ 群里面找到了一些计算机专业的人,问他们要了课表,但是后来一次都没有去,究

    2020/03/30
  • 网页后缀html、htm、shtml、shtm有什么区别?小白教程_网页入门攻略

    每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。 首先介绍一下html与htm 关于HTML,HTML(HyperTextMark-upLanguage)即超文本标记语言,

    2020/04/05
  • web测试要点、方法小白入门web端测试大全总结_测试作者: 转载基础入门

    一、功能测试 1.1链接测试 链接是web应用系统的一个很重要的特征,主要是用于页面之间切换跳转,指导用户去一些不知道地址的页面的主要手段,链接测试一般关注三点: 1)链接是否按照既定指示那样,确实链接到了该链接的界面 2)测试该链接所链接的页面是否真的存在 3)保证系统中没有单独存在的页面(即没有

    2020/04/05
  • Functional-Light-JS使用指南_一本关于JavaScript中函数式编程的书

    Functional-Light-JS使用指南 官方网址:http://FLJSBook.com GitHub:https://github.com/getify/Function…

    2020/03/10
  • 码农网小白入门_程序员编程资料和编程经验分享平台

    码农网小白入门 官方网址:http://www.codeceo.com/ 简介描述:程序员编程资料和编程经验分享平台 程序员编程资料和编程经验分享平台码农网是一个专注程序员编程资料…

    2020/03/06
  • libpku基础知识入门_贵校课程资料民间整理

    libpku基础知识入门 官方网址:https://lib-pku.github.io/ GitHub:https://github.com/lib-pku/libpku 简介描述…

    2020/03/06
  • 至顶网入门基础教程新技术、新商业模式的新媒体和信息服务平台

    至顶网使用教程 官方网址:http://www.zhiding.cn/ 简介描述:新技术、新商业模式的新媒体和信息服务平台 至顶网,是关于新技术、新商业模式的新媒体和信息服务平台,…

    2020/03/06
  • Inferno小白教程_快速、类React风格的js用户界面库

    Inferno基础入门 官方网址:http://infernojs.org GitHub:https://github.com/infernojs/inferno 简介描述:快速、…

    2020/03/06
  • ES6封装H5本地存储localStorage、sessionStorage 小白教程_存储攻略教程

    localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage、和sessionStorage的用法:(localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、remove

    2020/03/29
  • 如何将视频设置为网页背景【转】指南教程_视频指南攻略

    有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。第一步:准备工作工欲善其事必先利其器,我们首先需要准备一个视频第二步:html中引入视频这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈<

    2020/04/05