<?php
//include("funciones/funciones.php");
$id_formulario = "58";
$ancho = "600";

$tags = array();
$tags[] = "images/logos/c.png";

foreach ($tags as &$valor) {
    $imagen  .= "<td  onclick=\" document.getElementById('marca').src='$valor' ; marcar('top-left') \" ><a href='#medio'  class='' >
    					<img class='img  ' src='$valor'>
    					</a></td>";
}

$imagen = "
	<div class='table-responsive'>
		<table class='table table table-condensed text-center '>
			<tr > 
				$imagen 
			</tr>
		</table>
	</div>";

?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title></title>
<meta name="description" content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Jcrop is not required by JavaScript Load Image, but included for the demo -->
<!-- <link rel="stylesheet" href="css/vendor/jquery.Jcrop.css"> -->
<!-- <link rel="stylesheet" href="css/demo.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<style type="text/css">
.fa{
font-size:60px;
}
#imagen_origina{
width: 800px;
}
.pin {
 text-align: center;
 border: solid 1px red;
  opacity: 0.5;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
    width: 80%;
   
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10;
    padding: 0;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    
}
</style>
</head>
<body>
<div class='container'>
		<div class='fileUpload btn btn-primary '>
		<span> <i class="fa fa-picture-o"></i> <span class='fa' > Imagen  <i class="fa fa-camera"></i>  </span>
		  <input class='upload'  type="file" id="file-input"  /></span>
		  <div id="original" ></div>
		  </div> 
</div>
<!-- <p><input type="file" id="file-input"></p>  -->
<div id="actions" style="display:none;">
<img class="center-block"  src= "<?php echo $tags[0]; ?>" style='display:none' id="marca" name="marca">
<img class="center-block"  style='' id="image_output" name="image_output">
<img class="center-block"  style='' id="otra_imagen" name="otra_imagen">
<input type="hidden"  id='identificador' name='identificador'>

<div id="result" class="result">
    <p></p>
</div>
<a name="arriba"></a>
<div style="position:relative">
	<div style="position:absolute;  width:100%; height:100%;" >
				<table style="width:100%; height:100%;" class="">
        	<tr  >
        	<td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-left')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-center')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-rigth')"><i class="fa fa-circle-o"></i></a></td>
        	</tr>
        	<tr>
        	<td class="pin"><a name="medio"></a><a href="#arriba" onclick=" javascript: marcar('middle-left')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('middle-center')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('middle-rigth')"><i class="fa fa-circle-o"></i></td>
        	</tr>
        	<tr>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-left')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-center')"><i class="fa fa-circle-o"></i></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-rigth')"><i class="fa fa-circle-o"></i></a></td>
        	</tr>

        	</table>
	</div>
	<canvas id="micanvas"  style="position:absolute" >
	Tu navegador no soporta canvas.
	</canvas>
</div>
</div>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}


function marcar(ubicacion){
	//if (ubicacion == 'arriba'){ var x = '0';var y = '0';}
	//if (ubicacion == 'abajo'){ var x = '10';var y = '50';}





   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');

   if(ctx){
      //Creo una imagen conun objeto Image de Javascript
      var img = new Image();
      var img2 = new Image();
      //img.src = document.getElementById("image_output2").src;
      //readAsDataURL(
      img.src = document.getElementById("imagen_original").src;
      document.getElementById("imagen_original").style.display="none"; 
      //img2.src = 'images/logos/a.png';
      img2.src = document.getElementById("marca").src;
      if (ubicacion =='') {
      	ubicacion ='middle-center';
      }
			x = 0,
			y = 0;
			if(ubicacion.indexOf("top")!=-1)
				y = 10;
			else if(ubicacion.indexOf("middle")!=-1)
				y = (micanvas.height - img2.height)/2;
			else
				y = micanvas.height-img2.height-10;
			
			if(ubicacion.indexOf("left")!=-1)
				x = 10;
			else if(ubicacion.indexOf("center")!=-1)
				x = (micanvas.width - img2.width) /2;
			else
				x = micanvas.width-img2.width-10;
				
				      
      
      var proporcion = ( img.height / img.width );
			var ancho  = 800;
			micanvas.width = ancho;
			micanvas.height = (micanvas.width * proporcion);
         micanvas.setAttribute('width', ancho);
         micanvas.setAttribute('height', micanvas.height);
         micanvas.setAttribute('style',"width:100%");

      img.onload = function(){
         ctx.drawImage(img, 0, 0,micanvas.width,micanvas.height);
         ctx.drawImage(img2, x, y);
         var identificador = Math.random();
			document.getElementById('identificador').value= identificador;
      }
   }
}

</script>

<br>
<script src="js/load-image.all.min.js"></script>
<!-- <script src="js/load-image.js"></script> -->
<!-- <script src="js/load-image-ios.js"></script> -->
<!-- <script src="js/load-image-orientation.js"></script> -->
<!-- <script src="js/load-image-meta.js"></script> -->
<!-- <script src="js/load-image-exif.js"></script> -->
<!-- <script src="js/load-image-exif-map.js"></script> -->
<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- <script src="js/vendor/jquery.Jcrop.js"></script> -->
<script src="js/demo.js"></script>
</body> 
</html>