画像としてエッジポイントが必要です

Question

私は画像と同じカットラインを作成しようとしています。エッジを検出するにはcannyJSを使用しました。問題はエッジ点を持つ矩形画像として出力を出力するcannyです。私は画像としてエッジのみを必要とします。可能ですか？

：

期待される結果は、このようなものです：

例えば、私は下の画像

をアップロードする場合、私はこの出力を得ました

また、イメージから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： "morphology"フィルタ要素を使用して黒い領域を拡大します。これにより、テキストのような画像の薄い部分がより太字になります。
• ステップ4 & 5：黒い部分をぼかして、再度しきい値を設定します。これにより、最終結果がより丸みのある外観になります。

このフィルタの値は、この特定の画像に多少調整されています。他の画像でこれを行う必要がある場合は、フィルタ要素の値を微調整する必要があります。

また、私は画像を白の<div>の中に入れて、画像の代わりにdivにフィルタを適用しました。これは、フィルタによって画像の内容が「拡大」され、（より小さい）画像境界にクリップされないようにする必要があるためです。