How to get a photo in a frame, like in VK?

Question

In contact with

Hi all!
I wondered how I can get an avatar in this form? https://imgur.com/a/Fqr3Ype
I tried a lot of things, it doesn't work:

Answer 1

In VK, the picture from the server comes square, it becomes round with the help of CSS.
Judging by the tags, you need to get a round picture in nodeJS. You will need the canvas module , install it with the command: npm install canvas
Next, use the familiar Canvas API with some additions. Here is an example:

const { createCanvas, loadImage } = require('canvas')


const canvas = createCanvas(50, 50)
const ctx = canvas.getContext('2d')

loadImage('https://habrastorage.org/r/w60/webt/5d/fc/84/5dfc84d27a4a2949249978.jpeg')
  .then((image) => {
    ctx.drawImage(image, 0, 0, 50, 50);
    ctx.globalCompositeOperation = 'destination-in';
    ctx.beginPath();
    ctx.arc(25, 25, 25, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();

    console.log(canvas.toDataURL()) // Выводим в консоль Data URL
  })

Result:
PS Dubolom One-celled , stole your ava for demonstration, do not be offended)

Answer 2

Just read the file (picture) that the user sent you.
And in css:

селектор элемента, где будет эта картинка {
  border-radius: 50%; // обрезаю картинку
}

Answer 3

The original image is square.
Round it is already obtained on the client side in the browser using css