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

相关推荐
liuweidong0802几秒前
【Pandas】pandas DataFrame radd
开发语言·python·pandas
摆烂工程师15 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭16 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码23 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger28 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话29 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时29 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳29 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹31 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子31 分钟前
深入解析 iframe
前端