【图像标注】使用vue3实现图像标注功能

最新推荐文章于 2024-04-29 17:09:45 发布
最新推荐文章于 2024-04-29 17:09:45 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44959182/article/details/125252092
版权

最近没事情想写一个图像标注功能，本来是想基于Canvs开发，结果发现很多事情无法实现，或者做起来比较消耗性能，于是就想出了用div来画框的方法。后续会对其封装成一个npm插件，希望可以帮到有用的小伙伴。

SoberChi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue3图片打点自定义标记颜色形状(完整教程可直接复制项目)
IAmNotChangAn的博客
08-24 2277
Vue3图片打点自定义标记颜色形状(完整教程可直接复制项目)
vue-fake3d-image-effect：使用WebGL的假3D图像效果-w VueJS-SSR兼容
02-01
:party_popper: Vue Fake3d图像效果 使用WebGL制作的假3D图像效果-带VueJS-兼容SSR 安装 该软件包可在npm上获得。 # Save it as a dep npm install --save @luxdamore/vue-fake3d-image-effect 用法 作为一个组成部分 // Component import { Fake3dImageEffect } from '@luxdamore/vue-fake3d-image-effect' ; import '@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css' ; // Install Vue . component ( Fake3dImageEffect . name , Fake3dImageEffect ) ; // Or in a .vue file export default {
vue-image-markup:vue-image-markup将为您提供轻松编辑上传的图像并将其保存的功能
05-04
使用Vue.js标记图像（可自定义） vue-image-markup将为您提供轻松编辑和保存上传的图像的功能。 安装 npm i vue-image-markup 或者 yarn add vue-image-markup 用法 首先将Editor组件导入Vue组件内。 import Editor from 'vue-image-markup'; 然后，您将可以使用编辑器组件。 例子： 您必须给您的编辑器组件ref ，这将帮助您调用函数来设置编辑器模式，清理对象或撤消/重做您的更改。 < Editor xss=removed xss=removed xss=removed xss=removed> mounted() { $this.$refs.e
适用于vue等架构的的原生js实现画布中鼠标移动绘制、编辑矩形
Sunshine_YXJ的博客
08-25 7424
功能概述 1. 鼠标在无矩形区域按下左键后拖动，生成矩形 2. 鼠标点击已绘制的矩形， 选中矩形，并绘制不同选中效果 3. 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形 4. 选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形 效果预览 blog代码仅包含绘制画布部分，截图涉及列表展示、画布区域计算等，此处均省略，以一个基础页面代替 实现代码 draw.js /** * 图片标记 * 参数: cav-画布对象 list-标记数组 i-选中标记下标 **/ /* 操作执.
vue中fabric的使用（图片标注、画框画箭头文字涂鸦等...）
_NIXIAKF的博客
04-29 596
vue中fabric的使用（图片标注、画框画箭头文字涂鸦等...）
Vue3 + Farbic.js +Ts 实现的在线图片标注组件 支持矩形和点位标注
qq_46274532的博客
04-15 567
1.实现矩形标注、点位（不规则四边形）标注。2.可拖拽、缩放、删除、居中显示标注标签。
添加了其他功能和完善了代码。vue、konva标注多边形、矩形---demo2.0
08-13
vue+konva.js(未使用vue-konva)，实现数据标注矩形和多边形功能 demo2添加功能如下： 1、自适应画布 2、新矩形和多边形（顶点已经约束不能拖拽出画布） 3、ctrl+z撤销和del删除 4、鼠标滚轮放大和缩小 5、检查图形是否规范 计划添加：约束图形不能拖拽出画布功能
vue3+ts+canvas项目中图片进行矩形批注
你怎么也喜欢嘴巴嘟嘟
02-27 1251
图片使用canvas批注
Vue项目实现图片标注的功能（绘制矩形，圆，直线和点，撤销上一步和清空画布）
Cinderellahh92的博客
11-08 6474
111
[vue2] 图片标记器
qq_37411242的博客
04-03 1768
[vue2] 图片标记器
vue+div.canvas图像标注功能实现
tangdou369098655的博客
09-15 8650
main.js import Vue from 'vue' import 'vueui-widgets/dist/index.css' import VueUI from 'vueui-widgets' import App from './App.vue' import router from './router' import store from './store' Vue.use(...
vue 自定义image组件
weixin_42178050的博客
12-21 1103
https://blog.csdn.net/weixin_33743248/article/details/94449698
基于javaScript+vue的图像标注软件+标注车道线，区域等交通设施+配置智能交通检测事件+设置车道的方向和区域的检测事件
最新发布
06-17
基于javaScript+vue的图像标注软件+标注车道线，区域等交通设施+配置智能交通检测事件+设置车道的方向和区域的检测事件，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申...
Vue与Konva.js结合实现空间结构管理与多边形区域标注功能
06-07
本资源库提供了一个完整的基于Vue.js框架和Konva.js图形库开发的Web应用，专注于实现空间结构的数字化管理和多边形区域的精确标注。该系统特别适用于需要对图像进行空间结构分析和数据标注的场景，如城市规划、地理...
毕业设计-图像管理和标注系统.zip
12-31
毕设系统项目源码，开发语言python、Java、vue...可用于毕业设计、课程设计、参考学习等
vue展示dicom文件医疗系统的实现代码
10-18
主要介绍了vue展示dicom文件医疗系统的实现代码，非常不错，具有一定的参考借鉴加载,需要的朋友可以参考下
vue3标注ailabel
Tanjc518的博客
06-22 3371
ailabel标注
Vue3 图片绘制矩形，并在矩形上进行标注
leoz1的博客
03-05 759
转载： https://blog.csdn.net/qq_37656005/article/details/123687788 https://blog.csdn.net/m0_46627730/article/details/106583908
vue3图片描点标记
soclear_的博客
02-08 2299
图片标记描点
vue3实现图像标注功能
06-06
实现图像标注功能可以使用一些开源的 JavaScript 库来帮助实现，比如 `fabric.js` 或 `Konva.js` 等。下面是使用 `Konva.js` 实现图像标注的简单示例： 1. 安装 `konva` 库： ```bash npm install konva ``` 2. 在 Vue3 中引入 `konva` 库： ```javascript import Konva from 'konva' ``` 3. 在 Vue3 中创建一个 `Konva.Stage` 组件，用于放置图像和标注： ```vue <template> <div id="app"> <v-stage ref="stage" :config="stageConfig"> <v-layer> <!-- 图像 --> <v-image :config="imageConfig" @load="handleImageLoad" /> <!-- 标注 --> <v-rect v-for="(rect, index) in rects" :key="index" :config="rect" /> </v-layer> </v-stage> </div> </template> <script> import Konva from 'konva' export default { name: 'App', data() { return { stageConfig: { width: 800, height: 600 }, imageConfig: { image: 'path/to/image.jpg', width: 800, height: 600 }, rects: [] } }, methods: { handleImageLoad(image) { // 创建一个标注 const rect = new Konva.Rect({ x: 50, y: 50, width: 100, height: 100, fill: 'rgba(255, 0, 0, 0.5)', draggable: true }) // 将标注添加到 rects 数组中 this.rects.push(rect) // 将标注添加到图层中 this.$refs.stage.getStage().findOne('Layer').add(rect) } } } </script> ``` 在这个示例中，我们创建了一个 `Konva.Stage` 组件，并在其中添加了一个 `Konva.Image` 组件用于展示图像，以及一个 `Konva.Rect` 组件用于标注。在 `imageConfig` 中指定图像的路径、宽度和高度，在 `handleImageLoad` 中创建一个 `Konva.Rect` 组件，并将其添加到 `rects` 数组中，最后将其添加到图层中。 这只是一个简单的示例，您可以根据自己的需求对其进行更多的定制和改进。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SoberChi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值