css - 使用命令行中的 base64 编码字符串替换 CSS 文件中的所有图像

Question

基本上，我正在尝试编写一个巧妙的单行命令来输出 base64 编码的字符串，而不是以前有图像路径的地方。所以:

background-image: url(path/to/my/image.png);

……会变成:

background-image: url(data:image/png;base64,ABvR0…+tC==);

我通常通过以下方式将图像转换为 base64 编码的字符串:

openssl enc -base64 -in path/to/my/image.png

它输出 base64……但其中有换行符。这是通过管道通过 tr 解决的，例如:

openssl enc -base64 -in path/to/my/image.png | tr -d '\n'

它只输出一个长的 base64 编码字符串。通过使用发送到剪贴板的 pbcopy(在 Mac OS 上)，如下所示:

openssl enc -base64 -in path/to/my/image.png | tr -d '\n' | pbcopy

非常适合用 base64 表示临时替换偶尔的图像，但我想做的是自动替换所有出现的 url(path/to/whatever.ext)通过它们各自的 base64 字符串在文件中。确保只有实际路径并且没有超出此处范围的数据 uris :)

我一直在尝试用 sed 替换一些东西，但我陷入了它糟糕的文档中。在 css 文件中找到 url(…) 模式的出现并不难，但是括号之间的位需要用上面命令的输出替换，如果这是我就不知道了尽一切可能。所以，就是这样，帮助或一些指示(我是否也需要研究 awk？)将不胜感激! “没有适当的脚本你不能这样做”当然也可以:)

Answer 1

使用openssl工具

#!/bin/bash

awk -F'[()]' -v q="'" '

/background-image: url(.*)/ {
  cmd=sprintf("openssl enc -base64 -in %s | tr -d %c\\n%c",$2,q,q)
  cmd | getline b64
  close(cmd)
  $0=$1 "(data:image/png;base64," b64 ");"
}1' /path/to/css/file

概念验证

参见 HERE一个工作示例

---

使用base64工具

#!/bin/bash

awk -F'[()]' '

/background-image: url(.*)/ {
  cmd=sprintf("base64 -w0 %s",$2)
  cmd | getline b64
  close(cmd)
  $0=$1 "(data:image/png;base64," b64 ");"
}1' /path/to/css/file

概念验证

参见 HERE一个工作示例