如何動態應用base64編碼的數據uri？

我有以下z.js方法將樣式應用動態，以這樣的DOM元素：如何動態應用base64編碼的數據uri？

z.Utils.applyStyle(element,'background-image:stamp.gif')

的z.Utils.applyStyle功能是在這裏：

z.Utils.applyStyle = function(elRef,style) 
{ 
    if(typeof(elRef) == 'string') 
    { 
    elRef = document.getElementById(elRef); 
    } 
    if(elRef == null || style == null || elRef.style == null) 
    { 
    return null; 
    } 
    style=style.replace(/\_/g,'-').toLowerCase(); 
    var pairs = style.split(";"); 
    for(var ii =0; ii < pairs.length; ii++) 
    { 
     var kv = pairs[ii].split(":"); 
     // trim value 
     if(!kv[1]) 
     { 
     continue; 
     } 
     var value = kv[1].replace(/^\s*/,'').replace(/\s*$/,''); 
     var key = ""; 
     for(var jj = 0; jj < kv[0].length; jj++){ 
      if(kv[0].charAt(jj) == "-") 
      { 
      jj++; 
      if(jj < kv[0].length) 
      { 
       key += kv[0].charAt(jj).toUpperCase(); 
      } 
      continue; 
      } 
      key += kv[0].charAt(jj); 
     } 
     switch(key) 
     { 
      case "float": 
      key = "cssFloat"; 
      break; 
      case "right": 
      key="left"; 
      value=value-z.Utils.getElementOffset(elRef).width; 
      break; 
      case "bottom": 
      key="top"; 
      value=value-z.Utils.getElementOffset(elRef).height; 
      break; 
     } 
     try 
     { 
      elRef.style[key] = value; 
     } 
     catch(e) 
     { 
      //some error thrown; 
     } 
    } 
    return true; 
};

怎麼辦時，我想用上面的功能應用數據uri作爲背景圖像？喜歡的東西：

z.Utils.applyStyle(element,'background-image: url(data:image/gif;base64,[base64-code])');

我有37K的圖像做了，但未能奏效。
我做錯了什麼？
可能吧，數據uri在動態分配上不可用？
可能是大型30k +大小的base64數據是故障？
有問題的CSS可以看這裏：
http://bookingshare.fw.hu/data_uri_long.css

謝謝大家對你的幫助提前！

來源

2012-04-30 Zoltan Ludanyi

我知道IE8有32KB的限制..雖然版本9和以上沒有這個限制。圖像的任何部分顯示或完全不顯示？我已經看到過，只有圖像的一部分顯示它太大了。 – sachleen

不，它根本沒有出現.. 我認爲有一些關於換行包含的內容。如果沒有任何編輯器強制換行，就會出現33kb長的數據 - uri。但它並未出現在任何瀏覽器中！ –

@Sachleen你是對的。有點。 style.replace(/\_/g,'-').toLowerCase()混淆base64解碼。但是，當我試圖一堆樣式應用到的元素，就像在

z.Utils.applyStyle(elem,'width:10px;'+ 
    background:transparent url(data:image/gif;base64,stg...) no-repeat;')

因爲代碼將不能很好地工作之後，因爲var pairs = style.split(";"); 也applyStyle方法，線路12混淆的base64解碼之後剛";"在背景樣式聲明中存在字符串"url(data:image/gif;base64,", "url(data:image/gif"中會有一個額外的數組項，它本身是無用的，因爲它是背景聲明的頭文件，所以樣式聲明不必要地分割並完全放棄;

z.js完全由我自己開發，並且需要用於教育目的，以抽象出JavaScript工作與DOM的初學者的區分大小寫混淆。 z.Utils.applyStyle(elem,'Background-Image:url(stamp.gif)')等效於 z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)')以及 z.Utils.applyStyle(elem,'background-image:url(stamp.gif)')。由於css錯誤存在運行時，我發現在與我的學生合作時很有用。

無論如何，讓我專注於改變樣式運行時間與base64編碼圖像的限制，從而提高網絡性能。

來源

2012-06-29 21:52:54

我認爲這個問題是這一行：

style=style.replace(/\_/g,'-').toLowerCase();

Base64是區分大小寫的。這一行將使整個樣式小寫。大寫的URL也不起作用。

爲什麼你用這個z.js呢？你可以簡單地使用JS來設置樣式。

element.style.backgroundImage="url('image.png')";

來源

2012-06-28 02:57:50 sachleen

如何動態應用base64編碼的數據uri？

回答

相關問題