微信图片生成插件，页面截图插件 html2canvas，截图失真问题的解决方案

迷南。 2021-10-01 07:40 464阅读 0赞

html2canvas 是一个相当不错的 JavaScript 类库，它使用了 html5 和 css3 的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas 通过获取页面的 DOM 和元素的样式信息，并将其渲染成 canvas 图片，从而实现给页面截图的功能。

官网：[https://github.com/niklasvh/html2canvas][https_github.com_niklasvh_html2canvas]

**遇到的问题：**

参考官方的 Demo，发现所截的图失真厉害。

**解决方案：**

将 canvas 的宽高放大到原容器宽高的 3 倍，参考代码如下：

<html>
    <head>
    	<meta name="layout" content="main">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<script type="text/javascript" src="jquery.min.js"></script>
    	<script type="text/javascript" src="html2canvas.js"></script>
    	<script type="text/javascript" src="canvas2image.js"></script>
    </head>
    <body>
    	<div id="to-image">
    		<h3>Html5页面截图 演示</h3>
    		<div  style="background-color: #abc;padding: 10px">
    			Hello World!
    			<br>
    			<div style="background: url(1.jpg) center center; width: 500px;height: 300px;"></div>
    			<br>
    			<a href="http://phpgo.cnblogs.com" target="_blank">http://phpgo.cnblogs.com</a>
    			<br>
    			<textarea id="textArea" col="20" rows="3"></textarea>
    		</div>
    	</div>
    	<div style="background-color: red; padding: 10px; margin-top: 10px;">
    		<input id="do-image" type="button" value="开始截图">
    	</div>
    	<div id="show-image">
    
    	</div>
    </body>
    </html>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#do-image").on("click", function(event) {
    			var dom = $('#to-image');
    			var width = dom.width();
    			var height = dom.height();
    			var type = "png";
    			var scaleBy = 3;  // 缩放比例
    			var canvas = document.createElement('canvas');
    			canvas.width = width * scaleBy;
    			canvas.height = height * scaleBy + 60; // 60 是我处理完后发现短了一点，具体为什么不清楚，如果你也少的话，根据自己的项目调吧
    			canvas.style.width = width * scaleBy + 'px';
    			canvas.style.height = height * scaleBy + 'px';
    			var context = canvas.getContext('2d');
    			context.scale(scaleBy, scaleBy);
    			html2canvas(dom[0], {
    				canvas : canvas,
    				onrendered : function(canvas) {
    					// 放到到原来的 3 倍
    					$("#show-image").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));
    
    					// 在将放大的图片用CSS再缩小，方便在手机上清晰查看
    					$("#show-image img").css("width", width + "px").css("height", height + "px");
    				}
    			});
    
    		});
    	});
    
    </script>

**效果图：**

![381128-20170525160029341-1549495072.png][]

**完整示例下载：**

[CSDN下载][CSDN]

参考：

[https://www.zhihu.com/question/48217555][https_www.zhihu.com_question_48217555]

转载于:https://www.cnblogs.com/52php/p/6904312.html

[https_github.com_niklasvh_html2canvas]: https://github.com/niklasvh/html2canvas
[381128-20170525160029341-1549495072.png]: /images/20210724/f15fd64bbb65460781e56c9ad862f4b8.png
[CSDN]: http://download.csdn.net/detail/wenjianbao/9852133
[https_www.zhihu.com_question_48217555]: https://www.zhihu.com/question/48217555