Su tutti i piani hosting windows è istallata la libreria ASPImage di Server Object. Questa libreria consente di creare immagini e di modificare immagini esistenti. Qui di seguito sono riportati alcuni esempi di utilizzo.
In particolare, sono riportati quattro esempi di applicazioni standard. Nel primo viene mostrato come creare una immagine contenente una scritta, nel secondo e terzo esempio viene mostrato come creare dei grafici, e nel quarto esempio è riportato come ridimensionare una immagine, cosa utilissima per creare dei thumbnail. La libreria AspImage è in grado anche di costruire animazioni GIF.
ATTENZIONE!
Se gli script che utilizzano questa libreria salvano la nuova immagine sul vostro spazio, allora assicuratevi che la cartella di lavoro sia configurata con i permessi di scrittura, che potete impostare attraverso il vostro pannello di controllo alla sezione gestione permessi cartelle e files
<!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 alla scritta
' 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>
Vi rimandiamo alla documentazione completa, disponibile in inglese al link riportato nel menu di questa pagina, per l'analisi di ciascun metodo e proprietà dell'oggetto.
In questo esempio potete 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. La scritta viene aggiunta 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
<!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. E' 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.
<!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 settati nelle proprietà .PenColor e .PenWidth. Il colore del riempimento invece è impostato tramite la prorietà .BackgroundColor
<!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 forse l'esempio utilizzato più spesso, ovvero il ridimensionamento di una immagine a partire da una esistente. Tramite il metodo .LoadImage si carica in memoria un'immagine presente sul server. 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.
Questo è il risultato dello script, che come immagine sorgente prende il grafico disegnato tramite l'esempio 2:
