代码之家 › 专栏 › 技术社区 › lalithkumar

需要边缘点作为图像

fabricjs svg image javascript

-2

lalithkumar · 技术社区 · 7 年前

cannyJS . 问题是cannyJS,它将输出作为带有边缘点的矩形图像。我只想要边缘作为图像。这可能吗?

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

我得到了这个输出:

预期结果如下:

或者有没有其他方法可以从图像中获取svg路径,从而得到这样的结果?

1 回复 | 直到 7 年前

lalithkumar 7 年前

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>