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

官网：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>

效果图：

完整示例下载：

CSDN下载

参考：

https://www.zhihu.com/question/48217555

微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案的更多相关文章

  1. Jenkins管理插件（备份插件）

    Jenkins管理插件 为了让所有的插件在 Jenkins 内可用,所有插件的列表可以访问链接 − https://wiki.jenkins-ci.org/display/JENKINS/Plugin ...

  2. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  3. html2canvas html截图插件

    以下我总结了一些注意事项,在代码中注释了,仅供参考. html2canvas.js点击付:完整使用的demo ,如下: <!DOCTYPE html><html lang=" ...

  4. 网页转图片--- html2canvas截图

    最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑.特此总结一下,顺便分享一下demo: 链接:https://pan.baidu.com/s/1o98UBJO 密码: ...

  5. 微信小程序template富文本插件image宽度被js强制设置

    这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...

  6. 有哪些可以将网页另存图片的chrome插件？功能类似网页截图

    说实话chrome插件哪些,想找出最好最强的还真不容易,各有千秋.今天就概括性介绍下一些网页打印,图片另存为等常见需求的chrome插件.1.Awesome ScreenshotAwesome scr ...

  7. 一个可以自动生成css样式的插件happycss

    一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取cl ...

  8. 微信小程序生成指定页面小程序码海报图片分享思路总结

    本博客主要说下思路,具体代码不贴 1.考虑到组件复用,所以我把它做成一个自定义的组件 <my-poster id="getPoster" avater="{{ima ...

  9. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

随机推荐

  1. 基于Window10搭建android开发环境

    一.安装JDK 1.下载(网页链接) 2.双击安装文件进行安装,安装在合适目录,例如:D:\Java\jdk1.8.0_201与D:\Java\jre1.8.0_201 3.设置环境变量 3.1.JA ...

  2. spring-boot-mybatis-多数据源

    sql 语句 DROP TABLE IF EXISTS `users`; CREATE TABLE `users` ( `id` bigint(20) NOT NULL AUTO_INCREMENT ...

  3. df -h执行卡住不动问题解决【转】

    昨天生产环境报日志写不进去了,因此 登陆线上环境后,习惯用df -h命令查看空间使用情况,结果发现该命令执行半天也没有返回. 因此使用mount命令查看该机器上的目录: [conversant@swi ...

  4. MySql 死锁时的一种解决办法【转】

    转自:http://blog.csdn.net/mchdba/article/details/38313881 之前也遇到一次,今天又遇到了这个问题,所以这次必须解决,网上找到这篇文章帮了大忙,方便以 ...

  5. 【题解】BZOJ 1901: Zju2112 Dynamic Rankings

    题目传送门(权限题) 一道类似的非权限题 题意 N个数的序列,每次修改一个数或者询问区间里的第K小.可以离线. 简要做法 假如要求在线,可以树状数组套个线段树~ 但是这题是可以离线的,就可以乱搞整体二 ...

  6. 浅谈SpringMVC

    M--模型(实体vo[视图对象]与页面对面) V--视图(JSP,,velocity,FreeMarker,html,thymeleaf) C--控制器(servlet,if语句控制M数据跳转到V进行 ...

  7. Java编程的逻辑 (20) - 为什么要有抽象类？

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  8. Java编程的逻辑 (21) - 内部类的本质

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  9. [转] 对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

  10. ClouderaManager中Event Server报No such file or directory

    错误日志如下: 2015-06-24 06:13:10,176 ERROR com.cloudera.cmf.eventcatcher.server.EventCatcherService: Erro ...