baoshi-was/resources/js/utilities/drawCheckbox.js

$(function(){
    let canvas = $("#bg_canvas");
    if (canvas.length===0){
        let canvas = $("<canvas id='bg_canvas' style='position: absolute;z-index: 500;left: 0;top: 0;width: 100%;height: 100%'></canvas>");
        $("body").append(canvas);
    }
    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();
});

/**
 * 默认画笔线宽
 * @type {number}
 */
var defaultStrokeWidth = 1; //画矩形选取框的线宽

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
                }
                clipInfo = {
                    "x":capture_x,
                    "y":capture_y,
                    "w":Math.abs(width),
                    "h":Math.abs(height),
                };
                afterExt();
            });
            // 移除画的选取框
            $("#"+canvasId).removeLayer('areaLayer');
            // 隐藏用于华画取框的canvas
            $("#"+canvasId).hide()
        }
    }
};

var afterExt = function (){};
var clipInfo = {};
/**
 * 选取截屏
 * @param canvasId
 */
function clipScreenshots(){
    $("#bg_canvas").show()
    canvasExt.drawRect("bg_canvas", "red", defaultStrokeWidth);
}