Блог

Я пытаюсь работать над простым редактором изображений, используя cropperjs и react, я хочу, чтобы мой проект позволял пользователю загружать изображение, обрезать его, а затем загружать. Я использую локальное хранилище браузера для хранения изображения пользователя, затем я импортирую изображение из локального хранилища на холст, еслипользователь не загружает изображение, у меня есть изображение по умолчанию, с которым пользователь может играть. Локальное хранилище правильно хранит изображение пользователя, и загрузка также работает для меня, но моя проблема в том, что изображение локального хранилища не отображается на canvas и показывает только изображение по умолчанию.

вот мой код компонента формы загрузки

 import React from 'react';
const UploadForm = ({uploader}) => {
    const handleChange = (e) =>{
        uploader(e.target.files[0])
    }
    return <form>
        <input type="file" accept ="image/*" onChange ={handleChange}/>
    </form>;
}
export default UploadForm;
 

и вот мой код компонента приложения

 import React, { useState, useEffect } from 'react';
import Cropper from './comps/cropper.jsx';
import UploadForm from './comps/UploadForm.jsx';
const App = () => {
    const [url, setUrl] =useState('');
        const uploader = (file) =>{
        const reader = new FileReader();
        reader.addEventListener('load', ()=>{
            localStorage.setItem('recent-image',reader.result)
        })
        reader.readAsDataURL(file);
    }
    useEffect(() => {
        setUrl(localStorage.getItem('recent-image'));
    }, [])
    return ( 
        <div>
            <UploadForm uploader = {uploader}/>
            <Cropper src ={url}/>
        </div>
     );
}
 
export default App;
 

и вот мой код компонента обрезки

 import React, { Component } from 'react'
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.min.css';
import './cropper.css'
import image from '../image.png';
export class cropper extends Component {
    state= {
        imageDestination:""
    }
    imageElement = React.createRef();
    componentDidMount(){
        const cropper = new Cropper(this.imageElement.current, {
            // zoomable:true,
            scalable:true,
            aspectRatio:1,
            crop:()=>{
                const canvas = cropper.getCroppedCanvas();
                this.setState({
                    imageDestination:canvas.toDataURL('image/png')
                })
            }

        });

    }
    render() {
        
        return (
            <div>
              <div className ="img-container">
                  <img ref ={this.imageElement} src ={this.props.src||image} alt ="source"/>
                  </div>  
                  <img src = {this.state.imageDestination} className = "img-preview" alt ="Destination" />
                  {this.state.imageDestinationamp;amp;<a href ={this.state.imageDestination}
                   download>Download</a> 
}
            </div>
        )
    }
}

export default cropper
 

in cropper.jsx , вы export указываете класс cropper , а также export default cropper в конце файла тоже.

export class cropper extends Component

export default cropper

Возможно, это и является причиной проблемы