需要边缘点作为图像

Question

我正在尝试创建与图像相同的切割线。为了检测边缘，我使用了cannyJS。问题是 cannyJS 将输出作为带有边缘点的矩形图像提供。我只想要边缘作为图像。这可能吗？

例如，如果我上传下面的图片

我得到了这个输出：

预期的结果是这样的：

或者有没有其他方法可以从图片中获取svg路径得到这样的？

Answer 1

您可以使用 SVG 滤镜实现此效果。

img {
  width: 400px;
}

.blob {
  background-color: white;
  padding: 40px;
  filter: url(#blobby);
}

/* Hide the SVG element */
svg {
  width: 0px;
  height: 0px;
  position: absolute;
  left: -999px;
}

<img src="https://i.stack.imgur.com/dreFV.jpg"/>
<br>
<div class="blob">
  <img src="https://i.stack.imgur.com/dreFV.jpg"/>
</div>

<svg>
  <defs>
    <filter id="blobby" color-interpolation-filters="sRGB">
      <!-- Convert to greyscale -->
      <feColorMatrix type="saturate" values="0"/>
      <!-- Threshhold to black or white -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
      <!-- Morphology filter to "erode" (shrink) the white areas -->
      <feMorphology operator="erode" radius="8"/>
      <!-- Blur to cause image to "spread" -->
      <feGaussianBlur stdDeviation="10"/>
      <!-- High contrast to threshhold again -->
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
        <feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

过滤器中的步骤是：

• 第 1 步和第 2 步：将彩色图像转换为灰度，然后将阈值转换为仅黑色或白色。
• 第 3 步：使用“形态”过滤器元素扩大黑色区域。这会使图像的细部分（如文本）更加粗体。
• 第 4 步和第 5 步：模糊黑色区域并再次设置阈值。这使最终结果看起来更圆润。

此过滤器中的值在某种程度上已针对此特定图像进行了调整。如果您需要对其他图像执行此操作，则可能需要稍微调整过滤器元素值。

还请注意，我已将图像放在白色 <div> 中，并将过滤器应用于 div 而不是图像。这是因为过滤器会导致图像内容“扩展”，我们需要避免将其裁剪到（较小的）图像边界。