巧妙利用TWebBrowser让程序直接显示网络图片(Delphi)
最近遇到这样的开发需求: 需要显示的图片来自网络, 只知道其 URL 地址. 要在程序上展示的话, 难道需要先把图片下载下来再载入 TImage 里吗? 这样还要自己去实现文件下载并控制其相关流程, 岂不是太麻烦了! 于是马上想到了 TWebBrowser 控件, 何不用它来显示, 把数据下载的事都交给浏览器模块, 这样就轻松多了嘛.
把 TWebBrowser 作为图片展示控件来用, 想要达到一个比较好的效果的话, 则需要解决以下问题:
1. 图片要能充满整个客户区, 有边距(默认是有的!)就不好看了.
2. 不能有滚动条出现, 除非因为图片很大而确实需要. (我这里只用来显示一些小图片, 所以我不想要滚动条.)
3. 不能出现浏览器的上下文菜单(右键菜单).
以上问题可以通过 HTML + JavaScript 控制实现.
所以这里需要一个页面模板, 一个"无边距", "无滚动条", "无菜单"的页面模板.
直接贴代码, 其中的具体技术实现就不多解释了, 有兴趣的自己研究看看.
<style>
body {
border: none;
margin: 0px;
overflow: hidden;
}
</style>
<script language="JavaScript">
//<!--
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu() {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
function norightclick(e) {
if (window.Event) {
if (e.which == 2 || e.which == 3)
return false;
} else if (event.button == 2 || event.button == 3) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
//-->
</script>
<body ondragstart="return false" onselectstart="return false" onbeforecopy="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()">
<img src="%s" width="%d" height="%d" />
</body>
其中倒数第二行<img src="%d" width="%d" height="%d" />就是用来显示图片的. src=图片地址(URL), width=显示宽度, height=显示高度. 使用时把实际参数填上去就行了.
有了这个页面模板, 接下来需要做的就是在模板中填入实际参数(src=图片地址(URL), width=显示宽度, height=显示高度), 然后生成这个页面文件(本地), 并用 TWebBrowser 加载显示它就行了!
下面给出关键代码:
{----|
名称: TFormMain.ShowItemImage
功能: 显示商品图片
参数: url: string - 图片 URL 地址
width: Integer - 显示宽度
height: Integer - 显示高度
返回:
|----}
procedure TFormMain.ShowItemImage(const url: string; width, height: Integer);
const
HtmlCode =
'<style>'#13 +
'body {'#13 +
' border: none;'#13 +
' margin: 0px;'#13 +
' overflow: hidden;'#13 +
'}'#13 +
'</style>'#13 +
'<script language="JavaScript">'#13 +
'//<!--'#13 +
'if (window.Event)'#13 +
' document.captureEvents(Event.MOUSEUP);'#13 +
'function nocontextmenu() {'#13 +
' event.cancelBubble = true;'#13 +
' event.returnValue = false;'#13 +
' return false;'#13 +
'}'#13 +
'function norightclick(e) {'#13 +
' if (window.Event) {'#13 +
' if (e.which == 2 || e.which == 3)'#13 +
' return false;'#13 +
' } else if (event.button == 2 || event.button == 3) {'#13 +
' event.cancelBubble = true;'#13 +
' event.returnValue = false;'#13 +
' return false;'#13 +
' }'#13 +
'}'#13 +
'document.oncontextmenu = nocontextmenu;'#13 +
'document.onmousedown = norightclick;'#13 +
'//-->'#13 +
'</script>'#13 +
'<body ondragstart="return false" onselectstart="return false" onbeforecopy="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()">'#13 +
'<img src="%s" width="%d" height="%d" />'#13 +
'</body>';
var
CurPath: string;
HtmlFile: TextFile;
begin
// 先清空原内容
Self.wbImage.Navigate('');
// 程序当前路径
CurPath := ExtractFilePath(ParamStr(0));
// 生成图片页面(无边距/无滚动条/无菜单)
AssignFile(HtmlFile, CurPath + '_img.html');
Rewrite(HtmlFile);
Writeln(HtmlFile, Format(HtmlCode, [url, width, height]));
CloseFile(HtmlFile);
// 显示图片
Self.wbImage.Navigate(CurPath + '_img.html');
end;