html2canvas - 网页转换为图片之图片清晰度优化

使用方法

第一步:html转为canvas;
第二步:canvas转image。
 
生成图片的清晰度优化方案
将canvas的属性width和height属性放大为2倍(或者设置为devicePixelRatio倍);
最后将canvas的CSS样式width和height设置为原先1倍的大小。
 
优化策略
更改百分比布局为px布局(如果原先是百分比布局的话);
关闭canvas默认的抗锯齿设置;
设置模糊元素的width和height为素材原有宽高,然后通过transform: scale进行缩放。这里scale的数值由具体需求决定。
 
优化解析
如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊;
默认情况下,canvas的抗锯齿是开启的,需要关闭抗锯齿来实现图像的锐化;
除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度,对于DOM中其他的元素也可以使用css样式的scale来实现同样的缩放。

代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>web实时长图实践</title>
<style>
	* {margin: 0;padding: 0;box-sizing: border-box;}
	html,body {width: 100%;}
	img {width: 100%;}
</style>
</head>
<body>
  	<!-- 
  		需求:在事件触发时,自动生成一个大事件长图  方案:在浏览器端尝试dom转图片的两种方案:
  		html2canvas一个在浏览器端通过JS对整个或部分页面进行“截屏”的库。
  		html2canvas使用方法简单,截屏的核心代码如下:
  	-->
  	
  	<button onclick="convert2canvas()">点击按钮将网页保存为图片</button>
  	<div id="text">
      	<p>Web开发之用canvas2image.js将canvas保存为图片</p>
	  	<img src="img/html2canvas.png" height="200px" alt="长图">
      	<p>哈哈哈</p>
	  	<img src="img/html2canvas2.jpg" height="200px" alt="短图">
    </div>
    
  	<script src="js/html2canvas.js"></script>
  	<script src="js/canvas2image.js"></script>
  	
  	<script>
    	function convert2canvas() {
      		var cntElem = document.getElementById('text'); //
      		var shareContent = cntElem; //需要截图的包裹的(原生的)DOM 对象
      		var width = shareContent.offsetWidth; //获取dom 宽度
      		var height = shareContent.offsetHeight; //获取dom 高度
      		var canvas = document.createElement("canvas"); //创建一个canvas节点
      		var scale = 2; //定义任意放大倍数 支持小数
      		canvas.width = width * scale; //定义canvas 宽度 * 缩放
      		canvas.height = height * scale; //定义canvas高度 *缩放
      		canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
      		var opts = {
        		backgroundColor:'#ffffff',
        		scale: scale, // 添加的scale 参数
        		canvas: canvas, //自定义 canvas
        		//logging: true, //日志开关,便于查看html2canvas的内部执行流程
        		width: width, //dom 原始宽度
        		height: height,
        		useCORS: true //[重要]开启跨域配置
      	};
      	html2canvas(shareContent, opts).then(function (canvas) {
        	var context = canvas.getContext('2d');
        	//[重要]关闭抗锯齿
        	context.mozImageSmoothingEnabled = false;
        	context.webkitImageSmoothingEnabled = false;
        	context.msImageSmoothingEnabled = false;
        	context.imageSmoothingEnabled = false;
        	//[重要]默认转化的格式为png,也可设置为其他格式
        	var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
        	document.body.appendChild(img);
        	//创建一个a标签
        	var dlLink = document.createElement('a');
        	//download 属性规定被下载的超链接目标。
        	dlLink.download = 'down';
        	dlLink.href = img.src;
        	//HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
        	dlLink.dataset.downloadurl = ["image/jpeg", dlLink.download, dlLink.href].join(':');
        	document.body.appendChild(dlLink);
        	//自动点击a标签
        	dlLink.click();
        	document.body.removeChild(dlLink);
      	});
    }
  </script>
</body>
</html>

注意:此功能基于html2canvas及Canvas2image插件,页面需要引入此插件。
html2canvas下载地址:http://html2canvas.hertzen.com/
Canvas2image下载地址:https://github.com/hongru/canvas2image