react组件引用本地图片并进行标记 生成csv本地文件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react组件引用本地图片并进行标记 生成csv本地文件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1942字，纯文字阅读大概需要3分钟。

内容图文

引用

我最近在使用react写网页，有一个需求是：在前端读取本地的图片文件，在react组件中显示，并且对图片文件进行标记。标记的结果存在本地csv文件中。
因为只是本地读取，本地存储，所以整个流程都不涉及与后端交互，纯前端就可以完成。

效果

实现

下面的实现只是思路以及核心代码，全部代码可移步Github。

为了使得标记可以自行修改，所以我把图片当作div的背景图片显示。标记当作div的p元素。render()函数很简单：

    render(){
            return(
                <Layout className={'image-card-layout'}>
                    <Card
                        className={'image-card'}
                        key={'image'+`${this.state.pic_path}`}
                        title={now_number+1+'frame'} 
                        hoverable
                        extra={
                        <Button type="primary" onClick={this.tofileCsv} size={'middle'}>
                        Done
                        </Button>
                        } # Card中有生成csv的button
                    >
                        {this.showpic()}  #显示图片
                    </Card>
                </Layout>
            )
        }

函数showpic()是导入本地图片，当作背景图片，并显示label。

    showpic=()=>{
        const path = this.state.pic_path;
        var label = this.state.label;
        //设置背景图片
        var bg = { 
            width:window.outerWidth,
            marginLeft:'4%',
            marginBottom:0,
            height:'725px', //设置高度
            backgroundSize:'contain', //按比例缩放
            backgroundRepeat:'no-repeat',
            backgroundImage:'url('+path+')',   //重点！导入图片路径
        }
            return (
                <div style={bg} key={'image_frame'}>  //背景图片显示
                    <p className={'label-p'}>{label}</p>  //label显示
                </div>
            )
    }

添加label，需要在componentDidMount中添加监听键盘事件，如果按下对应的按钮就显示对应的label：

    componentDidMount(){
        document.addEventListener('keyup', (e)=> {
            switch(e.keyCode){
                // 1
                case 97: case 49 :{
                    //进行标记 W
                    //标记形式应该是
                    const now_n = now_number;
                    frame_label[now_n] = {itemID:now_n, itemLabel:'w'};
                    this.setState({label:'w'})
                }
                default:break;
            }
        })
    }

将list数据生成csv文件，保存在本地：

    tofileCsv=()=>{
    		// 生成csv数据
            const csvString =[
               [ "Item ID",
                "Item Label"
            ],
                ...frame_label.map(item=>[
                    item.itemID,
                    item.itemLabel
                ])
                ]
                .map(e=>e.join(","))
                .join('\n')

            let exportContent = '\uFEFF';
            let blob = new Blob([exportContent+ csvString],{
                type:'text/plain;charset=utrf-8'
            });
            FileSaver.saveAs(blob,`${this.state.fileName}`+'_label.csv')  // 保存文件名
        }

形式如下：

Github项目地址

待完善…

内容总结

以上是互联网集市为您收集整理的react组件引用本地图片并进行标记 生成csv本地文件全部内容，希望文章能够帮你解决react组件引用本地图片并进行标记 生成csv本地文件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---