图像 描边 算法_WEB 中的透明图像描边

图像描边是设计软件中常见的图像处理功能，在 Canvas 中有 strokeText 能够直接对文字进行描边，那么有没有一个 API 能够对图像进行描边呢？很遗憾，并没有。那我们要如何实现描边呢？这就让我们来看看有哪些方案能够实现描边效果。

SVG 滤镜

既然 Canvas 没有内置，那万能的 SVG 有没有呢？SVG 里有许多有趣的滤镜，其中的 feMorphology 可以达到将某些元素进行「扩张」或者「腐蚀」的效果。通过它可以实现 文字描边。那如果将它 应用在图像上 呢？效果如下：

好吧，这个边缘看起来并不圆润，只得放弃这个方案。

图像偏移

假设一张简单的矩形图像，如果将它进行填充并复制 8 份，把这 8 张分别沿着上、下、左、右、左上、左下、右上、右下八个方向进行偏移，就能完成对矩形图像的描边。不过它的描边结果不「圆润」，如果复制更多份，比如 360 份，让图像往 360 个方向进行偏移不就能