JavaScript Cursor PositionCalcolare la posizione del cursore in JavaScript

11 gennaio 2012 Nessun commento

A volte è utile riuscire a calcolare la posizione del cursore sullo schermo, ma spesso sorgono problemi nel farlo nei diversi browser. Il seguente codice JavaScript dovrebbe riuscire a fare ciò su tutti i browser:

function getPosition(e) {
   e = e || window.event;
   var cursor = {x:0, y:0};
   if (e.pageX || e.pageY) {
      cursor.x = e.pageX;
      cursor.y = e.pageY;
   } else {
         var de = document.documentElement;
         var b = document.body;
         cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
         cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
   }
   return cursor;
}


function getPosition(e) { e = e || window.event; var cursor = {x:0, y:0}; if (e.pageX || e.pageY) { cursor.x = e.pageX; cursor.y = e.pageY; } else { var de = document.documentElement; var b = document.body; cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) – (de.clientLeft || 0); cursor.y = e.clientY + (de.scrollTop || b.scrollTop) – (de.clientTop || 0); } return cursor; }

JavaScript Cursor PositionCalcolare la posizione del cursore in JavaScript" tw:url="http://www.alessandrolanza.com/2012/01/11/javascript-cursor-position/">
-->

Convertire HTML5 Canvas in PNG

22 dicembre 2011 Nessun commento

Per concludere il ciclo di questi articoli iniziato con questo ed il successivo, oggi voglio illustrarvi brevemente come si converte un canvas (elemento del nuovo HTML5) in PNG.

La procedura è molto semplice: client-side possiamo convertire il canvas in una immagine PNG utilizzando il metodo nativo del componente toDataURL

// seleziono dal DOM l'elemento canvas che ha per id il valore canvasID
var canvas = document.getElementById('canvasID');
// converto il canvas in PNG
canvas.toDataURL("image/png")

Il metodo toDataURL restituirà un valore simile a

data:image/png;base64,IMAGE_CODE_BASE64

ora è sufficiente passare questo valore al server e server-side decodifichiamo ciò che si trova dopo “base64,” ad esempio eseguendo in PHP

base64_decode(substr( $data , strpos( $data , "," ) + 1 ))

dove $data è ciò che riceviamo dal client dopo la conversione con il metodo toDataURL.

A questo punto è sufficiente scrivere sul file system, in un file salvato con estensione .png, ciò che otteniamo dalla decodifica base64.

Convertire HTML5 Canvas in PNG" tw:url="http://www.alessandrolanza.com/2011/12/22/convertire-html5-canvas-in-png/">
-->
Categorie:web Tag: , , , ,

Convertire SVG in PNGConvertire SVG in PNG

21 dicembre 2011 Nessun commento

Come promesso nel precedente articolo, in questo cercherò di illustrare come salvare un SVG in PNG. I metodi da me testati sono due:

  1. usando una libreria PHP chiamata ImageMagick
  2. usando uno script JavaScript chiamato phantomjs

Con ImageMagick bastano le seguenti poche istruzioni per salvare su filesystem il PNG:

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);
$im->readImageBlob($svg);
$im->setImageFormat("png24");
$im->writeImage('/path/to/colored/us-map.png');
$im->clear();
$im->destroy();

Quello che ho potuto constatare usando ImageMagick è che sorgono dei problemi quando l’SVG contiene dei CSS i cui effetti non vengono riportati nel PNG ottenuto dopo la conversione.

Mentre per convertire usando phantomjs, è sufficiente scaricare (in base al proprio sistema operativo) phantomjs da qui spostare la dir ottenuta dopo la decompressione in una posizione sul proprio file system ed eseguire nel proprio script PHP le seguenti istruzioni:

/* per spostarsi nella dir dove abbiamo il nostro phantomjs */
chdir('path/to/phantomjs');
/* per eseguire phantomjs */
exec("phantomjs rasterize.js $url /path/where/save/my.png);

Da notare nel metodo exec:

  • phantomjs è la chiamata al file exe contenuto nella dir
  • rasterize.js è uno script JavaScript che troviamo nella cartella example dopo aver scaricato la libreria
  • $url è una variabile all’URL dove abbiamo il nostro SVG
  • è possibile aggiungere altri parametri all’esecuzione di phantomjs, per approfondire vedere la documentazione

Per quanto riguarda questa soluzione direi che sembra un po’ macchinosa, ma il risultato devo dire che è stato soddisfacente.Come promesso nel precedente articolo, in questo cercherò di illustrare come salvare un SVG in PNG. I metodi da me testati sono due:

  1. usando una libreria PHP chiamata ImageMagick
  2. usando uno script JavaScript chiamato phantomjs

Con ImageMagick bastano le seguenti poche istruzioni per salvare su filesystem il PNG:

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);
$im->readImageBlob($svg);
$im->setImageFormat("png24");
$im->writeImage('/path/to/colored/us-map.png');
$im->clear();
$im->destroy();

Quello che ho potuto constatare usando ImageMagick è che sorgono dei problemi quando l’SVG contiene dei CSS i cui effetti non vengono riportati nel PNG ottenuto dopo la conversione.

Mentre per convertire usando phantomjs, è sufficiente scaricare (in base al proprio sistema operativo) phantomjs da qui spostare la dir ottenuta dopo la decompressione in una posizione sul proprio file system ed eseguire nel proprio script PHP le seguenti istruzioni:

chdir('path/to/phantomjs'); /* per spostarsi nella dir dove abbiamo il nostro phantomjs */
exec("phantomjs rasterize.js $url /path/where/save/my.png); /* per eseguire phantomjs */

Da notare nel metodo exec:

  • phantomjs è la chiamata al file exe contenuto nella dir
  • rasterize.js è uno script JavaScript che troviamo nella cartella example dopo aver scaricato la libreria
  • $url è una variabile all’URL dove abbiamo il nostro SVG
  • è possibile aggiungere altri parametri all’esecuzione di phantomjs, per approfondire vedere la documentazione

Per quanto riguarda questa soluzione direi che sembra un po’ macchinosa, ma il risultato devo dire che è stato soddisfacente.

Convertire SVG in PNGConvertire SVG in PNG" tw:url="http://www.alessandrolanza.com/2011/12/21/come-convertire-un-svg-in-png/">
-->
Categorie:web Tag: , , , ,