图片上传裁剪react-cropper

效果图

安装插件

npm i react-cropper

或者

yarn add react-cropper

主要代码

javascript 复制代码
import React, { useRef, useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './index.less';
import { UploadOutlined } from '@ant-design/icons';
import { Upload, Button, Space, Divider } from 'antd';


function cropper() {
    const cropperRef = useRef(null);
    const [imgsrc, setImgsrc] = useState(null); // 裁剪好的imgsrc
    const [image, setImage] = useState("https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"); // 记录图片

    const handleCrop = () => {
        const imageElement: any = cropperRef?.current;
        const cropper: any = imageElement?.cropper;
        const back64Cropper = cropper.getCroppedCanvas().toDataURL();
        console.log(cropper.getCroppedCanvas().toDataURL("image/jpeg"), "裁剪的base64编码");
        const base64Data = back64Cropper; // base64 格式的图像数据
        const url = base64ToUrl(base64Data); // 转换为 URL
        console.log("剪切url=", url); // 输出 URL

        setImgsrc(url);
    };

    function base64ToUrl(base64Data: any) {
        const blob = base64ToBlob(base64Data); // 将 base64 转为 Blob
        const url = URL.createObjectURL(blob); // 生成 URL
        return url;
    }

    function base64ToBlob(base64Data: any) {
        const byteString = atob(base64Data.split(',')[1]); // 将 base64 的数据部分解码成二进制数据
        const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; // 获取 MIME 类型
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], { type: mimeString }); // 生成 Blob 对象
    }

    const replaceImg = (img) => {
        console.log(img.file, "img");
        // 通过FileReader读取用户选取的文件
        const reader = new FileReader();
        reader.readAsDataURL(img.file.originFileObj);
        //加载图片后获取到图片的base64格式
        reader.onload = ({ target: { result } = {} }) => {
            console.log(result, "base64");
            //更新替换为目标图片
            setImage(result);
        };
        return false;
    };



    return (
        <div className='copy'>
            <Cropper
                ref={cropperRef}
                // 你所需要剪切图片的路径
                src={image}
                // 设置其他相关参数,例如裁剪框宽高比、裁剪框移动限制等
                style={{ height: 400, width: '100%' }}
                // 裁剪比例
                aspectRatio={16 / 9}
            />
            <div className='copy-but'>
                <Space>
                    <Upload fileList={[]} onChange={replaceImg} accept="image/*">
                        <Button size='large' className="upload" icon={<UploadOutlined />}>
                            选择图片
                        </Button>
                    </Upload>
                    <Button size='large' className="button" type="primary" onClick={handleCrop}>
                        确定裁剪
                    </Button>
                </Space>
            </div>
            <div className='copy-img'>
                <Divider plain>裁剪好的图片</Divider>
                <div style={{ minHeight: "300px", minWidth: "500px", border: "1px solid #ccc", display: "flex", justifyContent: "center", alignItems: "center"}}>
                    <img src={imgsrc} alt="" />
                </div>

            </div>
        </div>
    )
}

export default cropper
相关推荐
清风细雨_林木木3 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师26 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚31 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧34 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸40 分钟前
2、中医基础入门和养生
前端·后端
局外人LZ44 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端
鹿九巫1 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长1 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了1 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui