forked from qwerty/milfs
413 lines
12 KiB
PHP
413 lines
12 KiB
PHP
<?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>
|
|
|
|
|