Question

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

进行绘制

如果您在上面的图像中看到图像的中间将是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, 0, 0, image_width, 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,255, 0.5);
            border-radius: 100px;
            transform: translateX(-50%, -50%);
        }

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

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

输出应该是

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

0 个答案: