Как в react tsx сохранить содержимое div в виде изображения?

Question

У меня есть div со свойством overflow: "hidden", я хочу сохранить содержимое этого div в виде изображения.

Нашёл такое решение, которое сохраняет только то, что отображается на экране, однако мне нужно, чтобы сохранялось даже то, что не видно. Как это сделать, помогите, пожалуйста, с решением?

const MyComponent = () => {
    const divRef = useRef(null);

    const handleSave = () => {
        if (divRef.current) {
            html2canvas(divRef.current).then((canvas) => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL();
                link.download = 'screenshot.png';
                link.click();
            });
        }
    };

    return (
        <div
            //обратите внимание на overflow: "hidden"
            style={{
                overflow: "hidden"
            }}
            ref={divRef}
        >
            {/* Ваше содержимое div */}
            <button onClick={handleSave}>Сохранить</button>
        </div>
    );
};

export default MyComponent;

Answer 1

Вынесите генерацию JSX в метод класса renderInner. Верните из метода render фрагмент с двумя корневыми нодами: одна для скриншота, вторая для пользователя

<>
  {/* Код для скриншота ноды (за границами экрана) */}
  <div
    style={{
      position: "fixed",
      left: "-100vw",  
    }}
    ref={divRef}
  >
    <button onClick={handleSave}>Сохранить</button>
  </div>

  ...

  {/* Код для отображения */}
  <div
    style={{
      overflow: "hidden"
    }}
    ref={divRef}
  >
    <button onClick={handleSave}>Сохранить</button>
  </div>
</>

БЛОГ НА HUSL

Как в react tsx сохранить содержимое div в виде изображения?

Ответы (1 шт):