使用html2canvas库实现一个简单截图功能，还需优化

  之前兴趣写的一个简单html截图功能，如今分享出来，参考。

  使用html2canvas库实现，功能简单，待优化。。。

  效果图：

   

 

功能简单，代码也简单。。

一、须要html2canvas库，本身找个或者在下面下载

二、主要实现代码SnippingTool.js

/**
 * Create by 广信-zhoujie
 * Create Date 2018/3/29 16:19
 * Describe 截图工具
 * Version 1.0
 */

//开启截图
var psnode;//截图节点
function startPrintps(node){
	psnode = node;
	if($("#psbg").length > 0){
		$("#psbg").css("display", "block");
	}else{
		//建立截图面板并添加到body节点最后面
		var printpsPanel = '<div id="psbg"><div id="printrange"><div id="printfull"><div id="printcontent"></div><ul id="printbtn"><li><a onclick="closeps(event)">关闭</a></li><li style="display: none;"><a id="downloadps" onclick="closeps(event)">下载图片</a></li><li><a onclick="resetps(event)">重置</a></li><li><a onclick="completeps(event)">完成</a></li></ul></div></div></div>';
		$(document.body).append(printpsPanel);
		//赋值样式
		var w = $(window).width();
		var h = $(window).height();
		$("#psbg").attr("style", "margin:0;padding:0;z-index: 19950529;display: block;width: "+(w-4)+"px;height: "+(h-4)+"px;background: transparent;overflow: hidden;position: absolute;top: 0px;left: 0px;border: 2px solid #0066FF;");
		$("#psbg #printrange").attr("style", "margin:0;padding:0;z-index: 19950529;width: 0px;height: 0px;box-shadow: rgba(59,59,59,0.5) 0 0 0 2018px;display: inline-block;position: absolute;left: 30%;top: 30%;cursor: move;border: 1px solid #CC0000;");
		$("#psbg #printfull").attr("style", "margin:0;padding:0;width: 100%;height: 100%;position: relative;");
		$("#psbg #printcontent").attr("style", "margin:0;padding:0;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;");
		$("#psbg #printbtn").attr("style", "margin:0;padding:0;display: none;z-index: 1004;font-size: 14px;position: absolute;top: 0px;left: 0px;background-color: #0066FF;");
		$("#psbg #printbtn li").attr("style", "margin:0;padding:0;display: block;float: left;padding:5px;width: 32px;");
		$("#psbg #printbtn li:nth-child(2)").css("display", "none");
		$("#psbg #printbtn li:nth-child(2)").css("width", "58px");
		$("#psbg #printbtn li a").attr("style", "margin:0;padding:0;cursor: pointer;color: #FFF;text-decoration: none;");
	}
	pointToRecDrag(document.getElementById("printrange"));//注册截图事件
}
//完成截图
function completeps(e){
	isCanDrag = false;//禁止拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	//生成图片
	var prleft = $("#printrange").css("left");
	var prtop = $("#printrange").css("top");
	var startx = prleft.substring(0, prleft.length-2);
	var starty = prtop.substring(0, prtop.length-2);
	var imgw = $("#printrange").width();
	var imgh = $("#printrange").height();
	convertTHtml2Canvas(startx, starty, imgw, imgh);
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "none");
	});
	$("#printbtn li:first-child").css("display", "block");
	$("#printbtn li:nth-child(2)").css("display", "block");
	$("#printbtn").css("left", ($("#printrange").width()-110) + "px");
}
//关闭截图
function closeps(e){
	isCanDrag = true;//容许拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	$("#printbtn").css("display", "none");
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "block");
	});
	$("#printbtn li:nth-child(2)").css("display", "none");
	$("#printbtn").css("left", ($("#printrange").width()-120) + "px");
	$("#printrange").css("width", "0px");
	$("#printrange").css("height", "0px");
	//还原背景
	$("#printcontent").css("background", "none");
	$("#psbg").css("background", "none");
	$("#psbg").css("display", "none");
}
//重置
function resetps(e){
	isCanDrag = true;//容许拖拽
	e.stopPropagation();//阻止冒泡
	removeSetNodeEvent(document.getElementById("printrange"), 'onmousedown', drag);//注销事件
	$("#printbtn").css("display", "none");
	//显示按钮				
	$.each($("#printbtn li"), function(index, obj){
		$(obj).css("display", "block");
	});
	$("#printbtn li:nth-child(2)").css("display", "none");
	$("#printbtn").css("left", ($("#printrange").width()-120) + "px");
	$("#printrange").css("width", "0px");
	$("#printrange").css("height", "0px");
	//还原背景
	$("#printcontent").css("background", "none");
	$("#psbg").css("background", "none");
	//再从新注册事件
	pointToRecDrag(document.getElementById("printrange"));
}
//Html转换Canvas
function convertTHtml2Canvas(startx, starty, imgw, imgh) { 
	$("#psbg").css("display", "none");
	html2canvas(psnode, { allowTaint: true, taintTest: true }).then(function(canvas) {
    var img = convertTCanvasToImage(canvas);//转换canvas获得img·这时img是$("#divpic")范围的
    $("#psbg").css("background", "url(" + img.src + ") no-repeat");
    $("#psbg").css("background-position", "-2px -2px");
    //img加载时···截取特定部分
    img.onload = function() {
    	$("#psbg").css("display", "block");
	    img.onload = null;
	    canvas = convertTImageToCanvas(img, Number(startx)+3, Number(starty)+3, imgw, imgh);//选定范围从新绘制canvas
    	img = convertTCanvasToImage(canvas);//canvas再转换img···截取到特定部分的图片
    	var imgsrc = img.src;//获取img的src
    	$("#printcontent").css("background", "url(" + imgsrc + ") no-repeat");
    	$("#printcontent").css("background-position", "0px 0px");
    	//下载图片
			$('#downloadps').attr('href', imgsrc); //设置路径
			$('#downloadps').attr('download', '截图.png'); //设置下载图片名称
    }
  });
}
//canvas转换图片，返回图片
function convertTCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png", 0.1);
	return image;
}
//图片转换canvas，返回canvas
function convertTImageToCanvas(image, startX, startY, width, height) {
	var canvas = document.createElement("canvas");
	canvas.width = width;
	canvas.height = height;
	canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
	return canvas;
}
//拉框截图方法·jQuery
function pointToRecDrag(dragger){
	$("#psbg").on("mousedown", function(event){
		var w = $(window).width();
		var h = $(window).height();
		var clickX = event.pageX;
		var clickY = event.pageY;
		$(dragger).width("0px");
		$(dragger).height("0px");
		var draggerw = $(dragger).width();
		var draggerh = $(dragger).height();
		$(dragger).css("left", clickX + "px");
		$(dragger).css("top", clickY + "px");
		$("#psbg").on("mousemove", function(e){
			var mouseX = e.pageX;
			var mouseY = e.pageY;
			var difw = mouseX - clickX;//鼠标移动像素大小
			var difh = mouseY - clickY;
			if(difw<0 && difh<0){
				//向左上截图
				$(dragger).css("left", (clickX+difw) + "px");
				$(dragger).css("top", (clickY+difh) + "px");
			}else if(difw>0 && difh<0){
				//向右上截图
				$(dragger).css("top", (clickY+difh) + "px");
			}else if(difw<0 && difh>0){
				//向左下截图
				$(dragger).css("left", (clickX+difw) + "px");
			}else{
				//向右下截图
				$(dragger).css("left", clickX + "px");
				$(dragger).css("top", clickY + "px");
			}
			difw = Math.abs(difw); //取绝对值
			difh = Math.abs(difh);
			$(dragger).width(draggerw + difw + "px");
			$(dragger).height(draggerh + difh + "px");
		});
		$("#psbg").on("mouseup", function(ev){
			var mouseX = ev.pageX;
			var mouseY = ev.pageY;
			var difw = mouseX - clickX;//鼠标移动像素大小
			var difh = mouseY - clickY;
			//具体经过canvas截取img，直接赋值给dragger，而后就能够下载保存
			if(difw<0 && difh<0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else if(difw>0 && difh<0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else if(difw<0 && difh>0){
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}else{
				//按钮位置
				$("#printbtn").css("left", ($(dragger).width()-127) + "px");
				$("#printbtn").css("top", ($(dragger).height()+1) + "px");
				if((mouseY + 4 + 28) > h){
					$("#printbtn").css("top", ($(dragger).height()-28) + "px");
				}
			}
			$("#printbtn").css("display", "block");//按钮
			//移除截图事件
			$("#psbg").off("mousemove");
			$("#psbg").off("mousedown");
			$("#psbg").off("mouseup");
			//注册拖框事件
			dragNodeElement(document.getElementById("printrange"));
		});
	});
}
//拖拽方法·js
var isCanDrag = true;//是否容许拖拉
var drag; //拖拽对象
function dragNodeElement(dragger) {
	if(isCanDrag){
		var w = document.documentElement.clientWidth || document.body.clientWidth;
		var h = document.documentElement.clientHeight || document.body.clientHeight;
		drag = bindTNodeEvent(dragger, 'onmousedown', function(e) {
			var printrangew = $("#printrange").width();
			var printrangeh = $("#printrange").height();
			e = e || event;
			var mouseX = e.clientX || e.pageX;
			var mouseY = e.clientY || e.pageY;
			var objStyle = dragger.currentStyle || window.getComputedStyle(dragger, null);
			var objX = parseInt(objStyle.left) || 0;
			var objY = parseInt(objStyle.top) || 0;
			var limitX = mouseX - objX;
			var limitY = mouseY - objY;
			if(!dragger.onDrag) {
				dragger.onDrag = bindTNodeEvent(document, 'onmousemove', function(e) {
					e = e || event;
					dragger.style.left = ((e.clientX || e.pageX) - limitX) + 'px';
					dragger.style.top = ((e.clientY || e.pageY) - limitY) + 'px';
					if(h - ((e.clientY || e.pageY) - limitY + printrangeh + 6) < 28){
						$("#printbtn").css("top", ($(dragger).height()-28) + "px");
					}else{
						$("#printbtn").css("top", ($(dragger).height()+1) + "px");
					}
					if(parseInt(dragger.style.left) <= 2) {
						dragger.style.left = 2 + "px";
					}
					if(parseInt(dragger.style.left) >= (w - printrangew - 6)) {
						dragger.style.left = (w - printrangew - 6) + "px";
					}
					if(parseInt(dragger.style.top) >= (h - printrangeh - 6)) {
						dragger.style.top = (h - printrangeh - 6) + "px";
					}
					if(parseInt(dragger.style.top) <= 2) {
						dragger.style.top = 2 + "px";
					}
				});
				dragger.onDragEnd = bindTNodeEvent(document, 'onmouseup', function() {
					removeSetNodeEvent(document, 'onmousemove', dragger.onDrag);
					removeSetNodeEvent(document, 'onmouseup', dragger.onDragEnd);
					try {
						delete dragger.onDrag;
						delete dragger.onDragEnd;
					} catch(e) {
						dragger.removeAttribute('onDrag');
						dragger.removeAttribute('onDragEnd');
					}
				});
			}
		});
	}
}
//添加事件
function bindTNodeEvent(node, eventType, callback) {
	if(node.attachEvent) {
		if(eventType.indexOf('on')) { eventType = 'on' + eventType }
		node.attachEvent(eventType, callback);
	} else {
		if(!eventType.indexOf('on')) {
			eventType = eventType.substring(2, eventType.length);
		}
		node.addEventListener(eventType, callback, false);
	}
	return callback;
}
//移除事件
function removeSetNodeEvent(node, eventType, callback) {
	if(node.detachEvent) {
		if(eventType.indexOf('on')) { eventType = 'on' + eventType }
		node.detachEvent(eventType, callback);
	} else {
		if(!eventType.indexOf('on')) {
			eventType = eventType.substring(2, eventType.length);
		}
		node.removeEventListener(eventType, callback, false);
	}
}

 

三、简单使用demo：SnippingTool.html

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>截图</title>
		<script src="js/jquery.2.1.4.min.js"></script>
		<script src="js/html2canvas.js"></script>
		<script src="js/SnippingTool.js"></script>
		<!-- box-shadow：http://www.w3school.com.cn/cssref/pr_box-shadow.asp -->
	</head>
	<body>
		<div id="container">
			<div id="content" style="margin: 10px;">
				<img src="img/grass.png" width="1000px" height="400px"/>
				<p>What do you do every day?What have you gained?</p>
			</div>
		</div>
		<button onclick="start()">截图</button>
	</body>
	
	<script type="text/javascript">
		function start(){
			//使用方法
			startPrintps($("body"));//截图,参数body对象
		}
	</script>
</html>

 

 

 

以上就代码了，就这样啦，仅供参考学习。。。

 

源代码下载地址：

点击下载代码