js实现canvas截图功能

关键代码

使用canvas的导出功能和drawImage函数

复制代码

class CropShape{
	cropShape(shape){
            let {x,y,w,h} = shape
            console.log(x,y,w,h)
            const roiCanvas = document.createElement('canvas');
            document.getElementById('app').append(roiCanvas)
            const roiCtx = roiCanvas.getContext('2d');

            roiCanvas.width = w;
            roiCanvas.height = h;
            roiCtx.drawImage(this.stage.image, x, y, w, h, 0, 0, w, h);


            const dataURL = roiCanvas.toDataURL('image/png');
            return dataURL;
        }

	downloadImage(dataURL, filename) {
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
}

使用示例

复制代码

let cimg = new CropShape()
let img = cimg.cropShape({
	x:1,
	y:1,
	w:10,
	h:10
})
cimg.downloadImage(cimg,'result.png')

绘制roi代码 demo

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Screenshot with ROI</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <canvas id="canvas"></canvas>
    <canvas id="roiCanvas" style="display:none;"></canvas>
    <img id="croppedImage" alt="Cropped Image" />

    <script>
        const upload = document.getElementById('upload');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const roiCanvas = document.getElementById('roiCanvas');
        const roiCtx = roiCanvas.getContext('2d');
        const croppedImage = document.getElementById('croppedImage');

        let image = new Image();
        let startX, startY, endX, endY;
        let isDrawing = false;

        upload.addEventListener('change', function(event) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                image.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });

        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0);
        };

        canvas.addEventListener('mousedown', function(event) {
            startX = event.offsetX;
            startY = event.offsetY;
            isDrawing = true;
        });

        canvas.addEventListener('mousemove', function(event) {
            if (isDrawing) {
                endX = event.offsetX;
                endY = event.offsetY;
                draw();
            }
        });

        canvas.addEventListener('mouseup', function(event) {
            if (isDrawing) {
                endX = event.offsetX;
                endY = event.offsetY;
                isDrawing = false;
                cropImage();
            }
        });

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.strokeRect(startX, startY, endX - startX, endY - startY);
        }

        function cropImage() {
            const width = endX - startX;
            const height = endY - startY;

            roiCanvas.width = width;
            roiCanvas.height = height;
            roiCtx.drawImage(canvas, startX, startY, width, height, 0, 0, width, height);

            const dataURL = roiCanvas.toDataURL();
            croppedImage.src = dataURL;
            croppedImage.style.display = 'block';
        }
    </script>
</body>
</html>

效果图

左下角为框选的roi区域里的图像内容