以下我总结了一些注意事项，在代码中注释了，仅供参考。

html2canvas.js点击
付：完整使用的demo ,如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>html2Canvas demo</title>
<script>
document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
</script>
<style>
body,
html,
div,
p,
ul,
li,
a,
img,
span,
button,
header,
footer,
section {
padding: 0;
margin: 0;
}

*, :before, :after {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

::-webkit-scrollbar {
width: 0;
opacity: 0;
}

button{
font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
body {
font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
color: #000;
background-color: #f5f5f5;
-webkit-overflow-scrolling: touch;
}
.share-container {
padding-top: 0.72rem;
width: 2.35rem;
margin: 0 auto;
}

.share-content {
padding-top: 0.72rem;
height:3rem;
background-color: blue;
border-radius: 5px;
width: 100%;
}
.text{
font-size: 0.36rem;
color: #f2f2f2;
}
.btn-share {
width: 64%;
height: 0.89rem;
background-color: #3baaff;
border-radius: 0.89rem;
border: 1px solid #3baaff;
color: white;
font-size: 0.36rem;
margin: 0.75rem 0 0.67rem;
}
.btn-share:active{
background-color: #1b96c8;
}
</style>
</head>
<body>
<section class="main-container">
<header class="share-container" id="shareContainer">
<div class="share-content" id="shareContent">
<div class="text">
<p>文字，图片等内容</p>
</div>
</div>
</header>
<footer class="footer-center">
<button class="btn-share" id="btnShare">截&nbsp;图</button>
</footer>
</section>

<script src="js/html2canvas.js"></script>
<script>

//定义查找元素方法
function $(selector) {
return document.querySelector(selector);
}
var main = {
init:function(){
main.setListener();
},
//设置监听事件
setListener:function(){
var btnShare = document.getElementById("btnShare");
btnShare.onclick = function(){
main.html2Canvas();
}
},
//获取像素密度
getPixelRatio:function(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素，生成截图canvas
html2Canvas: function () {
var shareContent = $("#shareContent");// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生）dom 宽度
var height = shareContent.offsetHeight; // 获取(原生）dom 高
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量

var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
context.scale(scaleBy, scaleBy);

var opts = {
allowTaint:true,//允许加载跨域的图片
tainttest:true, //检测每张图片都已经加载完成
scale:scaleBy, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日志开关，发布的时候记得改成false
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
console.log("html2canvas");
var body = document.getElementsByTagName("body");
body[0].appendChild(canvas);
});
}
};

//最后运行代码
main.init();

</script>
</body>
</html>



运行上面的demo 前有以下 注意点：


  1. 注意元素的样式的使用：
    外层元素width 不能使用百分比 ,避免导致图片与文字间缩放比例问题
    

    错误使用方式如
    
 .container {
    
       width:50%;
    
       margin: 0 auto;
    
 }
    



需要改成如：


 .container {

       width:300px;

       margin: 0 auto;

 } 
												


											
html2canvas html截图插件的更多相关文章
	

    
								
  1. html2canvas JS截图插件
		
    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...
    
		
    2. 
						
  2. html2canvas 网页截图 下载 上传
		
    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...
    
		
    3. 
						
  3. IText&Html2canvas js截图 绘制 导出PDF
		
    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
    
		
    4. 
						
  4. chrome比较好用的网站整页（超长网页）截图插件
		
    chrome比较好用的网站整页(超长网页)截图插件:fireshot capture 试用过比较好用
    
		
    5. 
						
  5. js实现html转pdf+html2canvas.js截图不全的问题
		
    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...
    
		
    6. 
						
  6. 微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案
		
    html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的  ...
    
		
    7. 
						
  7. jquery截图插件的使用
		
    首先感谢http://www.htmleaf.com/Demo/201504211717.html这款插件. 使用之初,对于插件的结构很是糊涂,首先文件的核心是cropper.js,其次才是mian. ...
    
		
    8. 
						
  8. JS 使用html2canvas实现截图功能的问题记录和解决方案
		
    在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了: 下面给大家分享下: 1."图片资源跨域",导致无法截图. 浏览器会提示下面的错误 DOMException: ...
    
		
    9. 
						
  9. html2canvas滚动截图
		
    滚动截图 项目需求要进行动态的滚动截图搜索一下发现html2canvas可以实现截图,但是滚动截图网上搜罗了一遍发现不是很完善所以记录下 首先npm一下安装依赖: npm install html2c ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [Tensorflow实战Google深度学习框架]笔记4
			
    本系列为Tensorflow实战Google深度学习框架知识笔记,仅为博主看书过程中觉得较为重要的知识点,简单摘要下来,内容较为零散,请见谅. 2017-11-06 [第五章] MNIST数字识别问题 ...
    
			
    2. 
						
  2. 微信连wifi，中文ssid报Invalid sign tosign错误
			
    Invalid sign tosign错误如上: 是微信官方接受和回传的问题,改固定字符解决: 比如将ssid固定修改为字符串‘ssid’即可:
    
			
    3. 
						
  3. 24. dfs数的路径查找
			
    输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径. 路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. (注意: 在返回值的list中,数组长度大的数组 ...
    
			
    4. 
						
  4. Cortex-M3的一些概念
			
    [工作模式] 线程模式(Thread mode):处理器复位或异常退出时为此模式.此模式下的代码可以是特权代码也可以是用户代码,通过CONTROL[0]控制.处理模式(Handler mode):出现 ...
    
			
    5. 
						
  5. BIOS + MBR > UEFI + GPT
			
    BIOS + MBR > UEFI + GPT硬件接口系统与磁盘分区UEFI用于取代老旧的BIOS,而GPT则取代老旧的MBR. 名词解释: BIOS (Basic Input/Output S ...
    
			
    6. 
						
  6. PTA寒假三
			
    抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C ...
    
			
    7. 
						
  7. 数学:确定性的丧失 (M·克莱因 著)
			
    第一章 数学真理的起源 (已看) 第二章 数学真理的繁荣 (已看) 第三章 科学的数学化 (已看) 第四章 第一场灾难:真理的丧失 (已看) 第五章 一门逻辑科学不合逻辑的发展 (已看) 第六章 分析 ...
    
			
    8. 
						
  8. [visual studio]visual studio 2017激活码
			
    企业版:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 专业版:KBJFW-NXHK6-W4WJM-CRMQB-G3CDH
    
			
    9. 
						
  9. NotePad++ 配置Python工作环境
			
    下载地址:https://notepad-plus-plus.org/ Current Version: 7.5.3 sss 显示空格和指标符 为什么建议这么作?因为判断Python语句是否在同一层次 ...
    
			
    10. 
						
  10. BCC校验小知识
			
    BCC校验其实是奇偶校验的一种,但也是经常使用并且效率较高的一种.所谓BCC校验法,就是在发送前和发送后分别把BCC以前包括ETX字符的所有字符按位异或后,按要求变换(增加或去除一个固定的值)后所得到 ...
    
			
    11.