Javascript在图像画布上的形状周围绘制边框

Question

我正在寻找一种解决方案，以在图像上的所有形状周围绘制边框。我已经尝试过此解决方案Draw border around nontransparent part of image on canvas，但这对我不起作用。

想象一下这个png

我正在寻找的解决方案应如下所示

有任何库/解决方案吗？

谢谢

Answer 1

如果要使用ctx.fill()绘制所有形状，则可以在每次调用ctx.stroke()之前调用ctx.fill()。这将导致宽度为ctx.lineWidth/2的线，因为该线的一半将被形状本身覆盖。但是，他不适用于其他方法，例如ctx.drawImage()或ctx.putImageData()。请指定将这些形状精确绘制到画布上的方式，以获取更多详细帮助。

编辑：我想您可以使用您已经提到的解决方案，您只需要使图像的非黑色部分透明即可。您可以通过编辑画布的imageData来做到这一点：

var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for (let i=0;i<imageData.data.length;i+=4){
    if (shouldBeTransparent(imageData.data[i],imageData.data[i+1],imageData.data[i+2]){
        imageData.data[i+3] = 0;
    }
}
ctx.putImageData(imageData,0,0);

function shouldBeTransparent(r,g,b){
    return r!=0||g!=0||b!=0;
}

这将使所有不完全是黑色的像素透明，因此您可以继续使用已经提到的方法。