React Notes About Mobile Phone Wallpaper Preview

CSS: Make DIV Center:

<style>
#root {
  display: grid;
  place-items: center;    /* 同时水平和垂直居中 */
  height: 100vh;          /* 使容器占满整个视窗高度 */
}
</style>
<div id="root"></div>

Make elements in div on the one line

App.js

      <div className="controls">
        <input type="file" accept="image/*" onChange={handleImageChange} className='input-file' />
        <button onClick={handleScreenshot}>Screenshot</button>
      </div>

App.css:

.controls {
  display: flex;
  align-items: center;
  gap: 10px; /* 间距可调整 */
  margin-top: 10px;
}

Save DIV As An Image

App.js

import html2canvas from 'html2canvas';

  const handleScreenshot = () => {
    const container = document.querySelector('.image-container');
    html2canvas(container).then(canvas => {
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = 'wallpaper.png';
      link.click();
    });
  };