html2canvas 截图模糊，配置宽高效果不明显，更换进阶版插件后截图非常清晰

以下是增加了dpi和scale两个选项之后的html2canvas源码：

https://github.com/RunSky87/html2canvas-develop/tree/master/dist
默认可用选项（options）




参数名称
类型
默认值
描述




allowTaint
boolean
false
允许跨域


useCORS
boolean
false
貌似与跨域有关，但和allowTaint不能共存


proxy
string
undefined
代理地址


taintTest
boolean
true
是否在渲染前测试图片


timeout
number
0
图片加载延迟，默认延迟为0，单位毫秒


logging
boolean
false
在Console中输出信息


width
number
null
canvas的宽度设定


height
number
null
canvas的高度设定


background
string
#fff
canvas的背景颜色（未指定则为透明）


letterRendering
boolean
false
在设置了字间距的时候有用


新加可选用项




参数名称
类型
默认值
描述




scale
number
1
按比例增加分辨率 (2=双倍).


dpi
number
96
将分辨率提高到特定的DPI（每英寸点数）


使用中 配置：scale:2,dpi:300

截图清晰度与原画面没区别
补充：

DPI是指每英寸的像素，也就是扫描精度。DPI越低，扫描的清晰度越低，由于受网络传输速度的影响，web上使用的图片都是72dpi，但是冲洗照片不能使用这个参数，必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片，扫描精度必须是300dpi，那么文件尺寸应该是(4300)(6300)=1200像素*1800像素。

官网 http://html2canvas.hertzen.com/
安装 npm install --save html2canvas
使用(自带解决图片模糊的问题)
//id dom的id     name 下载图片的名称downloadCard(id, name) {      var copyDom = document.getElementById(id); //要保存的dom      var width = copyDom.offsetWidth; //dom宽      var height = copyDom.offsetHeight; //dom高      var scale = 2; //放大倍数      html2canvas(copyDom, {        dpi: window.devicePixelRatio * 2,        scale: scale,        width: width,        heigth: height,        useCORS: true // 【重要】开启跨域配置      }).then(function(canvas) {        var context = canvas.getContext("2d");        // 【重要】关闭抗锯齿        context.mozImageSmoothingEnabled = false;        context.webkitImageSmoothingEnabled = false;        context.msImageSmoothingEnabled = false;        context.imageSmoothingEnabled = false;        var url = canvas.toDataURL();        var triggerDownload = $("")          .attr("href", url)          .attr("download", name + ".png")          .appendTo("body");        triggerDownload[0].click();        triggerDownload.remove();      });    }
效果：
奥利给了

1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决 

    ：原因是devicePixelRatio决定了canvas的清晰度 

     ：网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0]; 

    node.setAttribute(html2canvasNodeAttribute + index, index); 

    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) { 

        if (typeof(options.onrendered) === "function") { 

            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); 

            options.onrendered(canvas); 

        } 

        return canvas; 

    }); 

    这样做出来的结果呢！宽比例变形不可控基本没用  简书html2canvas截图的清晰度问题 

    （个人也觉得html2canvas是可以的，可是结果就是行不通，可能是因为html2canvas社区对于移动设备的应用没有足够的支持，希望他们能够早点给出针对移动设备的方法） 

   ：在这vue之前我是用Angular写的，遇到这个截图不清晰的问题，导致在Angular写的项目中加入普通的jquery html页面 

   ，结果路由跳转就混乱了，后面重构用了比较火vue 2.0 +webpack构建 

   进入主题： 

   我们项目中的解决办法就是修改html meta属性 

   1、通常我们写移动web的meta是<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> 

   这么截图都会以单倍屏来截图 iphone5 320 、iphone 6 375、 iphone 6plus 414;生成的图片都是模糊的。 
本人思路 
一、：在截图的时候将需要生成元素或容器再生成一次，将宽高比例都放大一倍，再去用html2canvas去生成图片（问题是：dom元素较多时，中间创建一次，html2canvas本身要创建一次这样会耗太多性能《适合单次、灵活性好》） 
二、：针对方法一，另一种方法，就是再截图的时候设置页面 document.body.style.zoom 的倍数这样省去创建的过程，截图完成再缩小回去，确实可生成你想要的图片（会出现两个问题：1、body.style.zoom本身存在兼容性问题，2、截图过程body放大,页面会乱，而且完成后缩放，页面会出问题的） 
三、:方法二，对于重复调用是可行性（勉强可用），这就有了第三种方法，我们再需要做截图操作的页面 设置<meta name="viewport" content="1080", initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>, 

 此时呢：原本页面宽高、字体大小都要重新设置了，其他页面meta还是不用修改（总感觉有点怪怪的，不过这样确实可行，要不是第一次用的是angular,出现路由问题也不会有终极方案） 
最终方法 最近一次项目重构用的时Vue SPA(单页面应用，webpack构建)，我们项目中所有的宽高单位时rem为了适配移动端大小设置，这样再（iphone 6）750px宽度的屏幕 1rem = 50px，再index.html script最先设置 document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 

 最后设置 <meta name="viewport" content="width=640,height=device-height,initial-scale=0.5,maximum-scale=0.5,user-scalable=no">这里width= 640 iphone 5起用 再把放大倍数缩小这样布局不用修改任何东西就完全OK了  


  
效果对比大小一样 




第一次写博客，望斧正

最近由于公司业务要求，需要完成一个HTML页面效果渲染后生成照片的功能，功能的核心是把HTML代码展现的内容转化为png或者jpg图片。接到这个任务的时候，我心里是一脸懵逼的，于是就上谷歌搜索插件，还真有一款名叫html2canvas的插件，我心想看来这任务还是挺简单的，那开始吧！

html2canvas

运行脚本，可以直接在用户浏览器上拍摄网页或其部分的“截图”。截图是基于DOM，因此并不是100％准确的真实表示，因为它是实际的截图，而是根据页面上可用的信息构建截图。（引用自html2canvas官网）

入门

html2canvas的简单调用：

// element是需要截图的元素
html2canvas（element，options）;

可用选项（options）

参数名称
			
类型
			
默认值
			
描述
		
allowTaint
			
boolean
			
false
			
允许跨域
		
useCORS
			
boolean
			
false
			
貌似与跨域有关，但和allowTaint不能共存
		
proxy
			
string
			
undefined
			
代理地址
		
taintTest
			
boolean
			
true
			
是否在渲染前测试图片
		
timeout
			
number
			
0
			
图片加载延迟，默认延迟为0，单位毫秒
		
logging
			
boolean
			
false
			
在Console中输出信息
		
width
			
number
			
null
			
canvas的宽度设定
		
height
			
number
			
null
			
canvas的高度设定
		
background
			
string
			
#fff
			
canvas的背景颜色（未指定则为透明）
		
letterRendering
			
boolean
			
false
			
在设置了字间距的时候有用
		
特别的是，html2canvas提供了回调事件--onrendered来渲染canvas：

html2canvas（element，{ 
    onrendered：function（canvas）{ 
        // canvas是最终渲染的<canvas>元素
    } 
}）;

html2canvas(document.getElementById('view')).then(function(canvas) {
                                                    var myImage4 = canvas.toDataURL("image/jpeg",1.0);
                                                    //并将图片上传到服务器用作图片分享
                                                    var fileName4 = "ws_" + $("#period").val()+'_shouji';
                                                    $.ajax({
                                                        type : "POST",
                                                        url : ctx+'/portal/upload',
                                                        data : {data:myImage4,fileNAme:fileName4},
                                                        timeout : 60000,
                                                        success : function(data){
                                                            alert("静态资源文件生成完毕！");
                                                            mini.unmask(document.body);
                                                        }
                                                    });
                                                });

最原始效果图找不到了，放一张稍微有点对比性的吧，最原始截出来文字发虚，模糊度文字无法叙述：



html2canvas提供了scale属性可调整清晰度：



优化后效果图：



参数用法介绍：


			
参数名称
			
			

			
类型
			
			

			
默认值
			
			

			
描述
			
		
scale
			
number
			
1
			
按比例增加分辨率 (2=双倍).
		
dpi
			
number
			
96
			
将分辨率提高到特定的DPI（每英寸点数）
		
html2canvas.js