Html2canvas неправильно отображает элементы формы

Я использую React и Html2Canvas для захвата формы нажатием кнопки. Форма имеет четыре узла select. Html2Canvas сохраняет форму как изображение, но выборки внутри показывают первый вариант в отображаемом изображении. Мне интересно, неправильно ли я настроил это либо в конфигурации html2canvas, либо в реакции.

let options = {
  async: true,
  foreignObjectRendering: true,
  logging: false
};
let input = this.iceBreaker.current;
html2canvas(input, options).then(canvas => {
  if (canvas) {
    this.setState({
      imageRef: canvas.toDataURL('image/png')
    });
  }
});

При нажатии кнопки imageRef загружается в формате PNG. Обратите внимание, что даже добавление div к телу показывает ту же проблему (именно по этой причине я не прикреплял никакого другого кода). Мы будем очень признательны за любое понимание. Спасибо!

reactjs html2canvas

12.03.2019 23:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 542

Ответы 2

Вот так: должно быть довольно ясно...

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { canvasArray: [] };
    this.captureRef = React.createRef();
  }

  getScreenshotHandler = () => {
    html2canvas(this.captureRef.current).then(canvas =>
      this.setState({
        canvasArray: [canvas.toDataURL(), ...this.state.canvasArray],
      }),
    );
  };

  renderCanvas = () => {
    return this.state.canvasArray.map((canvas, i) => {
      return <img key = {i} src = {canvas} alt = "screenshot" />;
    });
  };

  render() {
    return (
      <div className = "wrapper">
        <div ref = {this.captureRef} className = "to-capture">
          <p>
            This enitre <code>div</code> will be captured
          </p>
        </div>
        <button onClick = {this.getScreenshotHandler}>Get Screenshot!</button>
        <section>
          <h5>Your screenshots will be availbale below:</h5>
          {this.renderCanvas()}
        </section>
      </div>
    );
  }
}

Живая демонстрация здесь: https://codesandbox.io/s/1r213057vq

Этот комментарий привел меня к правильному ответу. foreignObjectRendering: true позволял выпадающим значкам SVG хорошо выглядеть при рендеринге на холсте, но заставлял отображать только первый вариант выбора в форме, которую мы захватили, независимо от того, что было выбрано. Нам пришлось использовать другую обработку иконок, и все заработало.

— 19.03.2019 16:58

13.03.2019 01:07

Элементы с абсолютной позицией не отображаются по умолчанию. Убедитесь, что все ваши элементы не находятся в абсолютном положении.

24.12.2020 16:58