-2
私は画像と同じカットラインを作成しようとしています。エッジを検出するにはcannyJSを使用しました。問題はエッジ点を持つ矩形画像として出力を出力するcannyです。私は画像としてエッジのみを必要とします。可能ですか?画像としてエッジポイントが必要です
期待される結果は、このようなものです:
例えば、私は下の画像
また、イメージからsvgパスを取得する他の方法がありますか?
私は画像と同じカットラインを作成しようとしています。エッジを検出するにはcannyJSを使用しました。問題はエッジ点を持つ矩形画像として出力を出力するcannyです。私は画像としてエッジのみを必要とします。可能ですか?画像としてエッジポイントが必要です
期待される結果は、このようなものです:
例えば、私は下の画像
また、イメージからsvgパスを取得する他の方法がありますか?
この効果は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>
フィルタの手順は、次のとおり
このフィルタの値は、この特定の画像に多少調整されています。他の画像でこれを行う必要がある場合は、フィルタ要素の値を微調整する必要があります。
また、私は画像を白の<div>
の中に入れて、画像の代わりにdivにフィルタを適用しました。これは、フィルタによって画像の内容が「拡大」され、(より小さい)画像境界にクリップされないようにする必要があるためです。
ありがとうございました。私はこれをチェックし、いくつかの瞬間を必要とします。 – lalithkumar
画像のほとんどは、それが働いています。そして、私は白としてボーダーカラーとイメージを追加しようとしています。 tableValuesそれは白になります。境界線の色を追加するには、塗りつぶしてストロークを試してみました。 – lalithkumar
また、イメージやsvgとして結果を保存できませんでしたか? – lalithkumar