Crear marcas de agua con #PHP by @tednologia

Fuente: http://tednologia.com/marcas-de-agua-php/

Añadir o crear marcas de agua a una imagen se utiliza bastante para dejar los créditos en una imagen, realizar esto de forma automática con PHP nos ahorrara tiempo en abrir un programa de edición de imágenes para ponerlo manualmente, ahora solo tendremos que ponerlo como una función antes de hacer el upload o mejor aún si tenemos los archivos en un directorio podemos recorrerlo y agregarle marcas de agua masivamente.

ImageWorkshop es una Clase PHP que utiliza la librería GD para agregar capas de imágenes fácilmente (igual que en Photoshop o GIMP).

Tutorial

Vamos a añadir una marca de agua en una imagen de diferentes formas, solo texto, con imagen, con transparencia, vertical y en diagonal.

Estas son las imágenes que utilizaremos:

1- Agregar texto como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
require_once('imageworkshop.php');
 
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$textLayer = new ImageWorkshop(array(
    "text" => "PHP Image Workshop",
    "fontPath" => "arial.ttf",
    "fontSize" => 14,
    "fontColor" => "ffffff",
    "textRotation" => 0,
));
 
$norwayLayer->addLayer(1, $textLayer, 12, 12, "LB");
$image = $norwayLayer->getResult();
 
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
addLayer([nivel], [subcapa], [x], [y], [posicion]);

En este metodo podemos pasar por

parametros el nivel de la capa (nivel), en que capa se agregara (subcapa), las coordenadas horizontal (x) y vertical (y), y la posicion que podra ser seran LB (Left, Bottom), RT (Right Top), etc.

2- Agregar imagen como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
3- Agregar imagen con opacidad como marca de agua

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
$watermarkLayer->opacity(60);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LB");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
4- Agregar imagen como marca de agua y rotarla

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$watermarkLayer = new ImageWorkshop(array(
    "imageFromPath" => "android.jpg",
));
//$watermarkLayer->opacity(60);
$watermarkLayer->rotate(90);
$norwayLayer->addLayer(1, $watermarkLayer, 12, 12, "LT");
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);
5- Agregar texto en diagonal como marca de agua y rotarla

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function calculAngle($bottomSideWidth, $leftSideWidth)
{
    $hypothenuse = sqrt(pow($bottomSideWidth, 2) + pow($leftSideWidth, 2));
    $bottomRightAngle = acos($bottomSideWidth / $hypothenuse) + 180 / pi();
     
    return -round(90 - <div style="display: none"><a href='http://generic--viagra.net/'>buy generic viagra</a></div> $bottomRightAngle);
}
 
$norwayLayer = new ImageWorkshop(array(
    "imageFromPath" => "sgs3.jpg",
));
 
$textLayer = new ImageWorkshop(array(
    "text" => "PHP Image Workshop",
    "fontPath" => "arial.ttf",
    "fontSize" => 40,
    "fontColor" => "ffffff",
    "textRotation" => calculAngle($norwayLayer->getWidth(), $norwayLayer->getHeight()),
));
 
// Some funky opacity
$textLayer->opacity(70);
 
// We add the $textLayer on the norway layer, in its middle
$norwayLayer->addLayer(1, $textLayer, 0, 0, 'MM');
 
$image = $norwayLayer->getResult();
header('Content-type: image/jpeg');
 
imagejpeg($image, null, 95);

Descargar ejemplos

Documentación

#php quitarle a un #string los #tags de #html

Fuente: http://informaticapc.com/tutorial-php/limpiar-texto-html.php

Con la funcion strip_tags eliminaremos cualquier marca de html dejando la cadena de texto limpia. Ejemplo:

$cadena = «<p align=’left’><span>Texto de ejemplo</span></p><!– Comentario –>»;

echo strip_tags( $cadena ); // Devuelve: «Texto de ejemplo»

#php strip_tags() : quitar las marcas y etiquetas #html y php de un string

Se me estaba dando el caso en el que quería hacer la típica sección en la que salen todas las noticias con solamente un par de párrafos y luego un botón leer mas para verlas en detalle.

Para que sea una lista agradable de ver la idea es mostrar x caracteres de la descripción y cortar para no soltar todo el matroncho en la misma sección y que se te canse el dedo de darle a la rueda del ratón bajando el scroll para ver todas las noticias.

Todo muy guapo hasta que me di cuenta de que el php estaba recontando no solo los caracteres introducidos por el usuario para la noticia si no que también estaba contando las etiquetas html (<br>, <a>, <noseque>)

Con esta salvadora funcion strip_tags() problema solucionado, procesa la cadena de texto que queremos cortar para dejar solo el contenido fundamental y poder contar asi los caracteres que realmente se van a mostrar

En la documentacion comentan que cuidadin con esta funcion porque a veces puede ser que se cepille alguna frase entera, os dejo el enlace

Aunque San Google os socorrera mas rapidamente que yo, espero haber sido de ayuda a alguien

Documentacion en php.net

google maps cluster xml – agrupar iconos marcas chinchetas para que no se superpongan con javascript by geocodezip.com

Fuente : geocodezip.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

    <title>Google Maps Javascript API v3 Example: Loading clustered data from an XML</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<script type="text/javascript" src="scripts/downloadxml.js"></script>

<style type="text/css">

html, body { height: 100%; } 

</style>

<script type="text/javascript"> 

//<![CDATA[

      // this variable will collect the html which will eventually be placed in the side_bar 

      var side_bar_html = ""; 

    

      // arrays to hold copies of the markers and html used by the side_bar 

      // because the function closure trick doesnt work there 

      var gmarkers = []; 



     // global "map" variable

      var map = null;

      var markerclusterer = null;



// A function to create the marker and set up the event window function 

function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({

        position: latlng,

        // map: map,

        zIndex: Math.round(latlng.lat()*-100000)<<5

        });



    google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent(contentString); 

        infowindow.open(map,marker);

        });

    // save the info we need to use later for the side_bar

    gmarkers.push(marker);

    // add a line to the side_bar html

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

}

 

// This function picks up the click and opens the corresponding info window

function myclick(i) {

  google.maps.event.trigger(gmarkers[i], "click");

}



function initialize() {

  // create the map

  var myOptions = {

    zoom: 8,

    center: new google.maps.LatLng(43.907787,-79.359741),

    mapTypeControl: true,

    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},

    navigationControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  google.maps.event.addListener(map, 'click', function() {

        infowindow.close();

        });

      // Read the data from example.xml

      downloadUrl("cga-3_gndc_harvard_edu_cluster.xml", function(doc) {

        var xmlDoc = xmlParse(doc);

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker

          var lat = parseFloat(markers[i].getAttribute("lat"));

          var lng = parseFloat(markers[i].getAttribute("lng"));

          var point = new google.maps.LatLng(lat,lng);

          var id = markers[i].getAttribute("id");

          var country = markers[i].getAttribute("country");

          var html="<b>"+country+"</b><br>"+id;

          // create the marker

          var marker = createMarker(point,country+" "+id,html);

        }

        markerCluster = new MarkerClusterer(map, gmarkers);

        // put the assembled side_bar_html contents into the side_bar div

        document.getElementById("side_bar").innerHTML = side_bar_html;

      });

    }

 

var infowindow = new google.maps.InfoWindow(

  { 

    size: new google.maps.Size(150,50)

  });

    



    // This Javascript is based on code provided by the

    // Community Church Javascript Team

    // http://www.bisphamchurch.org.uk/   

    // http://econym.org.uk/gmap/

    // from the v2 tutorial page at:

    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 



  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

 

    <!-- you can use tables or divs for the overall layout --> 

    <table border="1"> 

      <tr> 

        <td> 

           <div id="map_canvas" style="width: 550px; height: 450px"></div> 

        </td> 

        <td valign="top" > 

           <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> 

        </td> 

      </tr> 

    </table> 

 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 

      However, it seems JavaScript is either disabled or not supported by your browser. 

      To view Google Maps, enable JavaScript by changing your browser options, and then 

      try again.</p>

    </noscript> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 

</script> 

<script type="text/javascript"> 

_uacct = "UA-162157-1";

urchinTracker();

</script> 

<script type="text/javascript"><!--

google_ad_client = "pub-8586773609818529";

google_ad_width = 728;

google_ad_height = 90;

google_ad_format = "728x90_as";

google_ad_type = "text";

google_ad_channel ="";

google_color_border = "CCCCCC";

google_color_bg = "FFFFFF";

google_color_link = "000000";

google_color_url = "666666";

google_color_text = "333333";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 

<div id="w3valid">

    <a href="http://validator.w3.org/check?uri=referer" ><!-- target="validationresults" --><img

        src="http://www.w3.org/Icons/valid-xhtml10"

        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

</div>   

  </body> 

</html> 

Y el xml

<markers>

<marker id="12253" lat="43.369810" lng="-8.395300" country="Spain"/>

<marker id="12256" lat="43.316570" lng="-5.711210" country="Spain"/>

<marker id="12258" lat="43.252700" lng="-2.386930" country="Spain"/>

</markers>

Solo añado tres marcas para ver el ejemplo del codigo, para ver el xml completo pincha aqui