kleper
/
milfskleper
forked from qwerty/milfs
1
0
Fork 0
Code Releases Activity
milfskleper/addon/brigadistas/brigadistas.php

437 lines
13 KiB
PHP
Raw Permalink Blame History

<?php
//include("funciones/funciones.php");
$id_formulario = "58";
$ancho = "600";
$tags = array();
$tags[] = "milfs/addon/brigadistas/images/logos/a.png";
$tags[] = "milfs/addon/brigadistas/images/logos/b.png";
$tags[] = "milfs/addon/brigadistas/images/logos/c.png";
foreach ($tags as &$valor) {
$imagen .= "<td><a href='#medio' class='' onclick=\" document.getElementById('marca').src='$valor' \" >
<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://9b8d22ae00fff2954b7cdd00a6feb4176bc56576.googledrive.com/host/0B7R2T-U-1ZrheTlfaHNQMm0zTWM/plump_modernizr.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/cabin" type="text/css"/>
<style type="text/css">
body {
font-family: 'CabinRegular';
font-weight: normal;
font-style: normal;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 10;
padding: 0;
font-size: 50px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.fa{
font-size:60px;
}
#downlink_hidden , #fieldset_General , #canvas_ed , #original{
display:none;
}
#body{
background-color: white;
}
#aviso{
background-color: gray;
width: 100%;
}
</style>
<div id='aviso'>
<div id ="body" class="container" >
<div id="div_brigadistas" class="">
<span class='btn btn-primary btn-block' > <!-- <i class="fa fa-picture-o"></i> --> <span class='fa' > Elige un Logo </span></span>
<?php echo $imagen; ?>
<a name="medio"></a>
<div class="row">
<div class="col-md-12">
<div class='fileUpload btn btn-primary btn-block'>
<span> <i class="fa fa-picture-o"></i> <span class='fa' > Sube una imágen</span>
<input class='upload' type="file" id="files" name="files[]" /></span>
<div id="original" ></div>
</div>
</div>
</div>
<a name="abajo"></a>
<div class="row">
<div class="col-md-12">
<div class='container-fluid'>
<table style="" class="table text-center table-responsive">
<tr>
<td><a href="#abajo" onclick=" javascript: marcar('top-left')"><i class="fa fa-caret-square-o-left"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('top-center')"><i class="fa fa-caret-square-o-up"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('top-rigth')"><i class="fa fa-caret-square-o-right"></i></a></td>
</tr>
<tr>
<td><a href="#abajo" onclick=" javascript: marcar('middle-left')"><i class="fa fa-caret-square-o-left"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('middle-center')"><i class="fa fa-circle-o"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('middle-rigth')"><i class="fa fa-caret-square-o-right"></i></td>
</tr>
<tr>
<td><a href="#abajo" onclick=" javascript: marcar('bottom-left')"><i class="fa fa-caret-square-o-left"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('bottom-center')"><i class="fa fa-caret-square-o-down"></i></a></td>
<td><a href="#abajo" onclick=" javascript: marcar('bottom-rigth')"><i class="fa fa-caret-square-o-right"></i></a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- editor -->
<div class='container-fluid'>
<div style="background-color:; " >
<img class="center-block" style='' id="marca" name="marca">
<div id="list" style=" "></div>
<img id='image_output2' name='image_output2' src="" class="" />
<div id='div_canvas' style='display: none'> </div>
</div>
</div>
<div class="row">
<form id='formulario_brigadistas' name='formulario_brigadistas' >
<input type='hidden' id="debugConsole" name="debugConsole" >
<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 class="row">
<div class="col-md-12">
<!-- -->
<button class='fileUpload btn btn-success btn-block' onclick=" this.disabled= true; xajax_wait('aviso','Grabando... un momento por favor...'); saveViaAJAX(); xajax_brigadistas_grabar(xajax.getFormValues('formulario_brigadistas'))">
<span><i class="fa fa-save"></i> <span class='fa'> Grabalo! </span></span>
</button>
</div>
</div>
</div><!-- fin aviso -->
</div>
</div>
<script type="text/javascript">
function convertImageToCanvas(i, image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
$("body").append(canvas);
};
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function saveViaAJAX()
{
$(document).ready(function() {
function convertImageToCanvas(i, image) {
var canvasOld = document.getElementById("holamundo");
// canvasOld.holamundo.removeChild(canvasOld);
document.getElementById("div_canvas").innerHTML=""
var canvas = document.createElement("canvas");
div = document.getElementById('div_canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.id = "holamundo";
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
div.appendChild(canvas);
};
$('.watermark').each(convertImageToCanvas);
});
var testCanvas = document.getElementById("holamundo");
var canvasData = testCanvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;
}
function archivo(evt) {
var files = evt.target.files; // FileList object
// Obtenemos la imagen del campo "file".
for (var i = 0, f; f = files[i]; i++) {
//Solo admitimos imágenes.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Insertamos la imagen
document.getElementById("original").innerHTML = ['<img id="image_output2" name="image_output2" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById("list").innerHTML = ['<img style="width:<?php echo $ancho; ?>px;" id="image_output" name="image_output" class="img img-responsive watermark center-block" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', archivo, false);
/* marca */
(function(w){
var wm = (function(w){
var doc = w.document,
gcanvas = {},
gctx = {},
imgQueue = [],
className = "watermark",
watermark = false,
watermarkPosition = "bottom-right",
watermarkPath = "<?php echo $tags['1']; ?>"+(+(new Date())),
opacity = (255/(100/50)), // 50%
initCanvas = function(){
gcanvas = doc.createElement("canvas");
gcanvas.style.cssText = "display:none;";
gctx = gcanvas.getContext("2d");
doc.body.appendChild(gcanvas);
},
initWatermark = function(){
watermark = new Image();
watermark.src = "";
watermark.src = watermarkPath;
if(opacity != 255){
if(!watermark.complete)
watermark.onload = function(){
applyTransparency();
}
else
applyTransparency();
}else{
applyWatermarks();
}
},
// function for applying transparency to the watermark
applyTransparency = function(){
var w = watermark.width || watermark.offsetWidth,
h = watermark.height || watermark.offsetHeight;
setCanvasSize(w, h);
gctx.drawImage(watermark, 0, 0);
var image = gctx.getImageData(0, 0, w, h);
var imageData = image.data,
length = imageData.length;
for(var i=3; i < length; i+=4){
imageData[i] = (imageData[i]<opacity)?imageData[i]:opacity;
}
image.data = imageData;
gctx.putImageData(image, 0, 0);
watermark.onload = null;
watermark.src = "";
watermark.src = gcanvas.toDataURL();
// assign img attributes to the transparent watermark
// because browsers recalculation doesn't work as fast as needed
watermark.width = w;
watermark.height = h;
applyWatermarks();
},
configure = function(config){
if(config["watermark"])
watermark = config["watermark"];
if(config["path"])
watermarkPath = config["path"];
if(config["position"])
watermarkPosition = config["position"];
if(config["opacity"])
opacity = (255/(100/config["opacity"]));
if(config["className"])
className = config["className"];
initCanvas();
initWatermark();
}
setCanvasSize = function(w, h){
gcanvas.width = w;
gcanvas.height = h;
},
applyWatermark = function(img){
/*
var f = image.height / image.width;
var newHeight = canvas.width * f;
*/
var proporcion = ( img.height / img.width );
var ancho = <?php echo $ancho; ?>;
//var alto_orginal = img.height;
//var alto = (alto_original * proporcion);
//alert("hola pro"+alto);
gcanvas.width = ancho;// || img.offsetWidth;
//gcanvas.width = img.width || img.offsetWidth;
//gcanvas.height = img.height || img.offsetHeight;
gcanvas.height = (gcanvas.width * proporcion);// || img.offsetHeight;
gctx.drawImage(img, 0, 0,ancho,gcanvas.height);
var position = watermarkPosition,
x = 0,
y = 0;
if(position.indexOf("top")!=-1)
y = 20;
else if(position.indexOf("middle")!=-1)
y = (gcanvas.height -watermark.height)/2;
else
y = gcanvas.height-watermark.height-20;
if(position.indexOf("left")!=-1)
x = 20;
else if(position.indexOf("center")!=-1)
x = (gcanvas.width - watermark.width) /2;
else
x = gcanvas.width-watermark.width-20;
gctx.drawImage(watermark, x, y);
img.onload = null;
img.src = gcanvas.toDataURL();
},
applyWatermarks = function(){
setTimeout(function(){
var els = doc.getElementsByClassName(className),
len = els.length;
while(len--){
var img = els[len];
if(img.tagName.toUpperCase() != "IMG")
continue;
if(!img.complete){
img.onload = function(){
applyWatermark(this);
};
}else{
applyWatermark(img);
}
}
},10);
};
return {
init: function(config){
configure(config);
}
};
})(w);
w.wmark = wm;
})(window);
/* marca */
</script>
<script>
function marcar(position){
var position = position;
var original = document.getElementById('image_output2').src ;
var marca = document.getElementById('marca').src ;
document.getElementById('image_output').src = original ;
wmark.init({
/* config goes here */
"position": position, // default "bottom-right"
"opacity": 100, // default 50
"className": "watermark", // default "watermark"
"path": marca
// "path": "../milfs/addon/machitroll/images/054843d530f3c83fcdbd55e688d874ec.png"
});
var identificador = Math.random();
document.getElementById('identificador').value= identificador;
//window.setTimeout("saveViaAJAX()", 3000); ///
//saveViaAJAX(); ///
//xajax_wait('aviso','Subiendo imágen');
//window.setTimeout("xajax_machitroll_grabar_imagen(document.getElementById('debugConsole').value,"+identificador+")", 5000);
}
</script>
View Git Blame Copy Permalink