• 【html】图片多矩形框裁剪

     说明

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

    代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <base href="/">
    6.     <title>图片裁剪title>
    7. head>
    8. <body>
    9. <canvas id="myCanvas" style="border:1px solid #d3d3d3;">
    10.     Your browser does not support the HTML5 canvas tag.
    11. canvas>
    12. <script>
    13.     let canvas = document.getElementById("myCanvas");
    14.     let ctx = canvas.getContext("2d");
    15.     let img = new Image();
    16.     let rate = 1
    17.     img.onload = function () {
    18.         let width = img.width
    19.         let height = img.height
    20.         if (img.width > window.innerWidth || img.height > window.innerHeight) {
    21.             if (window.innerWidth / img.width > window.innerHeight / img.height) {
    22.                 rate = window.innerHeight / img.height
    23.                 width = img.width * rate
    24.                 height = window.innerHeight
    25.             } else {
    26.                 width = window.innerWidth
    27.                 rate = window.innerWidth / img.width
    28.                 height = img.height * rate
    29.             }
    30.         }
    31.         // 等比缩小
    32.         canvas.width = width;
    33.         canvas.height = height;
    34.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    35.     }
    36.     let url = new URL(window.location.href);
    37.     let params = new URLSearchParams(url.search);
    38.  
    39.     img.src = "https://img1.baidu.com/it/u=1486134966,661096340&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500";
    40.  
    41.     // 坐标数组
    42.     let coorArr = []
    43.     // 当前坐标
    44.     let coor = {}
    45.  
    46.     // 鼠标按下
    47.     canvas.onmousedown = function (e) {
    48.         coor.begin = {
    49.             x: e.clientX - canvas.offsetLeft,
    50.             y: e.clientY - canvas.offsetTop
    51.         }
    52.         coor.end = {
    53.             x: 0,
    54.             y: 0
    55.         }
    56.     }
    57.  
    58.     // 移动鼠标
    59.     canvas.onmousemove = function (e) {
    60.         let begin = coor.begin;
    61.         if (begin === undefined || begin.x === undefined) {
    62.             return
    63.         }
    64.         coor.begin = coor.begin
    65.         coor.end = {
    66.             x: e.clientX - canvas.offsetLeft,
    67.             y: e.clientY - canvas.offsetTop
    68.         }
    69.  
    70.         draw();
    71.         drawLine(coor);
    72.     }
    73.  
    74.     // 鼠标放开
    75.     canvas.onmouseup = function (e) {
    76.         let begin = coor.begin;
    77.         if (begin === undefined || begin.x === undefined) {
    78.             return
    79.         }
    80.         coorArr.push({
    81.             begin: coor.begin,
    82.             end: {
    83.                 x: e.clientX - canvas.offsetLeft,
    84.                 y: e.clientY - canvas.offsetTop
    85.             }
    86.         })
    87.  
    88.         draw();
    89.  
    90.         coor.begin = {}
    91.     }
    92.  
    93.     // 双击裁剪
    94.     canvas.ondblclick = function () {
    95.         ctx.clearRect(0, 0, canvas.width, canvas.height);
    96.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    97.         coorArr = []
    98.         coor = {}
    99.     }
    100.  
    101.     // 鼠标离开则清理
    102.     canvas.onmouseout = function () {
    103.         ctx.clearRect(0, 0, canvas.width, canvas.height);
    104.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    105.         coorArr = []
    106.         coor = {}
    107.     }
    108.  
    109.     // 画框
    110.     function draw() {
    111.         ctx.clearRect(0, 0, canvas.width, canvas.height);
    112.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    113.  
    114.         ctx.beginPath();
    115.         ctx.strokeStyle = 'green';
    116.         ctx.lineWidth = 5;
    117.         ctx.lineCap = 'round';
    118.         ctx.lineJoin = 'round';
    119.  
    120.         // 先画之前的框
    121.         coorArr.forEach(coor => {
    122.             drawLine(coor);
    123.         });
    124.  
    125.         // 显示光标位置信息
    126.         ctx.font = "18px Arial";
    127.         ctx.fillStyle = "red";
    128.         // 在canvas外显示光标位置
    129.         ctx.fillText("缩放：" + rate.toFixed(2) + "；说明：鼠标离开画布清理，鼠标双击进行裁剪。", 5, 30);
    130.     }
    131.  
    132.     // 画矩形
    133.     function drawLine(coor) {
    134.         let begin = coor.begin;
    135.         let end = coor.end;
    136.         // 画矩形
    137.         ctx.moveTo(begin.x, begin.y);
    138.         ctx.lineTo(end.x, begin.y);
    139.  
    140.         ctx.moveTo(end.x, begin.y);
    141.         ctx.lineTo(end.x, end.y);
    142.  
    143.         ctx.moveTo(end.x, end.y);
    144.         ctx.lineTo(begin.x, end.y);
    145.  
    146.         ctx.moveTo(begin.x, end.y);
    147.         ctx.lineTo(begin.x, begin.y);
    148.         ctx.stroke();
    149.     }
    150. script>
    151. body>
    152. html>

    示例

     

  • 相关阅读:
    08-Linux特殊权限
    解密Prompt系列8. 无需训练让LLM支持超长输入:知识库 & unlimiformer & PCW & NBCE
    [Android Input系统学习]从mouse事件再看input分发
    linux后台开发面试题
    AI 卷到正经「挖矿」业，卡内基科学研究所另辟蹊径，靠关联分析法找到新矿床
    Java面向对象编程
    【Java第30期】：Cookie 和 Session 的工作流程
    Tomcat 架构
    【Git】轻松学会 Git（一）：掌握 Git 的基本操作
    ORB-SLAM安装过程遇到问题记录整理
  • 原文地址：https://blog.csdn.net/qq_38428623/article/details/134052601