需要边缘点作为图像

Question

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

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

我得到了这个输出：

预期结果如下：

或者还有其他方法可以从图像中获取svg路径吗？

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

过滤器中的步骤是：

• 第1步＆amp; 2：从彩色图像转换为灰度，然后将阈值转换为黑色或白色。
• 第3步：使用＆＃34;形态学＆＃34;过滤元素以扩展黑色区域。这使得图像的薄部分（如文本）更加粗体。
• 第4步＆amp; 5：再次模糊黑色区域和阈值。这使得最终结果看起来更圆润。

此滤镜中的值会稍微调整到此特定图像。如果您需要对其他图像执行此操作，则可能需要稍微调整滤镜元素值。

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