tupali_fork/milfs/addon/logis/logis.php.php
2016-10-29 10:07:15 -05:00

208 lines
7.0 KiB
PHP

<?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>";
?>
<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>