mark-image
v1.0.4
Published
基于 canvas 进行图片标注,独立 umd 模块,轻量(13kb)不依赖第三方库
Downloads
6
Readme
mark-image 图片标注插件
基于 canvas 进行图片标注,独立 umd 模块,轻量(13kb)不依赖第三方库
⚠️ 当前库已不再维护,请使用canvas-select
功能
- 鼠标左键拖动开始标注
- 滚轮缩放标注画布
- 鼠标右键移动拖动画布
- 选中标注框,方向键位移
用法
直接使用
<div id="container"></div>
<script src="mark-image.min.js"></script>
<script>
var markImage = new MarkImage({
el: "#container",
imageSrc: "./test1.jpg",
});
</script>
or
<div id="container"></div>
<script src="mark-image.min.js"></script>
<script>
var markImage = new MarkImage({
el: document.getElementById("container"),
imageSrc: "./test1.jpg",
});
</script>
模块方式
npm i mark-image
import MarkImage from "mark-image";
// ...
配置
const markImage = new MarkImage({
el: ".container", // 挂载节点 等同document.querySelector()参数, 也可以传入dom (必填)
imageSrc: "./source.jpg", // 引入需要标注的图片 (必填)
data: [
// 初始化默认的标注位置
[461, 348, 573, 467],
[922, 351, 1019, 469],
[683, 51, 792, 162],
[31, 663, 187, 799],
[656, 677, 797, 812],
[41, 139, 173, 244],
[842, 682, 991, 846],
],
lock: false, // 是否禁用标注
label: {
show: true,
stroke: "#000",
fill: "#fac031",
},
pixel: {
// 标注像素
show: true,
fill: "rgba(0,0,0,0.6)",
},
limitSize: {
// 最小标注尺寸
minWidth: 10,
minHeight: 10,
},
activeRect: {
// 活动选框样式
stroke: "#67C23A",
lineDash: [4, 2],
lineDashOffset: 2,
},
rect: {
// 已选标注框样式
fill: "rgba(247,200,4,0.2)",
stroke: "rgba(247,200,4,1)",
},
onload() {}, // 图片加载完成
onselect(index, coor) {
// 输出当前选中的标注矩形,参数 index为索引,coor为坐标
console.log(index, coor);
},
onresult(list) {
// 输出标注的矩形列表,也可以直接通过markImage.dataset获取
console.log(list);
},
});
方法
// 适配图片到画布中,推荐插件初次实例化之后执行此方法
markImage.fitting();
// 放大
markImage.zoomIn();
// 缩小
markImage.zoomOut();
// 删除
markImage.remove(index);