milfs/addon/brigadistas/brigadistas.php

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