使用命令行中的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但我陷入了可怕的文档.url(…)在css文件中找到模式的出现并不是很困难,但是括号之间的位需要被上面命令的输出所取代,如果可能的话,我也无能为力.所以,它是,帮助或一些指针(我是否也需要查看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

概念证明

有关工作示例,请参阅此处

用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

概念证明

有关工作示例,请参阅此处