Need edge points as image

Question

I am trying to create the cutline for same as the image.To detect the edge I have used cannyJS. The problem is cannyJS which delivers the output as rectangle image with edge points.I want only the edge as image.Is that possible?

For example if I upload the below image

I got the this output:

The expected result is something like this:

Or is there any other way to get the svg path from the image to get like this?

score 3 · Accepted Answer · edited Oct 27 '17 at 05:16

You can achieve this effect with SVG filters.

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>

The steps in the filter are:

Step 1 & 2: Convert from a colour image to greyscale, and then threshold to black or white only.
Step 3: Use a "morphology" filter element to expand the black areas. This makes the thin parts of the image , like the text, more bold.
Step 4 & 5: Blur the black areas and threshhold again. This gives the final result a more rounded look.

The values in this filter are tuned to this particular image somewhat. If you need to do this for other images, you may need to tweak the filter element values a little.

Note also that I have put the image inside a white <div>, and applied the filter to the div instead of the image. This is because the filter causes the contents of the image to "expand" and we need to avoid it being clipped to the (smaller) image bounds.

thank you very much for the answer..i ll check this and need some moments.. — lalithkumar, Oct 24 '17 at 04:37
most of the images it works..And i am trying to add the border color and image as white ..if i change the tableValues it becomes white.To add border color i tried fill and stroke..that doesn't help..how to do that? — lalithkumar, Oct 24 '17 at 05:49
We are filtering the input image and the final result is another bitmap image. You can't set the fill or stroke because it is not a vector. What do you mean by "i am trying to add the border color and image as white"? Can you post an image of the final effect you want to achieve? — Paul LeBeau, Oct 24 '17 at 12:20
And also if the image tag is in svg itself i can save that into svg file and can be loaded into canvas.. — lalithkumar, Oct 24 '17 at 12:25
I have posted other question also.. please check https://stackoverflow.com/questions/46906819/edge-detection-in-svg-filter — lalithkumar, Oct 24 '17 at 13:20

Need edge points as image

1 Answers1