前端图像文件批注js插件示例,支持图像缩放以及点线框
时间: 2023-08-11 16:38:24 浏览: 52
好的,以下是一个前端图像文件批注的示例,使用了fabric.js和jQuery库。它支持图像缩放、拖动、点、线、框的绘制和编辑。
HTML代码:
```
<div id="canvas-container">
<canvas id="canvas"></canvas>
</div>
<div id="toolbar">
<button id="add-point">Add Point</button>
<button id="add-line">Add Line</button>
<button id="add-rect">Add Rectangle</button>
<button id="delete-object">Delete Object</button>
<button id="save">Save</button>
</div>
```
CSS代码:
```
#canvas-container {
position: relative;
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
#toolbar {
margin-top: 10px;
}
#toolbar button {
margin-right: 10px;
}
```
JavaScript代码:
```
// 初始化canvas
var canvas = new fabric.Canvas('canvas');
// 添加图片
fabric.Image.fromURL('path/to/image.jpg', function(img) {
canvas.setWidth(img.width);
canvas.setHeight(img.height);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});
// 添加点
var addPoint = function() {
var point = new fabric.Circle({
left: 100,
top: 100,
radius: 5,
fill: 'red',
selectable: true,
hasBorders: false,
hasControls: false,
lockScalingX: true,
lockScalingY: true,
lockRotation: true
});
canvas.add(point);
};
// 添加线
var addLine = function() {
var line = new fabric.Line([50, 50, 100, 100], {
fill: 'red',
stroke: 'red',
strokeWidth: 2,
selectable: true,
hasBorders: false,
hasControls: false,
lockScalingX: true,
lockScalingY: true,
lockRotation: true
});
canvas.add(line);
};
// 添加矩形
var addRect = function() {
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'transparent',
stroke: 'red',
strokeWidth: 2,
selectable: true,
hasBorders: false,
hasControls: false,
lockScalingX: true,
lockScalingY: true,
lockRotation: true
});
canvas.add(rect);
};
// 删除选中的对象
var deleteObject = function() {
var activeObject = canvas.getActiveObject();
if (activeObject) {
canvas.remove(activeObject);
}
};
// 保存结果
var save = function() {
var objects = canvas.getObjects();
var result = [];
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var type = object.get('type');
if (type === 'circle') {
result.push({
type: 'point',
x: object.get('left'),
y: object.get('top')
});
} else if (type === 'line') {
result.push({
type: 'line',
x1: object.get('x1'),
y1: object.get('y1'),
x2: object.get('x2'),
y2: object.get('y2')
});
} else if (type === 'rect') {
result.push({
type: 'rect',
x: object.get('left'),
y: object.get('top'),
width: object.get('width'),
height: object.get('height')
});
}
}
console.log(result);
};
// 绑定按钮事件
$('#add-point').click(addPoint);
$('#add-line').click(addLine);
$('#add-rect').click(addRect);
$('#delete-object').click(deleteObject);
$('#save').click(save);
// 支持缩放和拖动
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
canvas.on('mouse:down', function(opt) {
var evt = opt.e;
if (evt.altKey === true) {
this.isDragging = true;
this.selection = false;
this.lastPosX = evt.clientX;
this.lastPosY = evt.clientY;
}
});
canvas.on('mouse:move', function(opt) {
if (this.isDragging) {
var e = opt.e;
var zoom = canvas.getZoom();
var deltaLeft = (e.clientX - this.lastPosX) / zoom;
var deltaTop = (e.clientY - this.lastPosY) / zoom;
canvas.relativePan({ x: deltaLeft, y: deltaTop });
this.lastPosX = e.clientX;
this.lastPosY = e.clientY;
}
});
canvas.on('mouse:up', function(opt) {
this.isDragging = false;
this.selection = true;
});
```
这是一个基础的示例,你可以根据自己的需求进行修改和扩展。