Как получить фотографию в рамке, как в ВК?

Question

[eshran]

Привет всем!
Задался вопросом, как мне получить аватарку в таком виде? https://imgur.com/a/Fqr3Ype
Много что перепробовал, не получается :

Comments

[Дуболом Одноклеточный]

Какой код пробовал? В каком приложении хочешь это сделать?

Answer 1

[Игорь]

В VK картинка с сервера приходит квадратная, круглой она становиться уже с помощью CSS.
Судя по тегам, вам нужно именно в nodeJS получить круглую картинку. Вам понадобится модуль canvas, установите его командой: npm install canvas
Дальше используйте привычный Canvas API с некоторыми дополнениями. Вот пример:

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
  })

Результат:
P.S. Дуболом Одноклеточный, стыбрил твою аву для демонстрации, не обижайся)

Comments

[Дуболом Одноклеточный]

@loony Наоборот, используй на здоровье, у меня еще пачка таких крутых ав есть

Answer 2

[Дуболом Одноклеточный]

Просто прочитай файл (картинку) которую тебе отправил пользователь.
А в css:

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

Answer 3

[Developer]

В исходном виде картинка квадратная.
Круглая она получается уже на стороне клиента в браузере посредством css