AILabel标注工具指南（二）：禁止图片外标注

前端互助会2025-04-01 16:59

背景：在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示；如果你有上面的任何需求，恭喜你，找到组织了....

在此背景下，AILabel.js出生了。

源代码：https://github.com/dingyang9642/AILabel

API文档：http://ailabel.com.cn/public/ailabel/api/index.html

Demo文档：http://ailabel.com.cn/public/ailabel/demo/index.html

npm下载地址：https://www.npmjs.com/package/ailabel

标注案例展示：
http://zhb_nyx.gitee.io/ailabel_info

数据标注案例（新版本 5.0.16）：
AILabel.zip_vueailabel使用-互联网文档类资源-CSDN下载

随着开源，作者的不断更新维护，AILabel的功能已经越来越全面，已经能够充分的满足标注的需求。

在我们标注任务中，往往需求都禁止图片外标注，但是AILabel 中并没有禁止此项目操作。

仔细观察标注坐标可以发现，标注的坐标点位于图片左侧和上方的都是负的，超出图片下方和右方的都大于高度和宽度。

所以当我们标注完成时间拿到坐标点可进行判断，从而禁止图片外标注。

代码奉上：

javascript 复制代码

 var isPOLYGON = true
                    if(shape.points){
                        shape.points.forEach(item => {
                            if(item.x < 0 || item.x > that.imgWidth  || item.y < 0 || item.y > that.imgHeight ) {isPOLYGON =  false}})
                    }else{
                        if(shape.x < 0 || shape.x > that.imgWidth || (shape.x + shape.width) > that.imgWidth || shape.y < 0 || shape.y > that.imgHeight || (shape.y + shape.height) > that.imgHeight){
                            isPOLYGON =  false
                        }
                    }
                    if(isPOLYGON == false){
                        return this.$message.error({
                            message:'超出图片区域，不可标注',
                            showClose: true,
                            duration: 1000,
                        });
                    }

感谢阅读，喜欢的话可以一键三连哦！