如何解决如何使用画布在图像中绘制选择区域
进行绘制如果您在上面的图像中看到图像的中间将是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 举报,一经查实,本站将立刻删除。