eric612/index.html

## 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>


## labeling-online-tool.markdown

      
    Raw
  

              labeling-online-tool.markdown
            
          
    Labeling online tool

A Pen by Eric Liu on CodePen.
License.

  
## 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();
}

	<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>
	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();
	}