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

相关推荐
风铃喵游3 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
_WndProc4 分钟前
【Python】Flask网页
开发语言·python·flask
sunbyte8 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟17 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor17 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter18 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝20 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽20 分钟前
Cookie、Session、JWT 的前世今生
前端
liujing1023292920 分钟前
Day04_刷题niuke20250703
java·开发语言·算法
程序员辉哥21 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端