微信小程序——关于同一个svg的颜色改变_小程序svg 修改颜色

作者：人工智能uu | 2024-08-21 09:01:57

踩

小程序svg 修改颜色

一、问题的产生

二、问题的解决

三、总结

相信小伙伴们在微信小程序开发之中使用svg的时候遇到过一个问题，同一个svg但是产品要求不同的状态有着不同的颜色，那么如果我们引入了太多的同一个类型的svg，对我们的内存又是一个极大的消耗，那么我们有没有什么办法将一个svg改变一下颜色呢？这样不就可以节省很多内存了，那么各位继续向下看吧。

一、问题的产生

此问题出于产品提出的一个需求

在此处的建筑房子在浅色系的时候，颜色需要根据色卡的颜色来进行变换，但是由于浅色系的色卡过多，将所有颜色的建筑储存起来在调用会产生多余的很多代码，因为此处使用的是svg，确实可以显示颜色，但是并不能动态改变颜色呀！偶天哪。。。又但是，image的src支持base64，哎呀，这思路不就来了吗，既然你能base64，我还不能修改base64了？说干就干，那就来吧！

二、问题的解决

开始之前，我们要先明白，svg是如何改变颜色的。

svg中有一个属性fill，这里就是用来填写svg的填充颜色的，支持十六进制，例如#ff0000就是红色，也可以填写red，跟css差不多，明白这一点就可以进行接下来的操作了。

工厂函数代码：实现思路就是将SVG的base64字符串解码之后得到svg代码，替换svg的fill属性来改变颜色，然后再Base64编码回去。

这里对转换之后的base64结果做一个说明，共分成三部分：

data:image/svg+xml;base64首部的这一串作为固定值，让image能够识别你给它的是什么东西，是一个图片、svg+xml格式的、经过了base64编码的，这个解释不是专业的哈，能看懂就行。

一个英文逗号，将前后隔离开。

逗号后面的就是svg代码base64编码之后得到的字符串，这就是我们可操作的字符串啦

由此这里我们需要四个东西进行辅助工作，两个工具类、一个组件以及一个js的静态文件（用来储存你需要改变颜色的base64的代码）

在这里classSvg.js的作用是储存你需要改变颜色的svg的base64代码文件


export default {
  attachment: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTU2NjIgMS4wNzI2NkM3LjAxMDQ5IDEuMDcyNjYgNy4wNjM4NCAxLjA4MzI3IDcuMTEzNjIgMS4xMDM4OUM3LjE2MzM5IDEuMTI0NTEgNy4yMDg2MiAxLjE1NDczIDcuMjQ2NzEgMS4xOTI4MkM3LjI4NDgxIDEuMjMwOTIgNy4zMTUwMyAxLjI3NjE1IDcuMzM1NjUgMS4zMjU5MkM3LjM1NjI2IDEuMzc1NyA3LjM2Njg3IDEuNDI5MDQgNy4zNjY4NyAxLjQ4MjkyVjIuNjgwODdDNy4zOTY4MiAyLjY5NDgyIDcuNDI1OTUgMi43MTA4MiA3LjQ1NDI2IDIuNzI4NDZMNy41MTY2MiAyLjc3MDcxTDEwLjY1MzggNS4wODc4NEMxMC43NDA5IDUuMTUyMDcgMTAuODA2NCA1LjI0MTEzIDEwLjg0MTkgNS4zNDMzMUMxMC44NzczIDUuNDQ1NDkgMTAuODgxIDUuNTU2IDEwLjg1MjUgNS42NjAzMkMxMC44MjM5IDUuNzY0NjQgMTAuNzY0NSA1Ljg1Nzg4IDEwLjY4MTkgNS45Mjc3OEMxMC41OTk0IDUuOTk3NjggMTAuNDk3NiA2LjA0MDk2IDEwLjM5MDEgNi4wNTE5NEwxMC4zMzU1IDYuMDU0NDFIMTAuMTYxNUwxMC4xNjExIDYuNzM2NjZIMTMuMTI4MUMxMy4yMjg3IDYuNzM2NjkgMTMuMzI1NyA2Ljc3MzY0IDEzLjQwMDggNi44NDA0OUMxMy40NzU5IDYuOTA3MzUgMTMuNTIzOCA2Ljk5OTQ2IDEzLjUzNTUgNy4wOTkzM0wxMy41Mzg0IDcuMTQ2OTJDMTMuNTM4MyA3LjI0NzQgMTMuNTAxNSA3LjM0NDM5IDEzLjQzNDcgNy40MTk0OEMxMy4zNjc5IDcuNDk0NTcgMTMuMjc1OSA3LjU0MjU1IDEzLjE3NjEgNy41NTQzTDEzLjEyODEgNy41NTcxOEgxMi43ODQ3VjEyLjkyNDFDMTIuNzg0NyAxMi45NzggMTIuNzc0MSAxMy4wMzE0IDEyLjc1MzUgMTMuMDgxMUMxMi43MzI5IDEzLjEzMDkgMTIuNzAyNyAxMy4xNzYxIDEyLjY2NDYgMTMuMjE0MkMxMi42MjY1IDEzLjI1MjMgMTIuNTgxMiAxMy4yODI2IDEyLjUzMTUgMTMuMzAzMkMxMi40ODE3IDEzLjMyMzggMTIuNDI4MyAxMy4zMzQ0IDEyLjM3NDUgMTMuMzM0NEgxLjYyMDQxQzEuNTE5ODYgMTMuMzM0NCAxLjQyMjgzIDEzLjI5NzQgMS4zNDc3MyAxMy4yMzA2QzEuMjcyNjIgMTMuMTYzNyAxLjIyNDY5IDEzLjA3MTYgMS4yMTMwMyAxMi45NzE3TDEuMjEwMTYgMTIuOTI0MUwxLjIwOTc1IDcuNTU3MThIMC44MjA0MTNDMC43MTk5MjcgNy41NTcxNiAwLjYyMjk0MSA3LjUyMDI3IDAuNTQ3ODUgNy40NTM1QzAuNDcyNzU5IDcuMzg2NzIgMC40MjQ3ODUgNy4yOTQ3MSAwLjQxMzAyOCA3LjE5NDkyTDAuNDEwMTU2IDcuMTQ2OTJDMC40MTAxNyA3LjA0NjQzIDAuNDQ3MDYxIDYuOTQ5NDUgMC41MTM4MzQgNi44NzQzNkMwLjU4MDYwNyA2Ljc5OTI2IDAuNjcyNjE3IDYuNzUxMjkgMC43NzI0MTMgNi43Mzk1M0wwLjgyMDQxMyA2LjczNjY2SDMuODg3NDlWNi4wNTQ0MUgzLjcwNDUyQzMuNTk3MzggNi4wNTQzOCAzLjQ5MjcxIDYuMDIyMjMgMy40MDQwMyA1Ljk2MjEyQzMuMzE1MzUgNS45MDIwMSAzLjI0NjcyIDUuODE2NjkgMy4yMDcwMiA1LjcxNzE4QzMuMTY3MzEgNS42MTc2NyAzLjE1ODM1IDUuNTA4NTUgMy4xODEyOSA1LjQwMzlDMy4yMDQyMiA1LjI5OTI1IDMuMjU4MDEgNS4yMDM4OCAzLjMzNTY5IDUuMTMwMUwzLjM4MDQxIDUuMDkyMzVMNi40MjIwNSAyLjc3ODUxQzYuNDYxMjggMi43NDg2NyA2LjUwMjg1IDIuNzIyMDYgNi41NDYzNiAyLjY5ODkyVjEuODkzMThINC45MjI5OEM0LjgxNDE3IDEuODkzMTggNC43MDk4MiAxLjg0OTk1IDQuNjMyODggMS43NzMwMUM0LjU1NTk0IDEuNjk2MDggNC41MTI3MiAxLjU5MTczIDQuNTEyNzIgMS40ODI5MkM0LjUxMjcyIDEuMzc0MTEgNC41NTU5NCAxLjI2OTc2IDQuNjMyODggMS4xOTI4MkM0LjcwOTgyIDEuMTE1ODkgNC44MTQxNyAxLjA3MjY2IDQuOTIyOTggMS4wNzI2Nkg2Ljk1NjYyWk0xMS45NjQyIDcuNTU3MThIMTAuMTYxMVYxMi41MTM1SDExLjk2NDJWNy41NTc1OVY3LjU1NzE4Wk0zLjg4NzQ5IDcuNTU3MThIMi4wMjk4NUwyLjAzMDI2IDEyLjUxMzlMMy44ODc0OSAxMi41MTM1VjcuNTU3MThaTTYuOTM5OCAzLjQxOTMzTDYuOTE4ODcgMy40MzE2NEw0LjQ4NzY5IDUuMjgwNjZDNC41NDY0IDUuMzExMjQgNC41OTY4NCA1LjM1NTU2IDQuNjM0NyA1LjQwOTg2QzQuNjcyNTcgNS40NjQxNSA0LjY5NjczIDUuNTI2OCA0LjcwNTEzIDUuNTkyNDZMNC43MDggNS42NDQxNVYxMi41MTM5TDUuNTM4MzYgMTIuNTEzNVYxMC42NTAxTDUuNTQxNjQgMTAuNTcwMUM1LjU5MDg3IDkuODI2NzEgNi4yMTg1NyA5LjI0ODY2IDYuOTc0MjYgOS4yNDg2NkM3Ljc2NTIzIDkuMjQ4NjYgOC40MTAxNiA5Ljg4MDQ2IDguNDEwMTYgMTAuNjYzNlYxMi41MTM1SDkuMzQxMDNWNS42NDQ1NkM5LjM0MTAzIDUuNTEgOS40MDU4NSA1LjM5MDIgOS41MDYzNiA1LjMxNTUzTDkuNTQ1NzUgNS4yODk2OUw3LjAyOTIzIDMuNDMxMjNDNy4wMTY1NSAzLjQyMTgyIDcuMDAxNjcgMy40MTU4MyA2Ljk4NjAxIDMuNDEzODJDNi45NzAzNiAzLjQxMTgxIDYuOTU0NDQgMy40MTM4NSA2LjkzOTggMy40MTk3NFYzLjQxOTMzWk02Ljk3NDI2IDEwLjA2OTZDNi42NDc2OSAxMC4wNjk2IDYuMzgwNjIgMTAuMzE1NyA2LjM2MDkzIDEwLjYxMTFMNi4zNTg4NyAxMC42NjRWMTIuNTE0M0g3LjU4OTY0VjEwLjY2NEM3LjU4OTY0IDEwLjMzNzUgNy4zMTYgMTAuMDY5MiA2Ljk3NDI2IDEwLjA2OTJWMTAuMDY5NlpNNi4xNTM3NSA3LjIzOTY0SDcuNzk0NzdDNy44OTkzNCA3LjIzOTc1IDcuOTk5OTEgNy4yNzk3OSA4LjA3NTk1IDcuMzUxNTdDOC4xNTE5OCA3LjQyMzM2IDguMTk3NzQgNy41MjE0NiA4LjIwMzg3IDcuNjI1ODVDOC4yMSA3LjczMDI0IDguMTc2MDMgNy44MzMwMiA4LjEwODkyIDcuOTEzMjFDOC4wNDE4MSA3Ljk5MzM5IDcuOTQ2NjEgOC4wNDQ5MyA3Ljg0Mjc3IDguMDU3MjhMNy43OTQ3NyA4LjA1OTMzSDYuMTUzNzVDNi4wNDg1NCA4LjA2MDE2IDUuOTQ3MDQgOC4wMjA1NCA1Ljg3MDIxIDcuOTQ4NjdDNS43OTMzOSA3Ljg3Njc5IDUuNzQ3MTEgNy43NzgxNCA1Ljc0MDk1IDcuNjczMTJDNS43MzQ3OSA3LjU2ODA5IDUuNzY5MjEgNy40NjQ3MSA1LjgzNzEgNy4zODQzNEM1LjkwNDk5IDcuMzAzOTcgNi4wMDExNyA3LjI1Mjc2IDYuMTA1NzUgNy4yNDEyOEw2LjE1Mzc1IDcuMjM4ODJINy43OTQ3N0g2LjE1Mzc1VjcuMjM5NjRaTTcuNzk0NzcgNS40ODEyOEM3Ljg5OTM0IDUuNDgxMzkgNy45OTk5MSA1LjUyMTQzIDguMDc1OTUgNS41OTMyMkM4LjE1MTk4IDUuNjY1IDguMTk3NzQgNS43NjMxIDguMjAzODcgNS44Njc0OUM4LjIxIDUuOTcxODggOC4xNzYwMyA2LjA3NDY2IDguMTA4OTIgNi4xNTQ4NUM4LjA0MTgxIDYuMjM1MDQgNy45NDY2MSA2LjI4NjU3IDcuODQyNzcgNi4yOTg5Mkw3Ljc5NDc3IDYuMzAxNzlINi4xNTM3NUM2LjA0OTE4IDYuMzAxNjcgNS45NDg2IDYuMjYxNjMgNS44NzI1NyA2LjE4OTg1QzUuNzk2NTMgNi4xMTgwNyA1Ljc1MDc4IDYuMDE5OTYgNS43NDQ2NSA1LjkxNTU4QzUuNzM4NTIgNS44MTExOSA1Ljc3MjQ4IDUuNzA4NCA1LjgzOTYgNS42MjgyMkM1LjkwNjcxIDUuNTQ4MDMgNi4wMDE5MSA1LjQ5NjUgNi4xMDU3NSA1LjQ4NDE1TDYuMTUzNzUgNS40ODEyOEg3Ljc5NDc3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=='
    }

此处为Base64.js的代码文件（直接复制即可）


/**
 * Created by SLICE_30_K on 2017/5/22.
 *
 * 支持一般Base64的编码和解码
 * 支持符合RFC_4648标准中"URL and Filename Safe Alphabet"的URL安全Base64编解码
 * 支持中文字符的编解码(Unicode编码)
 */
 
var BASE64_MAPPING = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
  '0',
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '+',
  '/'
];
var URLSAFE_BASE64_MAPPING = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
  '0',
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '-',
  '_'
];
 
var _toBinary = function (ascii) {
  var binary = [];
  while (ascii > 0) {
      var b = ascii % 2;
      ascii = Math.floor(ascii / 2);
      binary.push(b);
  }
  binary.reverse();
  return binary;
};
 
var _toDecimal = function (binary) {
  var dec = 0;
  var p = 0;
  for (var i = binary.length - 1; i >= 0; --i) {
      var b = binary[i];
      if (b == 1) {
          dec += Math.pow(2, p);
      }
      ++p;
  }
  return dec;
};
 
var _toUTF8Binary = function (c, binaryArray) {
  var mustLen = 8 - (c + 1) + (c - 1) * 6;
  var fatLen = binaryArray.length;
  var diff = mustLen - fatLen;
  while (--diff >= 0) {
      binaryArray.unshift(0);
  }
  var binary = [];
  var _c = c;
  while (--_c >= 0) {
      binary.push(1);
  }
  binary.push(0);
  var i = 0,
      len = 8 - (c + 1);
  for (; i < len; ++i) {
      binary.push(binaryArray[i]);
  }
 
  for (var j = 0; j < c - 1; ++j) {
      binary.push(1);
      binary.push(0);
      var sum = 6;
      while (--sum >= 0) {
          binary.push(binaryArray[i++]);
      }
  }
  return binary;
};
 
var _toBinaryArray = function (str) {
  var binaryArray = [];
  for (var i = 0, len = str.length; i < len; ++i) {
      var unicode = str.charCodeAt(i);
      var _tmpBinary = _toBinary(unicode);
      if (unicode < 0x80) {
          var _tmpdiff = 8 - _tmpBinary.length;
          while (--_tmpdiff >= 0) {
              _tmpBinary.unshift(0);
          }
          binaryArray = binaryArray.concat(_tmpBinary);
      } else if (unicode >= 0x80 && unicode <= 0x7ff) {
          binaryArray = binaryArray.concat(_toUTF8Binary(2, _tmpBinary));
      } else if (unicode >= 0x800 && unicode <= 0xffff) {
          //UTF-8 3byte
          binaryArray = binaryArray.concat(_toUTF8Binary(3, _tmpBinary));
      } else if (unicode >= 0x10000 && unicode <= 0x1fffff) {
          //UTF-8 4byte
          binaryArray = binaryArray.concat(_toUTF8Binary(4, _tmpBinary));
      } else if (unicode >= 0x200000 && unicode <= 0x3ffffff) {
          //UTF-8 5byte
          binaryArray = binaryArray.concat(_toUTF8Binary(5, _tmpBinary));
      } else if (unicode >= 4000000 && unicode <= 0x7fffffff) {
          //UTF-8 6byte
          binaryArray = binaryArray.concat(_toUTF8Binary(6, _tmpBinary));
      }
  }
  return binaryArray;
};
 
var _toUnicodeStr = function (binaryArray) {
  var unicode;
  var unicodeBinary = [];
  var str = '';
  for (var i = 0, len = binaryArray.length; i < len;) {
      if (binaryArray[i] == 0) {
          unicode = _toDecimal(binaryArray.slice(i, i + 8));
          str += String.fromCharCode(unicode);
          i += 8;
      } else {
          var sum = 0;
          while (i < len) {
              if (binaryArray[i] == 1) {
                  ++sum;
              } else {
                  break;
              }
              ++i;
          }
          unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 1, i + 8 - sum));
          i += 8 - sum;
          while (sum > 1) {
              unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 2, i + 8));
              i += 8;
              --sum;
          }
          unicode = _toDecimal(unicodeBinary);
          str += String.fromCharCode(unicode);
          unicodeBinary = [];
      }
  }
  return str;
};
 
var _encode = function (str, url_safe) {
  var base64_Index = [];
  var binaryArray = _toBinaryArray(str);
  var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;
 
  var extra_Zero_Count = 0;
  for (var i = 0, len = binaryArray.length; i < len; i += 6) {
      var diff = i + 6 - len;
      if (diff == 2) {
          extra_Zero_Count = 2;
      } else if (diff == 4) {
          extra_Zero_Count = 4;
      }
      var _tmpExtra_Zero_Count = extra_Zero_Count;
      while (--_tmpExtra_Zero_Count >= 0) {
          binaryArray.push(0);
      }
      base64_Index.push(_toDecimal(binaryArray.slice(i, i + 6)));
  }
 
  var base64 = '';
  for (var i = 0, len = base64_Index.length; i < len; ++i) {
      base64 += dictionary[base64_Index[i]];
  }
 
  for (var i = 0, len = extra_Zero_Count / 2; i < len; ++i) {
      base64 += '=';
  }
  return base64;
};
 
var _decode = function (_base64Str, url_safe) {
  var _len = _base64Str.length;
  var extra_Zero_Count = 0;
  var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;
 
  if (_base64Str.charAt(_len - 1) == '=') {
      if (_base64Str.charAt(_len - 2) == '=') {
          //两个等号说明补了4个0
          extra_Zero_Count = 4;
          _base64Str = _base64Str.substring(0, _len - 2);
      } else {
          //一个等号说明补了2个0
          extra_Zero_Count = 2;
          _base64Str = _base64Str.substring(0, _len - 1);
      }
  }
 
  var binaryArray = [];
  for (var i = 0, len = _base64Str.length; i < len; ++i) {
      var c = _base64Str.charAt(i);
      for (var j = 0, size = dictionary.length; j < size; ++j) {
          if (c == dictionary[j]) {
              var _tmp = _toBinary(j);
              /*不足6位的补0*/
              var _tmpLen = _tmp.length;
              if (6 - _tmpLen > 0) {
                  for (var k = 6 - _tmpLen; k > 0; --k) {
                      _tmp.unshift(0);
                  }
              }
              binaryArray = binaryArray.concat(_tmp);
              break;
          }
      }
  }
  if (extra_Zero_Count > 0) {
      binaryArray = binaryArray.slice(0, binaryArray.length - extra_Zero_Count);
  }
  var str = _toUnicodeStr(binaryArray);
  return str;
};
 
export const Base64 = {
  encode: function (str) {
      return _encode(str, false);
  },
  decode: function (base64Str) {
      return _decode(base64Str, false);
  },
  urlsafe_encode: function (str) {
      return _encode(str, true);
  },
  urlsafe_decode: function (base64Str) {
      return _decode(base64Str, true);
  }
};

tools.js：实现思路就是将SVG的base64字符串解码之后得到svg代码，替换svg的fill属性来改变颜色，然后再Base64编码回去。（直接复制即可）


import { Base64 } from "./Base64";
 
export const getColorSVG = (svgBase64, color) => {
    try {
        svgBase64 = svgBase64.substring(svgBase64.indexOf(',') + 1, svgBase64.length);
        const svg = Base64.decode(svgBase64);// 解码得到svg代码
        if (/<svg /.test(svg)) {// 先简单判断是一下否是一个svg
            let newSvg;
            if (/fill=".*?"/.test(svg)) {
                newSvg = svg.replace(/fill=".*?"/g, `fill="${color}" `);  // SVG有默认色，注意结尾跟一个空格
            } else {
                newSvg = svg.replace(/<svg /, `<svg fill="${color}" `); // 无默认色，注意结尾跟一个空格
            }
            return 'data:image/svg+xml;base64,' + Base64.encode(newSvg); // 替换完之后再组合回去
        }
    } catch { }
    return '';
};

组件svg.js


import SvgManager from "../../pages/widgets/classSchedule/classSchedulePage/classSvg"
import { getColorSVG } from "../../utils/tools"
 
Component({
    options: {
        styleIsolation: 'apply-shared',
        virtualHost: true
    },
    properties: {
        /** 图标名称 */
        name: {
            type: String,
            value: ''
        },
        /** 图标颜色 */
        color: {
            type: String,
            value: '#000000'
        },
        size: {
            type: String,
            value: '28rpx'
        }
    },
    observers: {
        // 监听名称和颜色变化
        'name,color': function (name, color) {
            this.changeIcon(name, color);
        }
    },
    data: {
        svgData: ''
    },
 
    methods: {
        changeIcon(name, color) {
            let svgBase64 = SvgManager[name]; // 从svg管理器中取出对应svg
            svgBase64 = getColorSVG(svgBase64, color); // 替换它的颜色
            this.setData({
                svgData: svgBase64 // 渲染
            });
        }
    }
})

在此处呢，就是我们所需要的所有的代码。

之后呢，在实际的代码引用的过程中我们只需要（此处的m-icon是我自己引用组件设置的名字，各位可以自己设置名字，name为你classSvg.js里面保存的base64的名字，color为你想改变的颜色，size为你需要的图片的大小）

<m-icon name="attachment" color="#689658" size="30rpx" />

就可以在我们的页面之上对我们需要的svg进行一个变色处理了

以下就是我们颜色变换的一个效果图啦！！！

三、总结

当时小编遇到这个问题的时候头疼了好久的，最后在团队的一位学长的帮助下搞出来了，很感谢呀，这个位置呢，其实也就是去更改了base64里面控制颜色的一部分代码，这个就是最基础的逻辑思路了，okok，那今天的分享就到这里了，期待和各位一起变强呀！

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】