208 lines
7.0 KiB
PHP
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>
|