Как достигли такого эффекта в canvas?

Question

[Genri_Rus]

Эффект обрезанного изображения, вот пример: vintagetechnics.ru/comment


Я пытался сделать тоже самое, но у меня почему-то фото не обрезается: https://codepen.io/Genri_Rus/pen/vYLGxzV


Пример фото:

spoiler

Comments

[Dima Polos]

Может я чего не понимаю, но зачем там канвас? overflow: hidden же

[Genri_Rus]

Dima Polos, мне нужно точно также сделать, как на их сайте

У них нету там overflow: hidden

[Kovalsky]

Genri_Rus, мне кажется "точно так же" подразумевает что оно выглядеть будет точно так же, а реализацию вы можете выбрать любую. Сделайте например картинку фоном и всё. Работа с растровыми изображениями на канве расписана в любом мануале, чтобы растянуть или обрезать картинку достаточно задать ей соответствующие координаты при отрисовке.

[Genri_Rus]

Kovalsky, ну вы считаете как там реализовали ?

Если по технологиям canvas, то обрезку можно сделать и будет точно также ?

[Виктор Давтян]

Genri_Rus, да, если там использован canvas. Но, опять же, способов реализации, как уже было упомянуто, много.

[Genri_Rus]

Виктор Давтян, ну я же скинул сайт: vintagetechnics.ru/comment

Там canvas сделан, я так и не понял как можно обрезать картинку

В этом примере показывается растягивание, а мне нужна обрезка

[Kovalsky]

Genri_Rus, посмотрите аргументы основного метода работы с изображениями - https://developer.mozilla.org/ru/docs/Web/API/Canv... . Там же даже есть примеры в которых есть все нужные вам эффекты

[Genri_Rus]

Kovalsky, в моем примере не все так просто, там нужно динамически высчитывать показатели ширины и высоты