使用 React 从本地存储中获取图像答案

【问题标题】：getting image from local storage using react使用 React 从本地存储中获取图像
【发布时间】：2020-12-23 06:40:47
【问题描述】：

我正在尝试使用cropperjs 开发一个简单的图像编辑器并做出反应，我希望我的项目让用户上传图像裁剪然后下载我正在使用浏览器本地存储来存储用户的图像然后我是将图像从本地存储导入到画布，如果用户没有上传图像，我有一个默认图像让用户玩。本地存储正确存储用户图像，下载也适用于我，但我的问题是本地存储图像没有进入画布，它只显示默认图像。

这是我的上传表单组件代码

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;

这是我的 App 组件代码

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.imageDestination&&<a href ={this.state.imageDestination}
                   download>Download</a> 
}
            </div>
        )
    }
}

export default cropper

【问题讨论】：

标签： reactjs local-storage cropperjs

【解决方案1】：

在cropper.jsx，你export 类cropper 以及文件末尾的export default cropper。

export class cropper extends Component

export default cropper

也许这就是导致问题的原因

【讨论】：

感谢您的提及，这是一个错误但没有解决问题。