美文网首页
基于canvas的截图工具

基于canvas的截图工具

作者: Eason_0cce | 来源:发表于2023-07-09 18:42 被阅读0次

预览：
1、矩形截图


image.png

2、鼠标随意绘制截图


image.png
3、坐标点围成多边形截图
image.png
全部代码：

线条颜色也可以自定义，方便圈图看得清


image.png 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="board">
        <div class="tool" id="tool">
            <div class='box'>
                <input id="color" type="color" style="margin-bottom:10px" value="#000"/>
                <div id="color-list" style="margin-bottom:20px">
                    <span color="#000000" style="background-color:#000000"></span>
                    <span color="#FF0000" style="background-color:#FF0000"></span>
                    <span color="#00FF00" style="background-color:#00FF00"></span>
                    <span color="#0000FF" style="background-color:#0000FF"></span>
                    <span color="#FFFF00" style="background-color:#FFFF00"></span>
                    <span color="#FFFFFF" style="background-color:#FFFFFF; border:1px solid #eee"></span>
                </div>
            </div>
            <div class='box'>
                <svg id="rectangleMode" t="1688557260302" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2862" width="40" height="40">
                    <path
                        d="M854.6176 1024v-114.2272H169.3824V1024H10.3552v-159.0016h114.1504V159.0272H10.3552V0h159.0272v114.688h685.2352V0h159.0272v159.0272H899.1872v705.9712h114.4576V1024zM179.6736 854.5024h664.3456V169.856H182.592z"
                        fill="#333333" p-id="2863"></path>
                </svg>
                <svg id="mouseMode" t="1688557289470" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4712" width="40" height="40">
                    <path
                        d="M811.008 768.170667v106.666666a106.666667 106.666667 0 0 1-106.666667 106.666667h-128a21.248 21.248 0 0 1-21.333333-21.333333V938.666667c0-75.52-43.306667-127.872-128.341333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461333a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a106.666667 106.666667 0 0 1-106.666667-106.709333l0.426667-128a21.333333 21.333333 0 0 1 21.333333-21.248h42.666667c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128H64.213333a21.333333 21.333333 0 0 1-21.333333-21.333333v-128a106.666667 106.666667 0 0 1 106.666667-106.666667h106.368V213.333333c0-97.066667 61.013333-170.538667 170.752-170.538666 107.008 0 171.392 75.434667 171.392 170.538666v0.128h106.837333a106.666667 106.666667 0 0 1 106.666667 106.666667v106.666667h20.778666c84.053333 0 149.077333 75.008 149.077334 170.666666 0 95.104-65.28 170.666667-149.077334 170.666667h-21.333333z m-42.666667-20.736v-0.597334a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128h-42.666666a21.333333 21.333333 0 0 1-20.778667-26.325333V320.128a64 64 0 0 0-64-64h-126.890667a21.76 21.76 0 0 1-1.28 0 21.333333 21.333333 0 0 1-21.333333-21.333333V213.333333c0-72.917333-46.933333-127.872-128.725333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461334a21.248 21.248 0 0 1-21.333333 21.333333H149.546667a64 64 0 0 0-64 64v106.666667h21.461333c84.053333 0 149.077333 75.008 149.077333 170.666666 0 95.104-65.28 170.666667-149.077333 170.666667h-21.418667l-0.341333 106.666667a64 64 0 0 0 64 64h106.666667V938.666667c0-97.066667 61.013333-170.538667 170.752-170.538667 110.592 0 171.008 73.002667 171.008 170.538667v0.170666h106.666666a64 64 0 0 0 64-64v-127.402666z"
                        p-id="4713"></path>
                </svg>

                <svg id="pathMode" t="1688713705657" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5968" width="40" height="40">
                    <path
                        d="M661.333333 128a128 128 0 0 1 82.773334 225.621333l56.832 117.482667a117.333333 117.333333 0 1 1-57.578667 27.882667l-56.832-117.461334a128.618667 128.618667 0 0 1-43.52 1.173334l-133.546667 266.368a128 128 0 1 1-182.186666 16.938666l-103.445334-137.514666a106.666667 106.666667 0 1 1 52.48-36.48l102.293334 135.978666a128.597333 128.597333 0 0 1 73.578666-6.784l131.861334-263.168A128 128 0 0 1 661.333333 128zM426.666667 688.490667a58.176 58.176 0 1 0 0 116.352 58.176 58.176 0 0 0 0-116.352zM821.333333 533.333333a53.333333 53.333333 0 1 0 0 106.666667 53.333333 53.333333 0 0 0 0-106.666667zM192 378.176a48.490667 48.490667 0 1 0 0 96.981333 48.490667 48.490667 0 0 0 0-96.981333z m469.333333-180.352a58.176 58.176 0 1 0 0 116.352 58.176 58.176 0 0 0 0-116.352z"
                        fill="#000000" p-id="5969"></path>
                </svg>
            </div>
            <div class="box" style="border:0">
                <span class="btn" id="crop">存成主图</span>
                <span class="btn" id="crop2">存缩略图</span>
                <span class="btn" id="crop3">保存本地</span>
            </div>
            <canvas id="crop-show" width="200" height="200"></canvas>
            <img id="crop-img" style="none"/>
        </div>
        <canvas id="myCanvas"></canvas>
        <div id="rectangle-board" draggable="false" style="display: none;">
            <div id="rectangle">
                <span id="top-left"></span>
                <span id="top-center"></span>
                <span id="top-right"></span>
                <span id="mid-left"></span>
                <span id="mid-right"></span>
                <span id="bottom-left"></span>
                <span id="bottom-center"></span>
                <span id="bottom-right"></span>
            </div>
        </div>
    </div>
    <script>
        var drawPoints = [];
        var canvas = document.getElementById("myCanvas");
        if (!canvas.getContext) {
            console.log('不支持canvas');
        }
        var ctx = canvas.getContext("2d")
        //创建图片
        var img = new Image();   // 创建一个<img>元素
        var scale = 0;
        var maxWidth = 0;
        var maxHeight = 0;
        var croppMode = "";
        var pathClosed = false;
        img.onload = function () {
            scale = Math.min(this.width, window.innerWidth - 300) / this.width;
            canvas.width = this.width * scale;
            canvas.height = this.height * scale;
            maxWidth = this.width * scale;
            maxHeight = this.height * scale;
            document.querySelector("#rectangle-board").style.width = this.width * scale + 2 + "px";
            document.querySelector("#rectangle-board").style.height = this.height * scale + "px";
            ctx.scale(1, 1)
            ctx.drawImage(img, 0, 0, this.width, this.height, 0, 0, this.width * scale, this.height * scale)//绘制图片
        }
        img.src = 'test.jpg'; // 设置图片源地址

        var moveHander = null;
        var handerX = 0;
        var handerY = 0;
        var originX = 0;
        var originY = 0;
        var handerWidth = 0;
        var handerHeight = 0;
        document.querySelector("#rectangle").addEventListener("mousedown", function (e) {
            originX = e.pageX;
            originY = e.pageY;
            if (e.target && e.target.id) {
                moveHander = e.target.id;
            }
            handerX = this.offsetLeft;
            handerY = this.offsetTop;
            handerWidth = this.clientWidth;
            handerHeight = this.clientHeight;
            // console.log(this.offsetLeft);
        }, false);
        document.querySelector("#rectangle").addEventListener("mouseup", function (e) {
            moveHander = null;
        }, false);
        document.addEventListener("mousemove", function (e) {
            if (moveHander) {
                var distanceX = e.pageX - originX;
                var distanceY = e.pageY - originY;
                if (moveHander == 'rectangle') {
                    var moveDistance = handerX + distanceX;
                    if (moveDistance < 0) {
                        moveDistance = 0;
                    } else if (moveDistance + handerWidth > maxWidth) {
                        moveDistance = maxWidth - handerWidth;
                    }
                    var moveTop = handerY + distanceY;
                    if (moveTop < 0) {
                        moveTop = 0;
                    }
                    document.querySelector("#rectangle").style.left = moveDistance + 'px';
                    document.querySelector("#rectangle").style.top = moveTop + 'px';
                }
                if (moveHander == 'bottom-center' || moveHander == 'bottom-right' || moveHander == 'bottom-left') {
                    var moveHeight = handerHeight + distanceY;
                    if (moveHeight < 34) {
                        moveHeight = 34;
                    }
                    document.querySelector("#rectangle").style.height = moveHeight + 'px';
                }
                if (moveHander == 'top-center' || moveHander == 'top-left' || moveHander == 'top-right') {
                    var moveTop = handerY + distanceY;
                    if (moveTop < 0) {
                        moveTop = 0;
                        distanceY = moveTop - handerY;
                    }
                    var moveHeight = handerHeight - distanceY;
                    if (moveHeight < 34) {
                        moveHeight = 34;
                        moveTop = handerY + (handerHeight - moveHeight);
                    }
                    document.querySelector("#rectangle").style.height = moveHeight + 'px';
                    document.querySelector("#rectangle").style.top = moveTop + 'px';
                }
                if (moveHander == 'mid-left' || moveHander == 'top-left' || moveHander == 'bottom-left') {
                    var moveDistance = handerX + distanceX;
                    if (moveDistance < 0) {
                        moveDistance = 0
                        distanceX = moveDistance - handerX;
                    }
                    var moveWidth = handerWidth - distanceX;
                    if (moveWidth < 34) {
                        moveWidth = 34;
                        moveDistance = handerX + (handerWidth - moveWidth);
                    }
                    document.querySelector("#rectangle").style.width = moveWidth + 'px';
                    document.querySelector("#rectangle").style.left = moveDistance + 'px';
                }
                if (moveHander == 'mid-right' || moveHander == 'top-right' || moveHander == 'bottom-right') {
                    var moveWidth = handerWidth + distanceX;
                    if (moveWidth + handerX > maxWidth) {
                        moveWidth = maxWidth - handerX;
                    }
                    if (moveWidth < 24) {
                        moveWidth = 24;
                    }
                    document.querySelector("#rectangle").style.width = moveWidth + 'px';
                }
                // console.log(moveHander);
            }
        }, false);
        document.addEventListener("mouseup", function () {
            moveHander = null;
        }, false)
        document.querySelector("#rectangleMode").addEventListener("click", function () {
            croppMode = "rectangleMode";
            document.querySelector("#rectangle-board").style.display = "block";
            document.querySelector("#rectangleMode").classList.add("active");
            document.querySelector("#rectangle").style.top = document.documentElement.scrollTop + (window.innerHeight / 2 - 100) + 'px';
            document.querySelector("#rectangle").style.left = maxWidth / 2 - 100 + 'px';
            document.querySelector("#rectangle").style.borderColor = document.querySelector("#color").value;
            document.querySelector("#rectangle").style.width = '200px';
            document.querySelector("#rectangle").style.height = '200px';
            document.querySelector("#mouseMode").classList.remove("active");
            document.querySelector("#pathMode").classList.remove("active");
            clearDraw();
        })
        document.querySelector("#mouseMode").addEventListener("click", function () {
            croppMode = "mouseMode";
            document.querySelector("#rectangle-board").style.display = "none";
            document.querySelector("#rectangleMode").classList.remove("active");
            document.querySelector("#mouseMode").classList.add("active");
            document.querySelector("#pathMode").classList.remove("active");
            clearDraw();
        })
        document.querySelector("#pathMode").addEventListener("click", function () {
            croppMode = "pathMode";
            drawPoints = [];
            document.querySelector("#rectangle-board").style.display = "none";
            document.querySelector("#rectangleMode").classList.remove("active");
            document.querySelector("#mouseMode").classList.remove("active");
            document.querySelector("#pathMode").classList.add("active");
            clearDraw();
        })
        document.addEventListener("keyup", function (e) {
            if (e.keyCode == 27) {
                document.querySelector("#rectangle-board").style.display = "none";
                clearDraw();
            }
        }, false);
        document.querySelector("#color").addEventListener("input", function(){
            changeColor();
        })
        document.querySelector("#color-list").addEventListener("click", function(e){
            if(e.target && e.target.getAttribute("color")){
                document.querySelector("#color").value = e.target.getAttribute("color");
                changeColor();
            }
        }, false);
        document.querySelector("#crop").addEventListener("click", function () {
            doCrop();
        }, false);
        document.querySelector("#crop2").addEventListener("click", function () {
            doCrop();
        }, false);
        document.querySelector("#crop3").addEventListener("click", function () {
            doCrop(true);
        }, false);
        function doCrop(download){
            var canvas = document.getElementById('crop-show');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function () {
                var res = getRectangleShape();
                var rectangleWidth = res.width;
                var rectangleHeight = res.height;
                canvas.width = rectangleWidth;
                canvas.height = rectangleHeight;
                var startX = document.querySelector("#rectangle").offsetLeft;
                var startY = document.querySelector("#rectangle").offsetTop;
                var firstPoint = res.points[0];
                var drawX = firstPoint.x;
                var drawY = firstPoint.x;
                context.beginPath();
                context.moveTo(drawX, drawY);
                res.points.forEach(point => {
                    context.lineTo(point.x, point.y);
                });
                context.clip();
                context.drawImage(image, res.rectanglePoint.x1, res.rectanglePoint.y1, rectangleWidth, rectangleHeight, 0, 0, rectangleWidth, rectangleHeight);
                // clearDraw();

                const base64Img = canvas.toDataURL('image/png');
                document.querySelector("#crop-img").src = base64Img;
                document.querySelector("#crop-img").style.display = "block";
                document.querySelector("#crop-img").style.width = Math.min((window.innerWidth - maxWidth) / 2 -40,rectangleWidth) + 'px';
                if(download){
                    var a = document.createElement('a') // 生成一个a元素
                    //  document.body.appendChild(a)
                    a.download = '截图' // 设置图片名称
                    a.href = base64Img // 将生成的URL设置为a.href属性
                    a.click()
                    a.remove()
                }
            }
            image.src = 'test.jpg';
        }
        function clearDraw() {
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * scale, img.height * scale)//绘制图片
        }
        function getRectangleShape() {
            if (document.querySelector("#rectangleMode").classList.contains("active")) {
                drawPoints = [
                    { x: document.querySelector("#rectangle").offsetLeft, y: document.querySelector("#rectangle").offsetTop },
                    { x: document.querySelector("#rectangle").offsetLeft + document.querySelector("#rectangle").clientWidth, y: document.querySelector("#rectangle").offsetTop },
                    { x: document.querySelector("#rectangle").offsetLeft + document.querySelector("#rectangle").clientWidth, y: document.querySelector("#rectangle").offsetTop + document.querySelector("#rectangle").clientHeight },
                    { x: document.querySelector("#rectangle").offsetLeft, y: document.querySelector("#rectangle").offsetTop + document.querySelector("#rectangle").clientHeight }
                ]
            }
            var rectanglePoint = {
                x1: maxWidth,
                x2: 0,
                y1: maxHeight,
                y2: 0,
            }
            drawPoints.forEach(point => {
                rectanglePoint.x1 = Math.min(point.x, rectanglePoint.x1);
                rectanglePoint.x2 = Math.max(point.x, rectanglePoint.x2);
                rectanglePoint.y1 = Math.min(point.y, rectanglePoint.y1);
                rectanglePoint.y2 = Math.max(point.y, rectanglePoint.y2);
            });
            return {
                rectanglePoint,
                width: rectanglePoint.x2 - rectanglePoint.x1,
                height: rectanglePoint.y2 - rectanglePoint.y1,
                points: drawPoints.map((item) => {
                    return { x: item.x - rectanglePoint.x1, y: item.y - rectanglePoint.y1 }
                })
            }
        }
        function mouseDraw() {
            var x = 0;
            var y = 0;
            var isdrawing = false;
            const cnv = document.getElementById("myCanvas");
            const ctx = cnv.getContext("2d");
            var downX = 0;
            var downY = 0;
            cnv.addEventListener("mousedown", (e) => {
                if (!document.querySelector("#mouseMode").classList.contains("active")) {
                    return false;
                }
                clearDraw();
                x = e.offsetX;
                y = e.offsetY;
                downX = x;
                downY = y;
                isdrawing = true;
                drawPoints = [{
                    x,
                    y
                }];
            });
            cnv.addEventListener("mousemove", (e) => {
                if (!document.querySelector("#mouseMode").classList.contains("active")) {
                    return false;
                }
                if (isdrawing === true) {
                    drawLine(x, y, e.offsetX, e.offsetY);
                    x = e.offsetX;
                    y = e.offsetY;
                }
            });
            cnv.addEventListener("mouseup", (e) => {
                if (!document.querySelector("#mouseMode").classList.contains("active")) {
                    return false;
                }
                if (isdrawing === true) {
                    drawLine(x, y, e.offsetX, e.offsetY);
                    x = 0;
                    y = 0;
                    isdrawing = false;
                }
                drawLine(e.offsetX, e.offsetY, downX, downY);
                // console.log(drawPoints);
            });
            cnv.addEventListener("click", function (e) {
                if (!document.querySelector("#pathMode").classList.contains("active")) {
                    return false;
                }
                if(pathClosed){
                    clearDraw();
                    drawPoints = [];
                    pathClosed = false;
                }
                if (drawPoints[0] && e.offsetX >= drawPoints[0].x - 5 && e.offsetX <= drawPoints[0].x + 5 && e.offsetY >= drawPoints[0].y - 5 && e.offsetY <= drawPoints[0].y + 5) {
                    pathClosed = true;
                    drawPoints.forEach((_point, index) => {
                        if (drawPoints[index + 1]) {
                            drawLine(drawPoints[index].x, drawPoints[index].y, drawPoints[index + 1].x, drawPoints[index + 1].y, true);
                        }
                    });
                    // console.log(drawPoints,[drawPoints[drawPoints.length - 1].x, drawPoints[drawPoints.length - 1].y, drawPoints[0].x, drawPoints[0].y]);
                    drawLine(drawPoints[drawPoints.length - 1].x, drawPoints[drawPoints.length - 1].y, drawPoints[0].x, drawPoints[0].y, true);
                    drawPoints.push({
                        x: drawPoints[0].x,
                        y: drawPoints[0].y
                    });
                    // console.log(drawPoints);
                    return false;
                }
                drawPoints.push({
                    x: e.offsetX,
                    y: e.offsetY
                });
                ctx.beginPath();
                ctx.arc(e.offsetX, e.offsetY, 4, 0, 5 * Math.PI);
                ctx.fillStyle = "white";
                ctx.fill();
                ctx.strokeStyle = document.querySelector("#color").value;
                ctx.stroke();
                // console.log(e.offsetX, e.offsetY);
            });
            function drawLine(x1, y1, x2, y2, auto) {
                if (!auto) {
                    drawPoints.push({
                        x: x2,
                        y: y2
                    });
                }
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = document.querySelector("#color").value;
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
                ctx.closePath();
            }
        }
        function changeColor(){
            clearDraw();
            setTimeout(() => {
                var color = document.querySelector("#color").value;
                if(croppMode == 'rectangleMode'){
                    document.querySelector("#rectangle").style.borderColor = color;
                }else{
                    if(croppMode == 'pathMode'){
                        drawPoints.forEach(point=>{
                                ctx.beginPath();
                                ctx.arc(point.x, point.y, 4, 0, 5 * Math.PI);
                                ctx.fillStyle = "white";
                                ctx.fill();
                                ctx.strokeStyle = color;
                                ctx.stroke();
                        });
                    }
                    ctx.beginPath();
                    ctx.moveTo(drawPoints[0].x,drawPoints[0].y);
                    drawPoints.forEach((point,index)=>{
                        if(index > 0){
                            ctx.lineWidth = 1;
                            ctx.strokeStyle = color;
                            ctx.lineTo(point.x, point.y);
                            ctx.stroke();
                        }
                    })
                    ctx.closePath();
                }
            });
        }
        mouseDraw();
    </script>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #color-list {
        display:flex;
        flex-wrap:wrap;
        padding: 1px;
    }
    #color-list span {
        cursor: pointer;
        display:block;
        width: 14px;
        height: 14px;
        margin:4px 1px;
        box-sizing:border-box;
    }
    .board {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .board .tool {
        width: 60px;
        position: fixed;
        top: 60px;
        right: 60px
    }

    .tool .box {
        padding:5px;
        padding-left:7px;
        width:50px;
        border: 1px solid #ccc;
        margin-bottom:10px
    }

    .tool .box .btn {
        display:block;
        width:100%;
        height:30px;
        line-height:30px;
        border-radius:4px;
        background:#2f54eb;
        color:#fff;
        font-size:12px;
        margin:10px;
        width:60px;
        text-align:center;
        margin-left:-5px;
        cursor: pointer;
    }

    .board .tool svg {
        margin-top:10px;
        margin-left:4px;
        font-weight: bold;
    }

    #crop-img {
        position: fixed;
        top:60px;
        left:10px;
        width:200px;
        height:auto;
    }

    #crop-show {
        position: absolute;
        top: -2000px;
        left: -10000px;
    }

    .board .tool .active path {
        fill: blue;
    }


    #rectangle-board {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        overflow: hidden;
    }

    #rectangle {
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #333;
        width: 200px;
        height: 200px;
        outline: rgba(0, 0, 0, 0.5) 15000000px solid;
    }

    #rectangle span {
        display: flex;
        align-items:center;
        justify-content:center;
        position: absolute;
        border: 2px solid transparent;
        border-color: inherit;
        width: 6px;
        height: 6px;
        color: inherit;
        overflow:hidden;
    }

    #rectangle span::after {
        content: "■";
        width: 22px;
        height: 22px;
        position:absolute;
        top: -25px;
        left: -3px;
        /* background: #333; */
        display: block;
        color: #fff;
        font-size:40px;
    }

    #rectangle #top-left {
        left: -6px;
        top: -6px;
        cursor: nwse-resize;
    }

    #rectangle #top-center {
        left: 50%;
        transform: translateX(-50%);
        top: -6px;
        cursor: n-resize;
    }

    #rectangle #top-right {
        right: -6px;
        top: -6px;
        cursor: nesw-resize;
    }

    #rectangle #mid-left {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: e-resize;
    }

    #rectangle #mid-right {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: e-resize;
    }

    #rectangle #bottom-left {
        left: -6px;
        bottom: -6px;
        cursor: nesw-resize;
    }

    #rectangle #bottom-center {
        left: 50%;
        bottom: -6px;
        transform: translateX(-50%);
        cursor: n-resize;
    }

    #rectangle #bottom-right {
        right: -6px;
        bottom: -6px;
        cursor: nwse-resize;㏂
    }
</style>

</html>

素材图：


test.jpg

相关文章

  • html2canvas屏幕截图

    html2Canvas是 "脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，"附...

  • html2canvas.js网页截图

    screenshot(){ console.log('自动截图') //自动截图 html2canvas($("...

  • chrome 浏览器截长图

    基于 Chrome 浏览器开发者工具截图，进入想截图的网页，ctrl+shift+i 打开开发者工具，分别介绍两种...

  • 基于WPF的截图工具，功能和QQ截图类似

    本项目基于WPF开发，适合于新手上手WPF，里面不涉及到太复杂的用法，都是一些基础绑定等操作。 有关于WPF或者项...

  • 关于表单截图的使用填坑

    前言 进来要进行表单填写完之后进行截图的工作，google了一下找到了html2canvas这款工具。 原理 使用...

  • Echarts 学习笔记

    浏览器画图原理 Canvas基于像素单个 html ，类似于画笔在画布上画画Echarts 基于 Canvas 画...

  • 基于 canvas 实现的一个截图小 demo

    写在最前 记得以前在人人上看到一个分享，讲解基于js的截图方案，详细的不记得了，只记得还挺有意思的貌似用了canv...

  • DataMap使用说明

    (暂时还未完成整个文档) 基于html5Canvas的DataMap定义工具，使用图形化的方式定义从“源数据”到“...

  • win10 屏幕截图、标注工具

    截图工具 快捷键 win + shift + s，截图后无法编辑，自动在剪切板 win10自带截图工具截图工具 快...

  • js实现页面截图及自动下载demo代码

    实现功能：实现页面部分内容截图并且自动下载 html2canvas 传送门：http://html2canvas....

网友评论

      本文标题：基于canvas的截图工具

      本文链接：https://www.haomeiwen.com/subject/bkvsudtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|基于canvas的截图工具|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！