Guide On-line
Il Blog di Hosting SolutionsBlog Facebook Twitter Instagram YouTube

Guide - Utilità, Esempi

Server Object ASPImage

Su tutti i piani hosting Windows è installata la libreria ASPImage di Server Object. Questa libreria consente di creare immagini e di modificare immagini esistenti. Di seguito sono riportati alcuni esempi di utilizzo, nello specifico: come creare un'immagine contenente un testo; come creare dei grafici; come ridimensionare un'immagine (ad es. thumbnail).Inoltre, la libreria AspImage è in grado anche di costruire animazioni GIF.

NOTA BENE Se gli script che utilizzano questa libreria salvano la nuova immagine nello spazio del piano hosting, assicurarsi che la cartella destinazione sia configurata con adeguati permessi di scrittura, impostabili dal pannello di controllo nella sezione gestione permessi cartelle e files

Di seguito, quindi:

Creazione di una nuova immagine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<title> ASPImage - test </title>
</head>
<body>

<%
Set Image = Server.CreateObject("AspImage.Image")
  ' imposta i parametri del testo
  Image.FontColor = vbblue
  Image.Italic = True
  Image.Bold = True
  Image.FontName = "Arial"
  Image.FontSize = 12
  Image.PadSize = 10
  ' calcola la dimensione dell'immagine in base al testo 
  ' questo deve essere fatto poiché stiamo per riempire l'area con una sfumatura
  strMessage = "ciao!!!"
  Image.MaxX = Image.TextWidth (strMessage)
  Image.MaxY = Image.TextHeight (strMessage)
  ' creazione della sfumatura
  Image.GradientOneWay vbRed, vbWhite, 0
  ' stampiamo il testo sull'immagine
  Image.TextOut strMessage, Image.X, Image.Y, false
  ' impostiamo il nome del file e salviamo, indicando il percorso fisico
  Image.FileName = server.MapPath("/") & "/images/messaggio.jpg"
  if Image.SaveImage then
    ' ora che l'immagine è stata salvata, 
	' possiamo scrivere il tag HTML che la mostrerà sul browser
    Response.Write "<img src=""images/messaggio.jpg"">"
  else
    ' qualcosa è andato storto
    Response.Write "<h2>qualcosa è andato storto</h2>"
  end if
Set Image = nothing
%>
</body>
</html>

Nel seguente esempio è possibile vedere come venga creato, dopo l'impostazione dei parametri del testo, uno sfondo sfumato verticalmente dal rosso al bianco, tramite il metodo .GradientOneWay. Per utilizzare questo metodo è necessario prima impostare le caratteristiche dimensionali dell'immagine, ovvero .MaxX e .MaxY. Il testo viene aggiunto all'immagine tramite il metodo .TextOut.

Una volta impostato il nome dell'immagine tramite la proprietà .FileName (ricordatevi di utilizzare un percorso fisico), potrete salvare l'immagine sul server tramite il metodo .SaveImage.

Nell'immagine seguente si può vedere il risultato dello script:

Creazione di un grafico di funzione

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<title> ASPImage - sin(x) </title>
</head>
<body>
<%
Set Image = Server.CreateObject("AspImage.Image")
  ' impostazione del testo
  Image.FontColor = RGB(&hFF, &hFF, &hFF)
  Image.Italic = True
  Image.Bold = True
  Image.FontName = "Arial"
  Image.FontSize = 12
  ' colora lo sfondo: ATTENZIONE, il metodo GradientOneWay 
  ' necessita che prima sia dimensionata l'immagine
  Image.MaxX = 400
  Image.MaxY = 200
  Image.GradientOneWay RGB(&h00, &h00, &h00), RGB(&hFF, &hFF, &hFF), 0
  ' imposta il colore del pennello per disegnare l'ascissa
  Image.PenColor = RGB(&hFF, &hFF, &hFF)
  Image.PenWidth = 1
  Image.X = 0
  Image.Y = int(Image.MaxY / 2)
  Image.LineTo Image.MaxX,int(Image.MaxY / 2)
  ' disegno del grafico: imposta il colore del pennello
  Image.PenColor = RGB(&hFF, &hFF, &h00)
  Image.PenWidth = 2
  Image.X = 0
  Image.Y = int(Image.MaxY / 2)
  xnumerico = 6.28
  passo = xnumerico / Image.MaxX 
  i = 0
  do while i<=xnumerico
    y = int(int(Image.MaxY / 2) - sin(i)/passo)
    x =  int(i/passo)
    Image.LineTo x, y
    i = i + passo
  loop
  Image.TextOut "y=sin(x)", 0, 0, false
  Image.FileName = server.MapPath("/") & "/images/grafico.jpg"
  if Image.SaveImage then
    Response.Write "<img src=""images/grafico.jpg"">"
  else
    Response.Write "<h2>qualcosa è andato storto</h2>"
  end if
Set Image = nothing
%>
</body>
</html>

In questo esempio viene utilizzato il metodo .LineTo per tracciare una linea dalla posizione cursore corrente alle coordinate x,y in ingresso. La linea verrà tracciata seguendo i parametri impostati dalle proprietà .PenWidth (larghezza del pennello) e .PenColor (colore del pennello).

La coppia (x=0,y=0) è il riferimento all'angolo in alto a sinistra dell'immagine. È possibile impostare la posizione corrente del cursore tramite le proprietà .X e .Y. Questo script disegna prima l'ascissa a metà immagine, poi calcola il rapporto tra l'ampiezza orizzontale del grafico (in questo caso 2*PI_greco radianti, quindi ~6.28, memorizzata nella variabile xnumerico) e l'ampiezza in pixel dell'immagine, che verrà utilizzato per ottenere le coordinate fisiche per il tracciamento della linea a partire dalle coordinate logiche restituite dalla funzione x=sin(y). In particolare per le ordinate è necessario tenere conto anche dell'offset int(Image.MaxY/2) e del fatto che al contrario del piano cartesiano y cresce dall'alto verso il basso.

Il grafico viene tracciato infine all'interno di un ciclo, ed il metodo LineTo è ottimale poiché aggiorna automaticamente la posizione corrente del cursore.

Nell'immagine seguente si può vedere il risultato dello script:

Creazione di un istogramma

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<title> ASPImage - test </title>
</head>
<body>
<%
dim valori(9)
valori(0) = 1
valori(1) = 3
valori(2) = 4
valori(3) = 2
valori(4) = 3
valori(5) = 2
valori(6) = -1
valori(7) = 10
valori(8) = -3
valori(9) = 5
min = valori(0)
max = valori(0)
for i = 0 to Ubound(valori)
  if valori(i) < min then min = valori(i)
  if valori(i) > max then max = valori(i)
next
ampiezza = max - min
Set Image = Server.CreateObject("AspImage.Image")
  ' impostazione del testo
  Image.FontColor = RGB(&hFF, &hFF, &hFF)
  Image.Italic = True
  Image.Bold = True
  Image.FontName = "Arial"
  Image.FontSize = 12
  ' colora lo sfondo: ATTENZIONE, il metodo GradientOneWay 
  ' necessita che prima sia dimensionata l'immagine#A5A5DA#80F0C4
  Image.MaxX = 400
  Image.MaxY = 200
  Image.GradientOneWay RGB(&hA5, &hA5, &hDA), RGB(&hB4, &h0B, &hC1), 0
  ' disegno del grafico: imposta il colore del pennello
  Image.PenWidth = 1  
  Image.PenColor = RGB(&hFF, &hFF, &h00)
  passoy = ampiezza / (Image.MaxY)
  larghezzabarra = int(Image.MaxX / (Ubound(valori)+1))
  i = 0
  Image.BackgroundColor = RGB(&h33, &h33, &hFF)
  do while i<=(Ubound(valori))
    x1 = i*larghezzabarra
    y1 = int(int(Image.MaxY / 2) - valori(i)/passoy)
    x2 = i*larghezzabarra + larghezzabarra
    y2 = int(Image.MaxY / 2)
    Image.Rectangle x1,y1,x2,y2
    if valori(i) >= 0 then
      x1= x1 + 1
      y1 = y1 + 1
      x2 = x2 - 1
      y2 = y2 - 1
    else 
      x1= x1 + 1
      y1 = y1 - 1
      x2 = x2 - 1
      y2 = y2 + 1
    end if
    Image.FillRect x1,y1,x2,y2
    i = i + 1
  loop
  Image.TextOut "istogramma", 0, 0, false
  Image.FileName = server.MapPath("/") & "/images/istogramma.jpg"
  if Image.SaveImage then
    Response.Write "<img src=""images/istogramma.jpg"">"
  else
    Response.Write "<h2>qualcosa è andato storto</h2>"
  end if
%>
</body>
</html>

Questo script è simile al precedente, ed è utile per disegnare un istogramma verticale a partire da un vettore di valori.

Qui sono utilizzati i metodi .Rectangle (x1, y1, x2 ,y2) che disegna un rettangolo vuoto (quindi il bordo di un rettangolo) dalle coordinate (x1,y1) - angolo in alto a sinistra - alle coordinate (x2,y2) - angolo in basso a destra - e .FillRect (x1,y1,x2,y2) che disegna un rettangolo pieno alle coordinate indicate. Il colore e l'ampiezza del bordo sono i medesimi del pennello, quindi impostati nelle proprietà .PenColor e .PenWidth. Il colore del riempimento invece è impostato tramite la proprietà .BackgroundColor

Nell'immagine seguente, il risultato dello script:

Ridimensionamento immagine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<title> ASPImage - Resize test </title>
</head>
<body>
<%
Set Image = Server.CreateObject("AspImage.Image")
  Image.LoadImage server.MapPath("/") & "/images/grafico.jpg"
  larghezza = Image.MaxX
  altezza = Image.MaxY
  maxaltezza = 100
  maxlarghezza = 200
  rapporto1 = larghezza / maxlarghezza
  rapporto2 = altezza / maxaltezza
  if rapporto1 > rapporto2 then 
    rapporto = rapporto1 
  else 
    rapporto = rapporto2 
  end if
  nuovalarghezza = int(larghezza / rapporto)
  nuovaaltezza = int(altezza / rapporto)
  Image.ResizeR nuovalarghezza,nuovaaltezza
  Image.FileName = server.MapPath("/") & "/images/thumb-grafico.jpg"
  if Image.SaveImage then
    Response.Write "<img src=""images/thumb-grafico.jpg"">"
  else
    Response.Write "<h2>qualcosa è andato storto</h2>"
  end if
Set Image = nothing
%>
</body>
</html>

Per ultimo l'esempio utilizzato più spesso, ovvero il ridimensionamento di un'immagine a partire da una esistente. Tramite il metodo .LoadImage si carica in memoria un'immagine presente sul server e se ne ricavano l'altezza e la larghezza tramite le proprietà .MaxX e .MaxY. Nelle variabili maxaltezza e maxlarghezza sono impostati i valori massimi ai quali l'immagine sarà ridimensionata. Una volta calcolato il rapporto e quindi le nuove dimensioni (in questo caso le proporzioni vengono conservate), tramite il metodo .ResizeR si esegue il ricampionamento della sorgente che poi viene salvata su disco con un nuovo nome.

Nell'immagine seguente, il risultato dello script (immagine sorgente: il grafico disegnato nel secondo esempio visto sopra)