Javascript 减去—；mixin中的数据uri

我正在尝试实现mixin自定义文本的下划线，比如polyfill：line、style、color，这是浏览器尚不支持的

我的想法是在画布中绘制适当的线条，然后将其转换为数据uri，并将其用作目标元素的背景。问题是，当使用node.js编译更少的代码时，环境中并没有画布。从技术上讲，我可以使用它来执行这项任务，但我不想为了少编译而对节点建立任何依赖关系

有没有一种好的、简单的替代方法来以某种方式绘制微图像并基于此形成数据uri，而不使用外部库或依赖项

---

已解决：PNG数据生成器代码和一些演示。是

.png

mixin生成索引颜色png，接受字节流（字符串）作为数据，其中00-透明颜色，01-传递颜色。

我不完全确定您到底想如何实现mixin（您想对mixin做什么），但也许其中一些可以帮助

• 首先：您可以在的javascript实现中使用javascript插值，使用回标记

• 第二：也有一些解决方案可用于以较少的时间绘制显微图像。。。我最近才看到这篇博文：

这里的想法是有一个简单的gif背景，只需更改颜色（使用一些嵌入的javascript将RGB转换为64位基）。例如，做

wavy

线条效果，就像css

文本装饰样式中使用的那样：wavy可以使用以下更少的代码：

.wavyrgb(@r,@g,@b) {
    @key: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    @b64: `function(r,g,b){var key=@{key};return key.charAt(((0&3)<<4)|(r>>4))+key.charAt(((r&15)<<2)|(g>>6))+key.charAt(g&63)+key.charAt(b>>2)+key.charAt(((b&3)<<4)|(255>>4))}(@{r},@{g},@{b})`;
    background-image: ~"url(data:image/gif;base64,R0lGODlhBgADAIAAA@{b64}///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7)";
}

输出CSS:

.underwave {
  text-decoration: none;
  background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
  background-repeat: repeat-x;
  background-position: bottom;
}


现在剩下的只是一些css提示，用于最终确定方法：

.underwave {
  text-decoration: none;
  background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
  background-repeat: repeat-x;
  background-position: bottom;
}

这样，通过将背景图像定位到顶部或底部，可以获得上划线或下划线效果。使用
文本装饰线
将其放置在文本的背面。如果要将行放在文本前面，如在选项
行到
中，则需要在CSS中使用
：afetr
伪类：

.throughwave {
  text-decoration: none;
  position:relative;
}
.throughwave:after {
  background-image: url(data:image/gif;base64,R0lGODlhBgADAIAAAP8AAP///yH5BAEAAAEALAAAAAAGAAMAAAIHTAB2lqlQAAA7);
  background-repeat: repeat-x;
  background-position: center;
}

也有关于增加闪烁效果的讨论。。。例如，此处的CSS动画：





或者可以使用jQuery对元素进行闪烁

使用多个背景图像可以实现的效果组合，例如，将一个放在顶部，一个放在底部

在这里，我拼凑了一个快捷键


编辑：纯少混音（无JS）：
我编写了一个新的mixin来计算base64颜色，只使用较少的颜色，所以
它适用于所有较少的实现

这是一个较小的1.4.0解决方案：

.b64(@r,@g,@b) {
    @test: "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 "+" "/" "=";
    @bit1: extract(@test, (floor(@r/16) + 1)); @bit2: extract(@test, (mod(@r,16)*4 + floor(@g/64) + 1)); @bit3: extract(@test, (mod(@g,64) + 1)); @bit4: extract(@test, (floor(@b/4) + 1)); @bit5: extract(@test, (mod(@b,4)*16 + 16));
    b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}";
}

这应该适用于所有LESS版本>=1.1.6：

.b64(@r,@g,@b) {
    @1:"A"; @2:"B"; @3:"C"; @4:"D"; @5:"E"; @6:"F"; @7:"G"; @8:"H"; @9:"I"; @10:"J";    @11:"K";    @12:"L";    @13:"M";    @14:"N";    @15:"O";    @16:"P";    @17:"Q";    @18:"R";    @19:"S";    @20:"T";    @21:"U";    @22:"V";    @23:"W";    @24:"X";    @25:"Y";    @26:"Z";    @27:"a";    @28:"b";    @29:"c";    @30:"d";    @31:"e";    @32:"f";    @33:"g";    @34:"h";    @35:"i";    @36:"j";    @37:"k";    @38:"l";    @39:"m";    @40:"n";    @41:"o";    @42:"p";    @43:"q";    @44:"r";    @45:"s";    @46:"t";    @47:"u";    @48:"v";    @49:"w";    @50:"x";    @51:"y";    @52:"z";    @53:0;  @54:1;  @55:2;  @56:3;  @57:4;  @58:5;  @59:6;  @60:7;  @61:8;  @62:9;  @63:"+";    @64:"/";    @65:"=";
    @modR16: @r - floor(@r/16)*16; @modG64: @g - floor(@g/64)*64; @modB4: @b - floor(@b/4)*4;
    @pos1: (floor(@r/16) + 1); @pos2: (@modR16*4 + floor(@g/64) + 1); @pos3: (@modG64 + 1); @pos4: (floor(@b/4) + 1); @pos5: (@modB4*16 + 16);
    @bit1: @@pos1; @bit2: @@pos2; @bit3: @@pos3; @bit4: @@pos4; @bit5: @@pos5;
    b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}";
}

数据uri函数现在是内置的：

我基于png.js类制作了png数据URI生成器：