<?php //include("funciones/funciones.php"); $tags = array(); $tags[] = "milfs/addon/marcador/images/fb198e8742561eb1a9d8da9d95fddeae.png"; $tags[] = "milfs/addon/marcador/images/fca0a98bc665e9f026d5ea4331046893.png"; $tags[] = "milfs/addon/marcador/images/054843d530f3c83fcdbd55e688d874ec.png"; $id_formulario = "58"; foreach ($tags as &$valor) { $imagen .= "<a href='#' class='list-group-item ' onclick=\" document.getElementById('marca').src='$valor' \" > <img class='img img-responsive center-block' src='$valor'> </a>"; } $imagen = "<div class='container-fluid'><ul class='list-group list-inline'>$imagen<div><div class='clearfix'></ul></div>"; ?> <script src="https://9b8d22ae00fff2954b7cdd00a6feb4176bc56576.googledrive.com/host/0B7R2T-U-1ZrheTlfaHNQMm0zTWM/plump_modernizr.js"></script> <style type="text/css"> .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:50px; } #downlink_hidden , #canvas_ed, #original{ display:none; } #body{ background-color: white; } </style> <div id ="body" class="container-fluid"> <div id="div_marcador" class="container"> <?php echo $imagen; ?> <div class="row"> <div class="col-md-12"> <div class='fileUpload btn btn-primary btn-block'> <span> <i class="fa fa-picture-o"></i> <input class='upload' type="file" id="files" name="files[]" /></span> <div id="original" ></div> </div> </div> </div> <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'> <a name="abajo"></a> <div style="background-color:; " > <img class="center-block" style='display: none' 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"> <div class="col-md-12"> <form id='formulario_marcador' > <input type='hidden' id="debugConsole" name="debugConsole" > <?php $formulario = formulario_areas("$id_formulario",'campos','',''); echo $formulario; ?> </form> </div> </div> <div class="row"> <div class="col-md-12"> <div class='fileUpload btn btn-success btn-block' onclick="saveViaAJAX(); xajax_marcador_grabar(xajax.getFormValues('formulario_marcador'))"><span><i class="fa fa-save"></i></span> </div> <div id='aviso'></div> </div> </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() { /* function loadCanvas(id) { var canvas = document.createElement('canvas'); div = document.getElementById(id); canvas.id = "CursorLayer"; canvas.width = 1224; canvas.height = 768; canvas.style.zIndex = 8; canvas.style.position = "absolute"; canvas.style.border = "1px solid"; div.appendChild(canvas) } */ $(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; } </script> <script> 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:max-600px;" 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 = "watermark.png?"+(+(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 = 600; //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/marcador/images/054843d530f3c83fcdbd55e688d874ec.png" }); } </script>