Soy nuevo para reaccionar y js. ¿Hay alguna manera de que pueda cargar una imagen y mover el texto que se puede arrastrar encima de esa imagen y cuando hago clic en descargar, la imagen junto con la descarga se guardan? Cualquier ayuda es muy apreciada.
Mi aplicación.js
import './App.css'; import Land from './Land'; import React from 'react'; import Draggable from 'react-draggable'; import { saveAs } from 'file-saver' function App() { const [file, setFile] = React.useState(); function handleChange(e) { console.log(e.target.files); setFile(URL.createObjectURL(e.target.files[0])); } const downloadImage = () => { saveAs(file, 'image.jpg') // Put your image url here. } return ( <div className="App"> <h2>Add Image:</h2> <input type="file" onChange={handleChange} /> <div className='img-container'> <Land/> <img src={file} width ="100%"/> <button onClick={downloadImage}>Download!</button> </div> </div> ); } export default App;Mi Tierra.js
import React from 'react'; import Navbar from './Navbar'; import Hero from './Hero'; import pic from './me.png' import Draggable from 'react-draggable'; export default function Land() { return( <div> <Draggable> <div>I can now be moved around!</div> </Draggable> </div> ) }