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

以前兴趣写的一个简单html截图功能，现在分享出来，参考。

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

效果图：

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

1、需要html2canvas库，自己找个或者在下面下载

2、主要实现代码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 ><div ><div ><div ></div><ul ><li><a onclick="closeps(event)">关闭</a></li><li ><a  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);
        }
}

3、简单使用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 >
                        <div  >
                                <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>

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

源代码下载地址：

点击下载代码