巧妙利用TWebBrowser让程序直接显示网络图片(Delphi)

来源：互联网发布：mac airplay在哪里设置编辑：程序博客网时间：2024/06/11 01:11

最近遇到这样的开发需求: 需要显示的图片来自网络, 只知道其 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;