当前位置：文江博客话题详情

JavaScript LESS Vue.js Yarn 前端

前端怎么实现图片选中区域，获取选中区域的宽高像素等信息，有没有vsCode相关插件，或者能实现功能的库或者组件

发布于 2022-09-13 00:47:08 字数 137 浏览 33 评论 0

点击左边选择图片--》选中的图片会放大到中间显示--》需求：可点击框选矩形区域并在右侧对应信息中，展示选中区域的信息如：长、宽等。。。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

掩耳倾听 2022-09-20 00:47:08

框选的时候就可以拿到对角顶点，根据对角顶点就可以计算最大最小xy，然后相减就是宽高，下面有一个类似的案例，你可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      html, body{
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      }
    #box{
            width: 800px;
            height: 500px;  
            background: #000;      
            position: relative;
    }
    .item{
        position: absolute;
    }
    .item.red{
        border: 1px solid red;
        color: red
    }
    .item.blue{
        border: 1px solid blue;
        color: blue
    }
  </style>
</head>
<body>
    <button class="drawBox" data-type="red">红色框</button>
    <button class="drawBox" data-type="blue">蓝色框</button>
    <button class="reset">清除</button>
    <button class="coords">坐标</button>
    <div id="box"></div>
    <div class="info"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    let count = 0, sum = 0, activeType
    let $parent = $('#box'), $active, acx = 0, acy = 0, _left = 0, _top = 0;
    $('.drawBox').on('click', function(){
        let type = $(this).attr('data-type')
        activeType = type
        
        bindEvent()
    })
    
    function bindEvent(){
        $parent.off('mousemove click')
        $parent.on('mousemove', function(e){
        _left = e.offsetX
        _top = e.offsetY
        if($(e.target).hasClass('item')){
          _left += parseInt(e.target.style.left)
          _top += parseInt(e.target.style.top)
        }
        
        $active && $active.css({
          left: Math.min(acx, _left), 
          top: Math.min(acy, _top),
          width: Math.abs(acx - _left),
          height: Math.abs(acy - _top)
        })
    
      }).on('click', function(e){
        count++
        if(count == 1){
          $active = $('<div class="item '+activeType+'"></div>')
          $parent.append($active)
          acx = e.offsetX
          acy = e.offsetY
          if($(e.target).hasClass('item')){
            acx += parseInt(e.target.style.left)
            acy += parseInt(e.target.style.top)
          }
        }else{
        $active.html(++sum)
        
        let width = Math.abs(acx - _left), 
                height = Math.abs(acy - _top),
                minx = Math.min(acx, _left),
                maxx = Math.max(acx, _left),
                miny = Math.min(acy, _top),
                maxy = Math.max(acy, _top)
        let infoHtml = `
            <p>盒子: ${sum}</p>
            <p>width: ${width}</p>
            <p>height: ${height}</p>
            <p>minx: ${minx}</p>
            <p>maxx: ${maxx}</p>
            <p>miny: ${miny}</p>
            <p>maxy: ${maxy}</p>
        `
        $('.info').html(infoHtml)

        cancel()
        }
      });
    }
    
    //重置
  $('.reset').on('click', reset)
    function reset(){
    sum = 0
    $('#box .item').remove()
    clear()
  }
  function clear(){
    isEdit = false
    $parent.off('mousemove click')

    $active && $active.remove()

    cancel()
  }
  function cancel(){
    $active = null
    acx = acy = count = _left = _top = 0
  }
  
  $('.coords').on('click', function(){
      let res = []
      $('#box .item').each(function(index, item){
          res.push({
              index: $(item).html(),
              x: parseFloat(item.style.left),
              y: parseFloat(item.style.top)
          })
      })
      console.log(res)
  })
</script>
</html>

~没有更多了~

关于作者

南街女流氓

暂无简介

0 文章

0 评论

21 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文