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

相关推荐
褚翾澜18 分钟前
Haskell语言的NoSQL
开发语言·后端·golang
zh_xuan30 分钟前
LeeCode 57. 插入区间
c语言·开发语言·数据结构·算法
2401_8534482335 分钟前
C嘎嘎类里面的额函数
c语言·开发语言·c++
sen_shan44 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
巷北夜未央1 小时前
数据结构之二叉树Python版
开发语言·数据结构·python
旧识君1 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
郝YH是人间理想1 小时前
OpenCV基础——傅里叶变换、角点检测
开发语言·图像处理·人工智能·python·opencv·计算机视觉
Tiger Z1 小时前
R 语言科研绘图第 36 期 --- 饼状图-基础
开发语言·程序人生·r语言·贴图
ElasticPDF-新国产PDF编辑器2 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
揣晓丹2 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源