Skip to content

Instantly share code, notes, and snippets.

@eric612

eric612/index.html

Created May 20, 2021 11:27
Show Gist options
  • Save eric612/e1b0c07cab98cd579777129a21b859c5 to your computer and use it in GitHub Desktop.
Save eric612/e1b0c07cab98cd579777129a21b859c5 to your computer and use it in GitHub Desktop.
Download ZIP
Labeling online tool
Raw
index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Draw with the mouse in a HTML5 canvas
</title>
<style>
* {
overflow: hidden;
}
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Labeling Online Tools</h1>
<b>Drag and drop a bounding box</b>
<h1>
<input id="upload" type="button" value="Upload image"/>
<input id="doClear" type="button" value="Clear" onclick="doClear();" />
<input id="download" type="button" value="Download label" onclick="download();" />
<input type="file" id="fileElem" multiple="true" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a id="downloadAnchorElem" style="display:none"></a>
<select id="class">
<option>Horse</option>
<option>Dog</option>
<option>Car</option>
<option>Bus</option>
<option>Person</option>
<option>Rider</option>
<option>Motor</option>
</select>
</h1>
<hr>
<canvas id="canvas"></canvas>
<script src="/scripts/index.js"></script>
</body>
Raw
script.js
var img = new Image(); // Create new img element
img.src = "https://github.com/eric612/MobileNet-YOLO/raw/master/data/VOC0712/000166.jpg"; // Set source path
var bbox=[];
var fileSelect = document.getElementById("upload"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
function download() {
var valArray1 = [121, 324, 42, 31];
var valArray2 = [232, 131, 443];
myJson = {images: {}, objArray2: {}};
for (var k = 1; k < valArray1.length; k++) {
var objName = 'obj' + k;
var objValue = valArray1[k];
myJson.objArray1[objName] = objValue;
}
for (var k = 1; k < valArray2.length; k++) {
var objName = 'obj' + k;
var objValue = valArray2[k];
myJson.objArray2[objName] = objValue;
}
console.log(JSON.stringify(myJson));
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(myJson));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href", dataStr );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();
}
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
//var img = document.createElement("img");
//img.classList.add("obj");
img.file = file;
//preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) { return async function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
//console.log("loaded");
setTimeout(() => { resize();doClear(); }, 2000);
}
}
window.addEventListener('load', ()=>{
resize(); // Resizes the canvas once the window loads
document.addEventListener('mousedown', startPainting);
document.addEventListener('touchstart', startPainting);
document.addEventListener('mouseup', stopPainting);
document.addEventListener('touchend', stopPainting);
document.addEventListener('mousemove', sketch);
document.addEventListener('touchmove', sketch);
window.addEventListener('resize', resize);
});
const canvas = document.querySelector('#canvas');
// Context for the canvas for 2 dimensional operations
const ctx = canvas.getContext('2d');
// Resizes the canvas to the available size of the window.
function resize(){
var height = img.height;
var width = img.width;
ctx.canvas.width = width;
ctx.canvas.height = height;
draw_img();
}
// Stores the initial position of the cursor
let coord = {x:0 , y:0};
let coord2 = {x:0 , y:0};
// This is the flag that we are going to use to
// trigger drawing
let paint = false;
// Updates the coordianates of the cursor when
// an event e is triggered to the coordinates where
// the said event is triggered.
function getPosition(event){
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}
function getPosition2(event){
coord2.x = event.clientX- canvas.offsetLeft;
coord2.y = event.clientY- canvas.offsetTop;
}
// The following functions toggle the flag to start
// and stop drawing
function startPainting(event){
paint = true;
getPosition(event);
}
function stopPainting(){
paint = false;
var e = document.getElementById("class");
var strClass = e.value;
bbox.push([coord.x,coord.y,coord2.x,coord2.y,strClass]);
//console.log(strClass)
}
function draw_img() {
ctx.drawImage(img,0,0);
}
function doClear() {
bbox=[];
//window.alert(bbox.length);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
draw_img();
ctx.stroke();
}
//window.alert(bbox.length);
function draw_box() {
var len= bbox.length
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
getPosition2(event);
ctx.rect(coord.x, coord.y, coord2.x-coord.x, coord2.y-coord.y);
ctx.font = "12px Arial";
ctx.fillStyle = "red";
var e = document.getElementById("class");
var strClass = e.value;
ctx.fillText(strClass, coord.x, coord.y-5);
for (step = 0; step < len; step++) {
ctx.rect(bbox[step][0], bbox[step][1], bbox[step][2]-bbox[step][0], bbox[step][3]-bbox[step][1]);
ctx.fillText(bbox[step][4], bbox[step][0], bbox[step][1]-5);
}
}
function dd() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
draw_img();
draw_box();
// Draws the line.
ctx.stroke();
}
function sketch(event){
if (!paint) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
draw_img();
draw_box();
// Draws the line.
ctx.stroke();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment