Раньше мы могли захватывать изображения только с помощью других инструментов для создания снимков экрана. Функции современных браузеров становятся все более мощными. С постепенной популяризацией H5 браузер сам может делать снимки экрана. html2canvas — это такой внешний плагин. Его принцип заключается в рисовании узлов Dom в Canvas. Хоть это и очень удобно, оно имеет следующие ограничения:
Поскольку мой сценарий использования очень прост, записывайте информацию об исключении, а страница исключения также определяется мной, то для использования достаточно html2canvas.
Когда я впервые использовал html2canvas, целью было сделать снимок экрана всей страницы и сгенерировать изображение для сохранения пользователем.
Давайте сначала посмотрим, как выглядит HTML-рендеринг.
Из изображения, обработанного с помощью HTML, вы можете видеть, что изображение выше имеет эффект закругленных углов, но когда я использовал html2canvas для преобразования изображения, я обнаружил, что эффект закругленных углов изображения не сработал.
Это стало вот так. Подумав над многими решениями, я наконец решил превратить закругленные углы сзади в фоновое изображение. Фон среднего круга является прозрачным, а затем он накладывается на исходное изображение посредством абсолютного позиционирования, что эквивалентно маске. эффект.
Конечно, узел DOM изображения маски должен находиться ниже изображения, для которого требуются закругленные углы, аналогично
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Исходное изображение, требующее закругленных углов --> <img src=/template/images/avatar .png class=img-Response style=position: Absolute;><!--Маска изображения--></div>
После создания он будет выглядеть нормально.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Исходное изображение, требующее закругленных углов --> <img src=/template/images/avatar .png class=img-Response style=position: Absolute;><!--Маска изображения--></div>Скопировать код