使用 react 从本地存储获取图像

编程问答 2022-06-02

问题描述

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

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

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

export default cropper

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropperjslocal-storagereactjsreactjs