搜索
查看: 7570|回复: 1

[教程] data url 用法

  [复制链接]

30

主题

693

帖子

4168

积分

超级版主

Rank: 8Rank: 8

积分
4168
发表于 2012-6-6 15:41:43 | 显示全部楼层 |阅读模式
data url 用于直接内嵌资源文件,
HTMLayout 以及 IE8+,Firefox,Chrome,Opera,Safari 等浏览器都支持该语法。

下面是使用范例:

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;right=599;text="aardio Form" )
winform.add(  )
/*}}*/

import web.layout;
var wbLayout = web.layout(winform);

wbLayout.html =
/*********
<html>
  <head>
    <style>
   
      div.test  {
        background-image: url(data:image/gif;base64,
          R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
          AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
          ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
          a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
          ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
          F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
          hhx4dbgYKAAA7);
         
        background-repeat:repeat;
        width:200px;
        height:200px;
        border:1px solid black;
      }
      
    </style>
  </head>
<body>
  <h1> Data URL 演示</h1>
   <div .test />
</body>
</html>
*********/


winform.show()
win.loopMessage();

data url也可以直接用于html中,例如img图像节点的src属性。



回复

使用道具 举报

30

主题

693

帖子

4168

积分

超级版主

Rank: 8Rank: 8

积分
4168
 楼主| 发表于 2012-6-6 15:43:05 | 显示全部楼层

“aardio范例->HTMLayout->Data URL转换工具” 可将图像文件等自动转换为Data URL,源码如下: [code][lang=a

“aardio范例->HTMLayout->Data URL转换工具”
可将图像文件等自动转换为Data URL,源码如下:


  1. //Data URL 转换工具
  2. import win.ui;
  3. /*DSG{{*/
  4. var winform = ..win.form(text="Data Url 转换工具(支持HTMLayout,Chrome,Firefox,IE8+,Opera,Safari)";left=-50;right=416;bottom=325;topmost=1)
  5. winform.add(
  6. edit={cls="edit";left=9;top=9;right=455;bottom=292;acceptfiles=1;db=1;dl=1;dr=1;dt=1;edge=1;font=LOGFONT( name='宋体' );hscroll=1;multiline=1;vscroll=1;z=1};
  7. static={cls="static";text="请将图片等文件拖放到上面的文本框中进行转换";left=11;top=300;right=433;bottom=324;db=1;dl=1;transparent=1;z=2}
  8. )
  9. /*}}*/

  10. getDataUrl = function(path,mime){
  11.     import crypt.bin;
  12.     if( string.startWith(mime,"image/" ) ){
  13.         return string.format('<img src="data:%s;base64,\r\n%s" >',mime,crypt.bin.encodeBase64( string.load(path) ) )
  14.     }
  15.     else{
  16.            return string.format('data:%s;base64,\r\n%s',mime,crypt.bin.encodeBase64( string.load(path) ) )
  17.        }
  18. }

  19. import fsys;
  20. import fsys.mime;

  21. winform.edit.wndproc = function(hwnd,message,wParam,lParam){
  22.     if( message == 0x233/*_WM_DROPFILES*/ ){
  23.         if( winform.edit.busy ) return;
  24.         
  25.         var path = win.getDropFile(wParam)[1]
  26.         if( fsys.isDir(path) ){
  27.             winform.edit.text = "路径不能是一个目录"
  28.             return;
  29.         }
  30.         
  31.         var mime = fsys.mime.fromFile( path )
  32.         if(!mime){
  33.             winform.edit.text = "无效的文件格式";
  34.             return;
  35.         }
  36.         
  37.         winform.edit.busy = true;
  38.         winform.edit.text = "正在转换,请稍候......";
  39.         winform.edit.text = win.invoke(getDataUrl,path,mime);
  40.         winform.edit.busy = false;
  41.     }
  42. }

  43. winform.show()
  44. win.loopMessage();
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2020-11-29 15:01 , Processed in 0.093750 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表