JS實現網頁選取截屏保存+打印功能(轉)

時間 2019-11-12

標籤實現網頁選取截屏保存打印功能欄目 JavaScript 简体版

原文原文鏈接

源碼地址：

1.1 肯定截圖選取範圍

用戶在開始截圖後，須要在頁面上選取一個截圖範圍，而且能夠直觀的看到，相似以下效果：javascript

image

咱們的選取範圍就是鼠標開始按下的那個點到鼠標拖動而後鬆開的那個點之間所組成的矩形。
爲了能直觀看到咱們選取的範圍，咱們將這個矩形框隨着鼠標拖動給畫出來，利用canvas便可，爲了方便繪製，這裏使用了jcanvas。html

1.2 將選取範圍內的網頁生成截圖

如何將選取框範圍內的網頁內容變成圖像呢，咱們可使用html2canvas.js，html2canvas能夠將頁面中的DOM元素生成canvas，是將網頁生成圖像的很是好的一個選擇。使用很是簡單:java

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

上面的代碼就能夠將body轉成canvas。html2canvas使用到了Promise，得確保你的瀏覽器支持。
html2canvas雖然能夠將指定元素轉成canvas，有了canvas咱們就能夠輕易的生成圖像。可是並不能知足將選取框範圍內的內容轉成canvas的需求，選取框內可能有多個元素，而且多是多個不完整的元素，元素只有部分。
咱們能夠先將body整個轉成canvas，而後將這個canvas進行剪裁（或生成image後剪裁），將選取框範圍的內容剪裁出來。很簡單，使用drawImage便可。
drawImage 方法容許在 canvas 中插入其餘圖像( img 和 canvas 元素) 。drawImage函數有三種函數原型：jquery

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

2 打印

打印使用 jquery.print.js ，jquery.print.js是一款能夠實現網頁打印的插件，實用的方法很是簡單。相似html2canvas能夠轉換元素爲canvas這樣，它能夠選取元素進行部分打印。git

$(".print").click(function(){
    $(".need_print").print();
});

2 完整實現

建立screenshotsPrint.js,內容以下：github

/**
 * 默認畫筆線寬
 * @type {number}
 */
var defaultStrokeWidth = 1; //畫矩形選取框的線寬

/**
 * 選取劃線的canvasExt
 * @type {{drawRect: canvasExt.drawRect}}
 */
var canvasExt = {
    /**
     *  畫矩形
     * @param canvasId canvasId
     * @param penColor 畫筆顏色
     * @param strokeWidth 線寬
     */
    drawRect: function (canvasId, penColor, strokeWidth) {
        var that = this;

        that.penColor = penColor;
        that.penWidth = strokeWidth;
        var canvas = document.getElementById(canvasId);
        //canvas 的矩形框
        var canvasRect = canvas.getBoundingClientRect();
        //canvas 矩形框的左上角座標
        var canvasLeft = canvasRect.left;
        var canvasTop = canvasRect.top;

        // 要畫的矩形的起點 xy
        var x = 0;
        var y = 0;

        //鼠標點擊按下事件，畫圖準備
        canvas.onmousedown = function(e) {

            //設置畫筆顏色和寬度
            var color = that.penColor;
            var penWidth = that.penWidth;
            // 肯定起點
            x = e.clientX - canvasLeft;
            y = e.clientY - canvasTop;
            // 添加layer
            $("#"+canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name:'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: 1,
                height: 1
            });
            // 繪製
            $("#"+canvasId).drawLayers();
            $("#"+canvasId).saveCanvas();

            //鼠標移動事件，畫圖
            canvas.onmousemove = function(e){

                // 要畫的矩形的寬高
                var width = e.clientX-canvasLeft - x;
                var height = e.clientY-canvasTop - y;

                // 清除以前畫的
                $("#"+canvasId).removeLayer('areaLayer');

                $("#"+canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:'areaLayer',
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height
                });

                $("#"+canvasId).drawLayers();
            }
        };
        //鼠標擡起
        canvas.onmouseup=function(e){

            var color = that.penColor;
            var penWidth = that.penWidth;

            canvas.onmousemove = null;

            var width = e.clientX - canvasLeft - x;
            var height = e.clientY- canvasTop - y;

            $("#"+canvasId).removeLayer('areaLayer');

            $("#"+canvasId).addLayer({
                type: 'rectangle',
                strokeStyle: color,
                strokeWidth: penWidth,
                name:'areaLayer',
                fromCenter: false,
                x: x, y: y,
                width: width,
                height: height
            });

            $("#"+canvasId).drawLayers();
            $("#"+canvasId).saveCanvas();

            // 把body轉成canvas
            html2canvas(document.body, {
                scale: 1,
                // allowTaint: true,
                useCORS: true  //跨域使用
            }).then(canvas => {
                var capture_x, capture_y
                if (width > 0) {
                    //從左往右畫
                    capture_x = x + that.penWidth
                }else {
                    //從右往左畫
                    capture_x = x + width + that.penWidth
                }
                if (height > 0) {
                    //從上往下畫
                    capture_y = y + that.penWidth
                }else {
                    //從下往上畫
                    capture_y = y + height + that.penWidth
                }
                printClip(canvas, capture_x, capture_y, Math.abs(width), Math.abs(height))
            });
            // 移除畫的選取框
            $("#"+canvasId).removeLayer('areaLayer');
            // 隱藏用於華畫取框的canvas
            $("#"+canvasId).hide()
        }
    }
};

/**
 * 選取截屏
 * @param canvasId
 */
function clipScreenshots(canvasId){
    canvasExt.drawRect(canvasId, "red", defaultStrokeWidth);
}

/**
 * 打印截取區域
 * @param canvas 截取的canvas
 * @param capture_x 截取的起點x
 * @param capture_y 截取的起點y
 * @param capture_width 截取的起點寬
 * @param capture_height 截取的起點高
 */
function printClip(canvas, capture_x, capture_y, capture_width, capture_height) {
    // 建立一個用於截取的canvas
    var clipCanvas = document.createElement('canvas')
    clipCanvas.width = capture_width
    clipCanvas.height = capture_height
    // 截取
    clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
    var clipImgBase64 = clipCanvas.toDataURL()
    // 生成圖片
    var clipImg = new Image()
    clipImg.src = clipImgBase64
    var con = confirm('打印截圖嗎?取消則保存截圖')
    if (con) {
        $(clipImg).print()
    }else {
        downloadIamge(clipImgBase64)
    }
}

/**
 * 下載保存圖片
 * @param imgUrl 圖片地址
 */
function downloadIamge(imgUrl) {
    // 圖片保存有不少方式，這裏使用了一種投機的簡單方法。
    // 生成一個a元素
    var a = document.createElement('a')
    // 建立一個單擊事件
    var event = new MouseEvent('click')
    // 生成文件名稱
    var timestamp = new Date().getTime();
    var name = imgUrl.substring(22, 30) + timestamp + '.png';
    a.download = name
    // 將生成的URL設置爲a.href屬性
    a.href = imgUrl;
    // 觸發a的單擊事件 開始下載
    a.dispatchEvent(event);
}

在demo.html中進行使用canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試截取保存或打印</title>
    <script type="text/javascript" src="libs/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="libs/html2canvas.js"></script>
    <script type="text/javascript" src="libs/jQuery.print.js"></script>
    <script type="text/javascript" src="libs/jcanvas.min.js"></script>
    <script type="text/javascript" src="js/screenshotsPrint.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        .print {
            position: relative;
            z-index: 100;
        }
        h1 {
            color: orangered;
        }
        h2 {
            color: darkblue;
        }
        h2 {
            color: forestgreen;
        }
        #bg_canvas {
            position: absolute;
            z-index: 500;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<button class="print">開始截圖</button>
<div>
    <h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    <h2>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</h2>
    <h3>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h3>
    <br/>
    <p>這是一張跨域圖片</p>
    <img src="http://p7.qhimg.com/t01ceede0272d4b5a8b.png" alt="來個跨區的圖片">
</div>
<!-- 用於畫選取框的canvas -->
<canvas id="bg_canvas" width="100%" height="100%" />
<script>
    $(function(){
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        // 更新canvas寬高
        $("#bg_canvas").attr("width", clientWidth);
        $("#bg_canvas").attr("height", clientHeight);
        $("#bg_canvas").hide();
        $(".print").click(function(){
            $("#bg_canvas").show()
            alert('如今你可使用鼠標拖拽選取打印區域，鬆開後完成')
            //調用選取截屏
            clipScreenshots("bg_canvas");
        });


    });
</script>
</body>
</html>

做者：石文文的簡書連接：https://www.jianshu.com/p/8c43576bdbe3 來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。