<?php //include("funciones/funciones.php"); $id_formulario = "58"; $ancho = "600"; $tags = array(); $tags[] = "milfs/addon/logis/images/logos/250.png"; $imagen=""; 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>"; ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div> <style type="text/css"> .fa{ font-size:60px important!; } #imagen_origina{ width: <?echo $ancho ?>px; } body{ background-color:white !important; } .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); } .ing-touch{ border: solid 5px white; width:20% !important; } </style> <div class='container' style='height:100%; backgroun-color:white;' id='aviso'> <div class='fileUpload btn btn-primary center-block'> <span><h1><i class="fa fa-camera"></i> + tu Foto</h1></span> <input class='upload' type="file" id="file-input" /></span> <div id="original" ></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"> <div id="result" class="result"> <p></p> </div> <a name="arriba"></a> <canvas id="micanvasOriginal" style="position:absolute" > Tu navegador no soporta canvas. </canvas> <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')"><img class="ing-touch img img-circle img-responsive center-block " style="width:20%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:20%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> </tr> <tr> <td class="pin"><a name="medio"></a><a href="#arriba" onclick=" javascript: marcar('middle-left')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin" ><a href="#medio" onclick=" javascript: marcar('middle-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin"><a href="#medio" onclick=" javascript: marcar('middle-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></td> </tr> <tr> <td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-left')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> <td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;" src="milfs/images/oscuro40.png"></a></td> </tr> </table> </div> <canvas id="micanvas" style="position:absolute" > Tu navegador no soporta canvas. </canvas> </div> <div class="row " style="position:relative"> <form id='formulario_brigadistas' name='formulario_brigadistas' > <!-- <input class='form-control' type='' id="debugConsole" name="debugConsole" > --> <textarea class='form-control' id="debugConsole" name="debugConsole" style="display:none;" ></textarea> <input type='hidden' id="identificador" name="identificador" > <input type='hidden' id="formulario_id" name="formulario_id" value="<?php echo $id_formulario; ?>"> <input type='hidden' id="imagen" name="imagen" value=""> <?php $formulario = formulario_areas("$id_formulario",'campos','',''); echo $formulario; ?> </form> </div> <!-- <div id='aviso'></div> --> <div class="row"> <div class="col-md-12"> <!-- this.disabled= true; xajax_wait('aviso','Grabando... un momento por favor...'); xajax_brigadistas_grabar(xajax.getFormValues('formulario_brigadistas')) --> <!-- <button class='fileUpload btn btn-success btn-block' onclick="document.getElementById('formulario_brigadistas').submit(); "> --> <button class='fileUpload btn btn-success btn-block' onclick=" xajax_wait('aviso','Grabando... un momento por favor...'); xajax_brigadistas_grabar(xajax.getFormValues('formulario_brigadistas')) ; "> <span><i class="fa fa-save"></i> <span class='fa'> Grabalo! </span></span> </button> </div> </div> </div> <?php $ultimo = formulario_uso("$id_formulario",'','ultimo') ; //echo $ultimo[1]; echo mostrar_identificador("$ultimo[1]","","landingpage",'simple'); ?> </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 = <?echo $ancho ?>; 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 debugConsole= document.getElementById("debugConsole"); var testCanvas = document.getElementById("micanvas"); var canvasData = testCanvas.toDataURL("image/png"); var postData = "canvasData="+canvasData; debugConsole.value=canvasData; var identificador = Math.random(); document.getElementById('identificador').value= identificador; } } } $(function () { 'use strict'; var result = $('#result'), exifNode = $('#exif'), thumbNode = $('#thumbnail'), actionsNode = $('#actions'), currentFile, replaceResults = function (img) { var content; if (!(img.src || img instanceof HTMLCanvasElement)) { content = $('<span>Loading image file failed</span>'); } else { content = $('<img />').append(img) //.attr('download', currentFile.name) .attr('src', img.src || img.toDataURL()) .attr('width', '<?echo $ancho ?>') .attr('style', 'width:100%') .attr('id', 'imagen_original'); } //document.getElementById('image_output').src = img.src; result.children().replaceWith(content); if (img.getContext) { actionsNode.show(); /// render(img.src); window.setTimeout("marcar('middle-center');", 500); } }, displayImage = function (file, options) { currentFile = file; if (!loadImage( file, replaceResults, options )) { result.children().replaceWith( $('<span>Your browser does not support the URL or FileReader API.</span>') ); } }, dropChangeHandler = function (e) { e.preventDefault(); e = e.originalEvent; var target = e.dataTransfer || e.target, file = target && target.files && target.files[0], options = { //maxWidth: result.width(), maxWidth: <?echo $ancho ?>, canvas: true }; if (!file) { return; } exifNode.hide(); thumbNode.hide(); loadImage.parseMetaData(file, function (data) { if (data.exif) { options.orientation = data.exif.get('Orientation'); // displayExifData(data.exif); } displayImage(file, options); }); }, coordinates; // Hide URL/FileReader API requirement message in capable browsers: if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) { result.children().hide(); } $(document) .on('dragover', function (e) { e.preventDefault(); e = e.originalEvent; e.dataTransfer.dropEffect = 'copy'; }) .on('drop', dropChangeHandler); $('#file-input').on('change', dropChangeHandler); $('#edit').on('click', function (event) { event.preventDefault(); var imgNode = result.find('img, canvas'), img = imgNode[0]; imgNode.Jcrop({ setSelect: [40, 40, img.width - 40, img.height - 40], onSelect: function (coords) { coordinates = coords; }, onRelease: function () { coordinates = null; } }).parent().on('click', function (event) { event.preventDefault(); }); }); $('#crop').on('click', function (event) { event.preventDefault(); var img = result.find('img, canvas')[0]; if (img && coordinates) { replaceResults(loadImage.scale(img, { left: coordinates.x, top: coordinates.y, sourceWidth: coordinates.w, sourceHeight: coordinates.h, minWidth: result.width() })); coordinates = null; } }); }); </script> <br> <script src="milfs/addon/logis/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> --> </div>