如何动态应用 base64 编码的数据 uri

How to apply base64 encoded data uri's dynamically?

本文关键字：编码 base64 数据 uri 应用 何动态 动态      更新时间：2023-09-26

我有以下z.js方法可以将样式动态应用于DOM元素，如下所示：

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

提前感谢大家的帮助！

我认为问题出在以下行上：

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

Base64 区分大小写。此行将使整个样式小写。大写的 URL 也不起作用。

你为什么要用这个z.js？您可以简单地使用 JS 设置样式。

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

@Sachleen你是对的。有点。 style.replace(/'_/g,'-').toLowerCase()混淆了base64解码。但是之后代码就不能很好地工作了，因为var pairs = style.split(";");当我尝试将一堆样式应用于元素时，还混淆了 applyStyle 方法的第 12 行之后的 base64 解码，例如

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

由于背景样式声明"url(data:image/gif;base64,"中存在";"字符串，"url(data:image/gif" 中会有一个额外的数组项，它本身肯定是无用的，因为它是背景声明的标头，所以样式声明被不必要地拆分并完全删除;

z.js 完全由我开发，用于教育目的，以抽象出使用 DOM 的 JavaScript 初学者区分大小写的困惑。 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 编码图像的限制，这会导致更好的网络性能。

相关文章：