javascript - Javascript在图像画布上围绕形状绘制边框

Question

我正在寻找一种解决方案来在图像上的所有形状周围绘制边框。我已经尝试过这个解决方案在画布上围绕图像的不透明部分绘制边框，但这对我不起作用。

想象一下这个.png

我正在寻找的解决方案应该是这样的

有没有库/解决方案？

谢谢

Answer 1

如果您使用 绘制所有形状ctx.fill()，则可以ctx.stroke()在每次调用之前调用ctx.fill()。这将产生一条 width 线ctx.lineWidth/2，因为该线的一半将被形状本身覆盖。但是，他不适用于其他方法，例如ctx.drawImage()or 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;
}

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