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

减小字体 增大字体 作者:佚名  来源:转载  发布时间:2011-01-28 11:47:26

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

来源:http://blog.csdn.net/JPEXE/archive/2009/08/21/4469482.aspx

Tags:

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      0%(0)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

文章评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论