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区域里的图像内容

相关推荐
DDDDDDDRDDR4 分钟前
C++容器:list
开发语言·c++·stl
Elnaij10 分钟前
从C++开始的编程生活(7)——取地址运算符重载、类型转换、static成员和友元
开发语言·c++
IT_陈寒10 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用12 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
chen_ever20 分钟前
golang之go modules
开发语言·后端·golang
摸鱼的春哥27 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
郝学胜-神的一滴28 分钟前
Effective Modern C++ 条款26:避免在通用引用上重载
开发语言·c++·程序人生
草莓熊Lotso31 分钟前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
Aczone282 小时前
硬件(六)arm指令
开发语言·汇编·arm开发·嵌入式硬件·算法
YA3332 小时前
java设计模式二、工厂
java·开发语言·设计模式