javascript - 如何将边框应用于画布上的透明图像？

Question

我正在使用 html5 中的画布处理透明图像，我想添加边框。

问题是属性“Stroke”不会考虑图像的透明度，并且会像使用矩形一样应用它。

例子：

当然，此图像包含透明度。

我可以用 imagemagick 得到我想要的结果：

我只使用 png 图像。 我想使用 HTML 中的画布来执行此操作。 我使用 vue-konva，但如果您有解决方案可以提供给我，我也可以留在原生画布上......

标签： javascriptvue.jsimage-processingcanvaskonvajs

Answer 1

这有帮助吗：

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>