在网页上渲染 Android 的 9-Patch 图像

最近在写网页的时候，需要在一段文本或一块区域的周边显示 Android 的 9-Patch 图像。就像这样：

Google了一下，发现可以用 CSS3 的 border-image 来实现这样的效果。瞬间感觉又 get 到了新知识，然后兴冲冲地开始用 border-image 来做，而且网上还有不少 border-image 的生成工具，如 Mozilla 的，十分方便。

过了一会儿后，我发现 border-image 并没有 Android 的 9-Patch 那么强大。border-image 只能简单的把一张背景图分成 9 格，四个角的图片填到 border 的四个角，上下左右四个边的图片就只能整体拉伸或重复填充到 border 的四个边。而 Android 的 9-Patch 还能指定多个拉伸区域，就像这样：

上面这样的效果，用 border-image 无论如何也做不出来。惆怅了，难道要用 TABLE 把 border 拼出来？好麻烦的啊~~~

实在不想用 TABLE 来拼这样的效果，只有又去 Google。功夫不负有心人，终于让我找到了一个 Javascript：https://github.com/chrislondon/9-Patch-Image-for-Websites。其作者当初也是想在网页上渲染出 Android 的 9-Patch 图像，大概也是苦于没有现成的 lib 可以用，于是就自己写了一个。可惜这个项目 4 年前就已经停止维护了。我把代码下下来后，本地测试效果，确实有 bug，9-Patch 图像没有正常渲染出来（我用的是 Chrome 85.0.4183.102），developer tool 的 console 里报错了。

又 Google 了下错误信息，在 https://stackoverflow.com/a/19821523/8340533 找到了热心网友的 fix。于是很 happy 的把他的 fixing merge 进去，又发现了一些小 bug，干脆全都 fix 了。最后把原作者的仓库 fork 了，然后 commit 自己的 fix，全部甩到 Github 上。

现在这个 Javascript 已经可以用了，需要的同学可以 checkout https://github.com/blackmonkey/jQuery-9-Patch。下面贴一张效果图：