用Intraweb开发图片管理的云平台，其中一个关键的功能是建画廊，根据用户搜索出来的数据，以画廊形式展示这些资料对应的图片。本文记录实际案例，用IWAdvWebGrid展示产品清单的画廊。
一、绘制画廊的代码。变量说明：iID–第几笔记录；iColSum–画廊分几栏展示；sPicFile–图片文件的完整地址；sUrlFile–图文件的URI地址；图片文件NoPhoto.png用于某产品没有图片时的替代图。
procedure TfmwpdPhoto.myDrawGrid;
var
iID,iCol,iRow:Integer;
sPicFile,sUrlFile,sValue:String;
begin
awGrid.ClearCells;
qMaster.First;
awGrid.TotalRows:=ceil(qMaster.RecordCount/iColSum);
awGrid.RowCount:=awGrid.TotalRows;
iID:=0;
iCol:=0;
iRow:=0;
while not qMaster.Eof do
begin
iCol:=(iID mod iColSum);
iRow:=floor(iID/iColSum);
sValue:=qMaster.FieldByName('RecId').AsString+'.jpg';
sPicFile:=IWServerController.ContentPath+'ProdFiles\'+sValue;
if FileExists(sPicFile) then
sUrlFile:='/ProdFiles/'+sValue
else
sUrlFile:='/ProdFiles/NoPhoto.png';
sValue:='';
sValue:=sValue+' <img data-id="'+qMaster.FieldByName('RecId').AsString+'"';
sValue:=sValue+' title="电压V:'+qMaster.FieldByName('pdVoltage').AsString;
sValue:=sValue+' 功率w:'+qMaster.FieldByName('pdPower').AsString;
sValue:=sValue+' 风量ft:'+qMaster.FieldByName('pdWindVol').AsString;
sValue:=sValue+' 风重g:'+qMaster.FieldByName('pdWindNW').AsString;
sValue:=sValue+' 噪音dB:'+qMaster.FieldByName('pdNoise').AsString+'"';
sValue:=sValue+' src="'+sUrlFile+'" width="232" height="232" style="margin:0px;">';
sValue:=sValue+'<br>'+qMaster.FieldByName('pdNum').AsString;
sValue:=sValue+' '+qMaster.FieldByName('pdType').AsString;
awGrid.AsyncSetCell(iCol,iRow,sValue);
qMaster.Next;
iID:=iID+1;
end;
if awGrid.TotalRows>5 then awGrid.RowCount:=5;
awGrid.AsyncUpdateAllCells;
end;二、PC用户端点击图片，展示产品完整图片及产品详细信息的代码
procedure TfmwpdPhoto.awGridAsyncLinkClick(Sender: TObject;
EventParams: TStringList; RowIndex, ColumnIndex: Integer);
var
sValue,sLine:String;
i1,i2:Integer;
slData:TStringList;
sFileName,sTmpFile,sTmpUrl:String;
begin
inherited;
sValue:=awGrid.Cells[ColumnIndex,RowIndex];
sValue:=StringReplace(sValue,' ','',[rfReplaceAll]);
i1:=14;
i2:=pos('title=',sValue);
sValue:=copy(sValue,i1,i2-i1-1);
qMaster.Locate('RecId',sValue,[]);
slData:=TStringList.Create;
slData.Add('<!DOCTYPE html><html><head>');
slData.Add('<title>产品细节@产品管理</title>');
slData.Add('<style>img{margin:0 20px;}</style></head>');
sLine:='<img src="/ProdFiles/'+qMaster.FieldByName('RecId').AsString+'.jpg" align="left">';
slData.Add(sLine);
sLine:='<p>编号：'+qMaster.FieldByName('pdNum').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>類型：'+qMaster.FieldByName('pdType').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>日期：'+qMaster.FieldByName('pdDate').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>品牌：'+qMaster.FieldByName('pdBrand').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>型号：'+qMaster.FieldByName('pdDesc').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>电压：'+qMaster.FieldByName('pdVoltage').AsString+'V</p>';
slData.Add(sLine);
sLine:='<p>功率：'+qMaster.FieldByName('pdPower').AsString+'W</p>';
slData.Add(sLine);
sLine:='<p>风量：'+qMaster.FieldByName('pdWindVol').AsString+'ft/min</p>';
slData.Add(sLine);
sLine:='<p>风重：'+qMaster.FieldByName('pdWindNW').AsString+'g</p>';
slData.Add(sLine);
sLine:='<p>噪音：'+qMaster.FieldByName('pdNoise').AsString+'dB</p>';
slData.Add(sLine);
sLine:='<p>存放：'+qMaster.FieldByName('pdLocation').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>备注：'+qMaster.FieldByName('Remark').AsString+'</p>';
slData.Add(sLine);
sLine:='<p>规格：'+qMaster.FieldByName('pdSpecs').AsString+'</p>';
slData.Add(sLine);
sLine:='<br><a rel="nofollow" href="javascript:window.close()">【关闭】</a >';
slData.Add(sLine);
sLine:='</body></html>';
slData.Add(sLine);
sFileName:=UserSession.sys_UsID + FormatDateTime('HHMMSS',now())+'.html';
sTmpFile:=webApplication.UserCacheDir+sFileName;
if FileExists(sTmpFile) then SysUtils.DeleteFile(sTmpFile);
slData.SaveToFile(sTmpFile,TEncoding.UTF8);
slData.Free;
sTmpUrl:=StringReplace(sTmpFile,IWServerController.ContentPath,'/',[]);
webApplication.NewWindow(sTmpUrl);
end;三、手机端点击图片，展示产品完整图片及产品详细信息的代码
procedure TfmmpdPhoto.awGridAsyncLinkClick(Sender: TObject;
EventParams: TStringList; RowIndex, ColumnIndex: Integer);
var
sValue,sLine:String;
i1,i2:Integer;
slData:TStringList;
begin
inherited;
sValue:=awGrid.Cells[ColumnIndex,RowIndex];
sValue:=StringReplace(sValue,' ','',[rfReplaceAll]);
i1:=14;
i2:=pos('title=',sValue);
sValue:=copy(sValue,i1,i2-i1-1);
qMaster.Locate('RecId',sValue,[]);
UserSession.sys_Value1:=sValue; //记录ID
slData:=TStringList.Create;
slData.Add('<table border="0" width="100%"><tr>');
sLine:='<th width="50%"></th><th width="50%"></th>';
slData.Add(sLine);
sLine:='<tr><td>'+'编号：'+qMaster.FieldByName('pdNum').AsString+'</td>';
sLine:=sLine+'<td>'+'类型：'+qMaster.FieldByName('pdType').AsString+'</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'品牌：'+qMaster.FieldByName('pdBrand').AsString+'</td>';
sLine:=sLine+'<td>'+'型号：'+qMaster.FieldByName('pdDesc').AsString+'</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'电压：'+qMaster.FieldByName('pdVoltage').AsString+'V</td>';
sLine:=sLine+'<td>'+'功率：'+qMaster.FieldByName('pdPower').AsString+'W</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'风量：'+qMaster.FieldByName('pdWindVol').AsString+'ft/min</td>';
sLine:=sLine+'<td>'+'风重：'+qMaster.FieldByName('pdWindNW').AsString+'g</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'噪音：'+qMaster.FieldByName('pdNoise').AsString+'dB</td>';
sLine:=sLine+'<td>'+'存放：'+qMaster.FieldByName('pdLocation').AsString+'</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'日期：'+qMaster.FieldByName('pdDate').AsString+'</td>';
sLine:=sLine+'<td>'+'RecId：'+qMaster.FieldByName('RecID').AsString+'</td></tr>';
slData.Add(sLine);
sLine:='<tr><td>'+'备注：'+qMaster.FieldByName('Remark').AsString+'</td>';
sLine:=sLine+'<td>'+'规格：'+qMaster.FieldByName('pdSpecs').AsString+'</td></tr>';
slData.Add(sLine);
slData.Add('</table>');
UserSession.sys_Value2:=slData.Text;
TfmmpdProd.Create(webApplication).Show;
end;procedure TfmmpdProd.IWAppFormCreate(Sender: TObject);
var
jpg:TJpegImage;
sFile:String;
begin
regBack.Align:=alClient;
self.ExtraHeader.Clear;
self.ExtraHeader.Add(UserSession.sys_ExtraHeader);
imfProd.ImageFile.URL:='ProdFiles/'+UserSession.sys_Value1+'.jpg';
hlbProd.HTMLText:=UserSession.sys_Value2;
dRate:=1;
sFile:=IWServerController.sys_AppPath+'wwwroot\ProdFiles\'+UserSession.sys_Value1+'.jpg';
if not FileExists(sFile) then exit;
jpg:=TJpegImage.Create;
try
jpg.LoadFromFile(sFile);
dRate:=(jpg.Height*100/jpg.Width)/100;
finally
jpg.Free;
end;
end;渲染时指定一下图片的高度
procedure TfmmpdProd.IWAppFormRender(Sender: TObject);
begin
imfProd.Height:=trunc(imfProd.Width*dRate); //按比例缩放
end;