【html】图片多矩形框裁剪

说明

由于项目中需要对一个图片进行多选择框进行裁剪,所以特写当前的示例代码。

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <title>图片裁剪</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    let img = new Image();
    let rate = 1
    img.onload = function () {
        let width = img.width
        let height = img.height
        if (img.width > window.innerWidth || img.height > window.innerHeight) {
            if (window.innerWidth / img.width > window.innerHeight / img.height) {
                rate = window.innerHeight / img.height
                width = img.width * rate
                height = window.innerHeight
            } else {
                width = window.innerWidth
                rate = window.innerWidth / img.width
                height = img.height * rate
            }
        }
        // 等比缩小
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    let url = new URL(window.location.href);
    let params = new URLSearchParams(url.search);

    img.src = "https://img1.baidu.com/it/u=1486134966,661096340&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500";

    // 坐标数组
    let coorArr = []
    // 当前坐标
    let coor = {}

    // 鼠标按下
    canvas.onmousedown = function (e) {
        coor.begin = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
        }
        coor.end = {
            x: 0,
            y: 0
        }
    }

    // 移动鼠标
    canvas.onmousemove = function (e) {
        let begin = coor.begin;
        if (begin === undefined || begin.x === undefined) {
            return
        }
        coor.begin = coor.begin
        coor.end = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
        }

        draw();
        drawLine(coor);
    }

    // 鼠标放开
    canvas.onmouseup = function (e) {
        let begin = coor.begin;
        if (begin === undefined || begin.x === undefined) {
            return
        }
        coorArr.push({
            begin: coor.begin,
            end: {
                x: e.clientX - canvas.offsetLeft,
                y: e.clientY - canvas.offsetTop
            }
        })

        draw();

        coor.begin = {}
    }

    // 双击裁剪
    canvas.ondblclick = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        coorArr = []
        coor = {}
    }

    // 鼠标离开则清理
    canvas.onmouseout = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        coorArr = []
        coor = {}
    }

    // 画框
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // 先画之前的框
        coorArr.forEach(coor => {
            drawLine(coor);
        });

        // 显示光标位置信息
        ctx.font = "18px Arial";
        ctx.fillStyle = "red";
        // 在canvas外显示光标位置
        ctx.fillText("缩放:" + rate.toFixed(2) + ";说明:鼠标离开画布清理,鼠标双击进行裁剪。", 5, 30);
    }

    // 画矩形
    function drawLine(coor) {
        let begin = coor.begin;
        let end = coor.end;
        // 画矩形
        ctx.moveTo(begin.x, begin.y);
        ctx.lineTo(end.x, begin.y);

        ctx.moveTo(end.x, begin.y);
        ctx.lineTo(end.x, end.y);

        ctx.moveTo(end.x, end.y);
        ctx.lineTo(begin.x, end.y);

        ctx.moveTo(begin.x, end.y);
        ctx.lineTo(begin.x, begin.y);
        ctx.stroke();
    }
</script>
</body>
</html>

示例

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
emmm4595 小时前
html兼容性问题处理
html
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js