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