forked from qwerty/tupali
511 lines
17 KiB
Plaintext
511 lines
17 KiB
Plaintext
<?php
|
|
//include("funciones/funciones.php");
|
|
$id_formulario = "58";
|
|
$ancho = "500";
|
|
|
|
$tags = array();
|
|
$tags[] = "milfs/addon/logis/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>";
|
|
|
|
?>
|
|
<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 1px red;
|
|
width:20% !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class='container' style='backgroun-color:white;' >
|
|
<div class='fileUpload btn btn-primary center-block'>
|
|
<span><h1><i class="fa fa-camera"></i></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>
|
|
<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" >
|
|
<input type='' 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'>Aviso</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<!-- this.disabled= true; xajax_wait('aviso','Grabando... un momento por favor...'); -->
|
|
<button class='fileUpload btn btn-success btn-block' onclick=" xajax_brigadistas_grabar(xajax.getFormValues('formulario_brigadistas'))">
|
|
<span><i class="fa fa-save"></i> <span class='fa'> Grabalo! </span></span>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script language="javascript">
|
|
|
|
$(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 ?>px')
|
|
.attr('style', 'width:100%')
|
|
.attr('id', 'imagen_original');
|
|
|
|
}
|
|
//document.getElementById('image_output').src = img.src;
|
|
result.children().replaceWith(content);
|
|
if (img.getContext) {
|
|
actionsNode.show();
|
|
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>')
|
|
);
|
|
}
|
|
},
|
|
displayExifData = function (exif) {
|
|
var thumbnail = exif.get('Thumbnail'),
|
|
tags = exif.getAll(),
|
|
table = exifNode.find('table').empty(),
|
|
row = $('<tr></tr>'),
|
|
cell = $('<td></td>'),
|
|
prop;
|
|
if (thumbnail) {
|
|
thumbNode.empty();
|
|
loadImage(thumbnail, function (img) {
|
|
thumbNode.append(img).show();
|
|
}, {orientation: exif.get('Orientation')});
|
|
}
|
|
for (prop in tags) {
|
|
if (tags.hasOwnProperty(prop)) {
|
|
table.append(
|
|
row.clone()
|
|
.append(cell.clone().text(prop))
|
|
.append(cell.clone().text(tags[prop]))
|
|
);
|
|
}
|
|
}
|
|
exifNode.show();
|
|
},
|
|
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(),
|
|
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>
|
|
<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();
|
|
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>')
|
|
);
|
|
}
|
|
},
|
|
displayExifData = function (exif) {
|
|
var thumbnail = exif.get('Thumbnail'),
|
|
tags = exif.getAll(),
|
|
table = exifNode.find('table').empty(),
|
|
row = $('<tr></tr>'),
|
|
cell = $('<td></td>'),
|
|
prop;
|
|
if (thumbnail) {
|
|
thumbNode.empty();
|
|
loadImage(thumbnail, function (img) {
|
|
thumbNode.append(img).show();
|
|
}, {orientation: exif.get('Orientation')});
|
|
}
|
|
for (prop in tags) {
|
|
if (tags.hasOwnProperty(prop)) {
|
|
table.append(
|
|
row.clone()
|
|
.append(cell.clone().text(prop))
|
|
.append(cell.clone().text(tags[prop]))
|
|
);
|
|
}
|
|
}
|
|
exifNode.show();
|
|
},
|
|
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(),
|
|
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>
|