Comment appliquer dynamiquement des uri de données codées en base64?

Question

je la méthode z.js suivante pour appliquer des styles dynamiquement à l'élément DOM comme ceci:

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

La fonction z.Utils.applyStyle est ici:

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; 
}; 

Que faire quand je veux utiliser la fonction ci-dessus pour appliquer des données uri comme image de fond? Quelque chose comme:

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

Je l'ai fait avec une image 37K, mais il a échoué au travail.
Qu'est-ce que j'ai fait de mal?
Peut-être, que les uri de données ne sont pas disponibles sur les affectations dynamiques?
Peut-être grande 30k + taille base64 données est la faute?
La problématique peut être css trouve ici:
http://bookingshare.fw.hu/data_uri_long.css

Merci à tous pour votre aide à l'avance!

Answer 1

@Sachleen vous avez raison. Un peu. style.replace(/\_/g,'-').toLowerCase() confond le décodage base64. Mais le code ne fonctionnerait pas bien après, parce var pairs = style.split(";"); confond également le décodage base64 juste après la ligne 12 de la méthode ApplyStyle, quand j'ai essayé d'appliquer un tas de style à un élément, comme dans

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

Parce que Il y aura un élément de tableau supplémentaire dans "url(data:image/gif", ce qui est certainement inutile, puisqu'il s'agit d'un en-tête de la déclaration d'arrière-plan, de sorte que la déclaration de style est divisée sans nécessité et complètement abandonnée; Z.js est entièrement développé par moi, et nécessaire à des fins éducatives pour l'abstraction des confusions majuscules/minuscules des débutants de javascript travaillant avec le DOM. z.Utils.applyStyle(elem,'Background-Image:url(stamp.gif)') est équivalent à z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)') et également à z.Utils.applyStyle(elem,'background-image:url(stamp.gif)'). En raison d'erreurs css inexistants, j'ai trouvé cela utile lors de la collaboration avec mes étudiants. Merci quand même, en me permettant de me concentrer sur la limite d'altération des styles d'exécution avec les images encodées en base64, ce qui se traduit par de meilleures performances réseau.

Answer 2

Je pense que le problème est avec cette ligne:

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

base64 est sensible à la casse. Cette ligne rendra le style entier en minuscules. URLs en majuscule ne fonctionnera pas non plus. Pourquoi utilisez-vous ce z.js de toute façon? Vous pouvez simplement définir le style en utilisant JS.

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