vue实现在图片中画矩形框,并得到图片中的对角坐标，测试可用版本

共1个文件

vue：1个

5星 · 超过95%的资源需积分: 5 168 浏览量 2021-07-28 16:48:08 上传评论 6 收藏 2KB ZIP 举报

在Vue.js框架中实现图像上绘制矩形框并获取对角坐标的功能，是常见的图像处理需求，例如在图像标注、对象检测等应用场景中。本文将详细介绍如何在Vue项目中完成这个任务。我们需要了解Vue的基本概念。Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它具有组件化、响应式数据绑定和易于学习的特点。在这个场景中，我们将创建一个Vue组件来处理图像和矩形框的绘制。 1. **安装依赖**：首先确保你的Vue项目已经配置了`vue-cli`和`npm`。你需要安装`canvas`相关的库，如`html2canvas`用于将HTML元素转换为Canvas，以及`vue-cropper`或`vue-canvas-segment`这样的库来支持在图像上绘制矩形。你可以通过以下命令安装： ```bash npm install html2canvas vue-cropper --save ``` 2. **创建Vue组件**：在你的Vue项目中创建一个新的Vue组件，例如`RectangleDrawer.vue`。导入所需库，并在`<script>`部分设置数据和方法： ```html <template> <div ref="imageContainer"> <img :src="imageUrl" ref="image" @load="onImageLoad" /> </div> </template> <script> import Vue from 'vue'; import Cropper from 'vue-cropper'; export default { components: { Cropper }, data() { return { imageUrl: 'your-image-url', cropBoxData: {}, canvasData: {}, }; }, methods: { onImageLoad() { // 图像加载完成后，初始化绘图 this.initDrawing(); }, initDrawing() { // 在这里实现初始化绘图的逻辑 }, drawRectangle(x1, y1, x2, y2) { // 绘制矩形的逻辑 }, getDiagonalCoordinates() { // 获取矩形对角坐标的逻辑 }, }, }; </script> ``` 3. **在Canvas上绘制矩形**：`initDrawing`方法中，我们可以使用`html2canvas`将`<img>`元素转换为Canvas，并在其上添加事件监听器，以便在用户点击时记录起点和终点坐标，从而绘制矩形。同时，我们需要实现`drawRectangle`方法来绘制矩形： ```javascript import html2canvas from 'html2canvas'; // ... methods: { initDrawing() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); html2canvas(this.$refs.image).then((canvasWrapper) => { const imgWidth = this.$refs.image.naturalWidth; const imgHeight = this.$refs.image.naturalHeight; canvas.width = imgWidth; canvas.height = imgHeight; canvas.getContext('2d').drawImage(canvasWrapper, 0, 0, imgWidth, imgHeight); canvas.addEventListener('mousedown', (event) => { this.startX = event.offsetX; this.startY = event.offsetY; }); canvas.addEventListener('mouseup', (event) => { this.endX = event.offsetX; this.endY = event.offsetY; this.drawRectangle(this.startX, this.startY, this.endX, this.endY); }); }); this.$refs.imageContainer.appendChild(canvas); }, drawRectangle(x1, y1, x2, y2) { const ctx = this.$refs.imageContainer.querySelector('canvas').getContext('2d'); ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.strokeRect(x1, y1, x2 - x1, y2 - y1); }, }, ``` 4. **获取对角坐标**：在用户松开鼠标后，`getDiagonalCoordinates`方法可以用来获取矩形的对角坐标，即`(startX, startY)`和`(endX, endY)`： ```javascript methods: { // ... getDiagonalCoordinates() { return { diagonalStart: { x: this.startX, y: this.startY }, diagonalEnd: { x: this.endX, y: this.endY } }; }, }, ``` 5. **显示和更新坐标**：你可以在Vue组件的模板中添加显示对角坐标的元素，并使用`v-model`绑定到`diagonalStart`和`diagonalEnd`数据属性，以实时更新坐标值。至此，你已经创建了一个Vue组件，可以实现在图片上绘制矩形并获取对角坐标的功能。注意，这个实现仅适用于静态图片，如果需要处理动态或多个矩形，你可能需要维护一个矩形数组，并相应地更新和绘制它们。同时，为了优化用户体验，可以考虑添加拖动调整矩形边框和撤销/重做功能。在实际项目中，根据具体需求进行适当的调整和扩展。

资源详情

资源评论

资源推荐

收起资源包目录

test.zip （1个子文件）

test.vue 10KB

<template> <div>  <div id="coordiv" @mousemove="ommousemove" @mousedown="onmousedown" @mouseup="onmouseup"> <img src="../../assets/img/test.jpg" > </div> <br> <form method="POST"> <input type="text" name="coor" placeholder="坐标" readonly="true" id="x_y" style="width: 800px"><br> <input type="submit" value="提交坐标"> </form> <div id="xycoordinates"></div> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { startX:'', startY:'', diffX:'', diffY:'', dragging:false, } }, created(){ }, mounted(){ let vm = this var coordiv = document.getElementById('coordiv'); }, methods: { cnvs_getCoordinates(e){ var x=e.pageX-e.target.offsetLeft;//不能用clientX,pageX为文档坐标,clientX表示浏览器界面坐标,会随滚动条改变 var y=e.pageY-e.target.offsetTop; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }, cnvs_clearCoordinates(e)//出框后不显示坐标 { document.getElementById("xycoordinates").innerHTML=""; }, onmousedown(e) { let vm=this; vm.startX = e.pageX; vm.startY = e.pageY; if(vm.startY<=coordiv.offsetTop+coordiv.offsetHeight && vm.startY>=coordiv.offsetTop && vm.startX>=coordiv.offsetLeft && vm.startX<=coordiv.offsetLeft+coordiv.offsetWidth) { if(e.target.className.match(/box/)) { vm.dragging = true; if(document.getElementById("moving_box") !== null) { document.getElementById("moving_box").removeAttribute("id"); } e.target.id = "moving_box"; vm.diffX = vm.startX - e.target.offsetLeft; vm.diffY = vm.startY - e.target.offsetTop; } else { var active_box = document.createElement("div"); active_box.id = "active_box"; active_box.className = "box"; active_box.style.top = vm.startY + 'px'; active_box.style.left = vm.startX + 'px'; active_box.addEventListener('dblclick',function(e){ if(e.target.className.match(/box/)) { if (document.getElementById("del_box") !== null) { document.getElementById("del_box").removeAttribute("id"); } e.target.id = "del_box"; var ab = document.getElementById("del_box"); var xy_div = document.getElementById(ab.style.left.substring(0,ab.style.left.length-2)+ab.style.top.substring(0,ab.style.top.length-2)) if(xy_div !== null) { xy_div.removeAttribute("id"); coordiv.removeChild(xy_div); } coordiv.removeChild(ab); } },false); active_box.addEventListener('ondragstart',function(e){ e.dataTransfer.setData("Text", e.target.id); },false); active_box.addEventListener('ondrop',function(e){ e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); },false); active_box.addEventListener('ondragover',function(e){ e.preventDefault(); },false); coordiv.appendChild(active_box); active_box = null; } } }, ommousemove(e){ let vm=this; if(e.pageY <= coordiv.offsetTop+coordiv.offsetHeight && e.pageY >= coordiv.offsetTop && e.pageX >= coordiv.offsetLeft && e.pageX <= coordiv.offsetLeft+coordiv.offsetWidth) { if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.style.width = e.pageX - vm.startX + 'px'; ab.style.height = e.pageY - vm.startY + 'px'; } if(document.getElementById("moving_box") !== null && vm.dragging) { var mb = document.getElementById("moving_box"); var xy_div = document.getElementById(mb.style.left.substring(0,mb.style.left.length-2)+mb.style.top.substring(0,mb.style.top.length-2)); var tmx = e.pageX - vm.diffX; var tmy = e.pageY - vm.diffY; if(tmx + mb.offsetWidth <= coordiv.offsetLeft+coordiv.offsetWidth && tmx >= coordiv.offsetLeft && tmy + mb.offsetHeight <= coordiv.offsetTop+coordiv.offsetHeight && tmy >= coordiv.offsetTop) { mb.style.top = e.pageY - vm.diffY + 'px'; mb.style.left = e.pageX - vm.diffX + 'px'; if(xy_div !== null) { var new_x = mb.style.left.substring(0, mb.style.left.length - 2); var new_y = mb.style.top.substring(0,mb.style.top.length - 2); xy_div.id = new_x+new_y; new_x-=coordiv.offsetLeft; new_y-=coordiv.offsetTop; var new_r = parseInt(mb.style.width.substring(0,mb.style.width.length-2))+parseInt(new_x)-coordiv.offsetLeft; var new_b = parseInt(mb.style.height.substring(0,mb.style.height.length-2))+parseInt(new_y)-coordiv.offsetTop;//"[ left: "+ new_x +", top: "+ new_y + ", right: " + new_r +" , bottom: "+ new_b +" ]"; xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b; var input_div = document.getElementById("x_y") input_div.value=xy_div.innerHTML }