javascript #html #reactjs #dom-to-image
#javascript #HTML #reactjs #dom-to-image
Вопрос:
Я пытался преобразовать HTML-узел в моем коде react в изображение и загрузить его позже. Существует несколько библиотек, которые мы можем использовать для выполнения этой работы за нас, например, html-to-image, dom-to-image. Но проблема в том, что эти библиотеки загружают изображение в размере его представления, а не в исходном размере.
Я имею в виду, что если у меня есть компонент, который имеет разные стили на разных экранах, когда я загружаю изображение этого компонента, я хочу, чтобы изображение имело стили большего экрана, независимо от того, каков мой текущий размер окна.
Если у меня есть адаптивный компонент, который расширяется и сжимается в зависимости от размера окна, я хочу, чтобы изображение этого компонента выглядело так, как компонент выглядел на больших экранах.
Ответ №1:
Если вы хотите загрузить изображение с исходным размером изображения, просто используйте width и height для ширины и высоты изображения. Если вы хотите загрузить изображение с размерами его контейнера, включая отступы, используемые в контейнере, затем используйте clientWidth clientHeight свойство и элемента image .
Комментарии:
1. на изображении есть. только html. я хочу загрузить HTML-представление в виде изображения. но вид HTML изменяется при изменении размера экрана. я хочу, чтобы изображение загружалось в исходном размере.
2. В этом случае вы можете использовать элемент canvas . Вы можете получить размеры изображения, нарисовав его на элементе canvas, а затем загрузить изображение с размером, указанным на canvas. Если вам нужна какая-либо помощь в этом, пожалуйста, обратитесь w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage
Ответ №2:
Если вы хотите загрузить изображение с исходным размером изображения, просто используйте width и height для ширины и высоты изображения. Если вы хотите загрузить изображение с размерами его контейнера, включая отступы, используемые в контейнере, затем используйте свойство clientWidth и clientHeight элемента image . Отредактировал изображение для минимального требуемого количества пикселей.
Ответ №3:
Я обнаружил, что мы можем загружать HTML-узел в дереве react только с учетом его размера и стиля представления. Предположим, что у нас есть таблица на странице. Когда мы на большом экране, мы видим эту таблицу в одном стиле. Но на меньшем экране мы видим это в другом стиле. Когда мы загружаем изображение этой таблицы, мы хотим, чтобы таблица загружалась в ее стиле и размере на большом экране, независимо от размера экрана.
По-видимому, мы можем загружать только то, что присутствует в физическом DOM. Если физический DOM имеет уменьшенную версию, мы можем загрузить только уменьшенную версию. Если физический DOM содержит увеличенную версию таблицы, мы можем загрузить в нее увеличенную версию.
Что я сделал, чтобы преодолеть эту проблему, так это открыть модальный файл, когда пользователь хотел загрузить изображение этой таблицы. Я нарисовал большую версию таблицы с фиксированной высотой и шириной на этом модальном и загрузил изображение из этого модального. На меньшем экране эта большая таблица внутри модала выглядела не очень красиво, хотя это было всего на несколько мгновений. Итак, чтобы скрыть эту большую таблицу, я поместил сверху приятную анимацию загрузки с фиксированным положением. После завершения загрузки я закрываю модальный.