图片上传裁剪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
相关推荐
excel21 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript