react-cropper截取图片

最新推荐文章于 2024-08-22 09:32:13 发布

web_cgh

最新推荐文章于 2024-08-22 09:32:13 发布

阅读量1.4k

点赞数

分类专栏：工具类文章标签： react-cropper 截取图片

本文链接：https://blog.csdn.net/web_cgh/article/details/99949346

版权

工具类专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、CropperCpn.js 

import React, {Component} from 'react';
import {Modal, Button} from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

export default class CropperCpn extends Component {
    state = {
        loading: false,
        height: 0,
        widht: 0,
    };
    dataUrl = '';

    _crop() {
        this.dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
        let cropBox = document.querySelector('.cropper-crop-box');
        this.setState({
            height: cropBox.style.height,
            width: cropBox.style.width,
        })
    }

    handleSubmit = () => {
        this.props.sure(this.dataUrl);
    };

    render() {
        const style = {
            modal: {top: 0, paddingBottom: 0, margin: 0},
        };
        const {title, visible, content} = this.props;
        const {width, height} = this.state;
        return (
            <Modal title={title} width={1000} style={style.modal} visible={visible} centered
                // okText='确定'
                   closable={false}
                // cancelText='取消'
                // onCancel={this.props.onCancelPopup}
                   footer={<Button onClick={this.handleSubmit}>确定</Button>}
                   destroyOnClose={true}
                   confirmLoading={this.state.loading}
                // okButtonProps={{disabled: false}}
            >
                <Cropper
                    ref='cropper'
                    // src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2114375040,2314544443&fm=26&gp=0.jpg'
                    src={content}
                    style={{height: 'auto', width: '100%'}}
                    aspectRatio={16 / 9}
                    guides={false}
                    crop={this._crop.bind(this)}/>
                <p>宽度：{width} ,高度：{height}</p>
            </Modal>
        );
    }
}     

//使用方式
2、CropperUse.js 

import React, {Component} from 'react';
import {Modal, Button} from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

export default class CropperUse extends Component {
    state = {
        loading: false,
        height: 0,
        widht: 0,
    };
    dataUrl = '';

    _crop() {
        this.dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
        let cropBox = document.querySelector('.cropper-crop-box');
        this.setState({
            height: cropBox.style.height,
            width: cropBox.style.width,
        })
    }

    handleSubmit = () => {
        this.props.sure(this.dataUrl);
    };

    render() {
        const style = {
            modal: {top: 0, paddingBottom: 0, margin: 0},
        };
        const {title, visible, content} = this.props;
        const {width, height} = this.state;
        return (
            <Modal title={title} width={1000} style={style.modal} visible={visible} centered
                // okText='确定'
                   closable={false}
                // cancelText='取消'
                // onCancel={this.props.onCancelPopup}
                   footer={<Button onClick={this.handleSubmit}>确定</Button>}
                   destroyOnClose={true}
                   confirmLoading={this.state.loading}
                // okButtonProps={{disabled: false}}
            >
                <Cropper
                    ref='cropper'
                    // src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2114375040,2314544443&fm=26&gp=0.jpg'
                    src={content}
                    style={{height: 'auto', width: '100%'}}
                    aspectRatio={16 / 9}
                    guides={false}
                    crop={this._crop.bind(this)}/>
                <p>宽度：{width} ,高度：{height}</p>
            </Modal>
        );
    }
}