如何使用画布在图像中绘制选择区域

问题描述

我需要裁剪图像中的选定部分，并且需要使用画布

进行绘制

如果您在上面的图像中看到图像的中间将是100％的宽度和高度，则将有一个红色的边框矩形框，我需要仅使用canvas drawImage在矩形框内绘制可见对象。如何动态获取源X和Y以及目标X和Y。这也应该在我调整窗口大小时起作用。

我尝试过使用此代码

var imageElm = document.getElementById('image');

var redBox = document.getElementById('Box');

var image_height = imageElm .offsetHeight;
var image_width = imageElm .offsetWidth;
var Box_width = Box.offsetWidth;
var Box_height = Box.offsetHeight;
var cPoint = document.getElementById('center-point');
var setLeft = cPoint.offsetLeft;
var setTtop = cPoint.offsetTop;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.drawImage(imageElm,setLeft - (Box.offsetWidth / 4),setTtop - (Box.offsetHeight / 4),image_width,image_height,image_height);

<div class="content-row">
        <div class="content">
            <img scr="./images/bg.jpg" id="image" />
            <div id="Box" class="border-div">
               <div id="center-point" class="centerPoint"></div>
            </div>
        </div>
        <div class="content">
            <canvas id="canvas"></canvas>
        </div>
    </div>

#image,canvas{
            width: 100%;
            height: calc(100vh - 50px);
            vertical-align: top;
            object-fit: cover;
        }
        
        .content-row{
            display: flex;
            flex-wrap: wrap;
        }
        .content{
            position: relative;
            flex: 0 0 100%;
            max-width: 100%;
        }
        .border-div{
            border: 1px solid red;
            position: absolute;
            width: 100%;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            max-width: 680px;
            height: 300px;
        }
.centerPoint{
            position: absolute;
            left:50%;
            top: 50%;
            width: 15px; height: 15px;
            background-color: rgba(255,255,0.5);
            border-radius: 100px;
            transform: translateX(-50%,-50%);
        }

我在屏幕的中心点左右添加了一点，试图在图像中绘制对我也不起作用的选定区域。

还有其他解决方案可以实现这一目标。

输出应该是

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）