tupali_fork/milfs/addon/brigada/.goutputstream-WQKM8X
2016-10-29 10:07:15 -05:00

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>