Css/Js for Circular Cropping of an Image

CSS/JS for Circular cropping of an image

For the speech bubble part I suggest this tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/ I use it often for ideas and learning how to do it myself. I give you a tutorial because I want you to learn how to do it. If you gave me code that needed some help, then I'd give you an answer on how to fix it. Do you have any code for this yet?

Also for the cropping, I think a quick way to do this is make a square wrapper div around your image then give it a border-radius (css) that is half of the length of one of the sides. Set the overflow to hidden and you're set.

Cheers!

CSS Circular Cropping of Rectangle Image

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

This would work:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Circular cropping of image in konvajs

Actually there is a way offered by konva itself. To do this, you have to define a clipping region either for a konva layer or a group. This clipping region can be as simple as a rectangle or something more advanced like a circle.

The shape is set using the clipFunc property of a layer or group. This property expects a function which contains a set of drawing operations to define your actual shape. So in case of a circle, you would utilize the context.arc() operation.

Here's an example:

var src = 'https://picsum.photos/id/237/200/300';

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 300,
});

var layer = new Konva.Layer({
  clipFunc: function(ctx) {
    ctx.arc(130, 140, 70, 0, Math.PI * 2, false);
  }
});
stage.add(layer);

Konva.Image.fromURL('https://picsum.photos/id/237/200/300', function(theDog) {
  theDog.setAttrs({
    x: 0,
    y: 0,
    scaleX: 1,
    scaleY: 1,
  });
  layer.add(theDog);
  layer.batchDraw();
});

<script src="https://unpkg.com/konva@7.2.5/konva.min.js"></script>
<div id="container"></div>

Crop image into square and then to circle using pure CSS?

You can use circle() but without the parameters:

.clipped {
   clip-path: circle();
}

It appears to use the smaller side of your image as the circle's circumference.

Working sample here.

It works on Chrome and FireFox. IE and Edge still does not support clip-path

Bootstrap 4 - Cropping image into a circle - landscape photos are not cropped properly

Not sure if this will fit your needs but you could use the background-image property to accomplish this. Here is a working CodePen.

HTML:

<div class="agent-image"></div>

CSS:

.agent-image{

    background-image:url("https://i.gyazo.com/da27f072059db48590e3b9da9d7789c2.jpg");
    background-position:center;
    background-size:cover;
    height: 120px;
    width: 120px;
    border-radius: 50%;

}

---

Related Topics