react图片裁剪——cropperjs


前言

文件和图片的上传我们可能经常会去做,antd中也有现成的可直接使用,今天分享一个封装好的图片裁剪库react-cropper


仓库地址:点击此处查看github仓库地址

Demo演示:点击此处查看实际效果

一、下载安装

npm install cropperjs

二、配合antd使用

和Upload组件一起使用

       <Upload
          customRequest={options => {
            options?.onSuccess?.({ data: options.file });
          }}
          onChange={({ file }) => handleLogoChange(file as UploadFile)}
          showUploadList={false}
        >
          <Button size='small' type='link'>
            上传
          </Button>
        </Upload>
        
     // 在弹窗中进行裁剪操作
        <Modal
        title='裁剪LOGO'
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={400}
      >
        <Cropper
          ref={cropperRef}
          style={{ height: 200, width: '100%' }}
          initialAspectRatio={1}
          src={image}
          responsive={true}
          autoCropArea={1}
          checkOrientation={false}
          guides={true}
        />
      </Modal>

具体的api可查看官方文档,已满足开发需求。

选择和裁剪上传操作如下所示:

// 选择图片
const handleLogoChange = async (file: UploadFile) => {
    setImage(URL.createObjectURL(file.originFileObj as File));
    setOriginalFile(file.originFileObj);
    setIsModalOpen(true);
  };
  
// 裁剪后上传
const handleOk = () => {
    if (cropperRef.current) {
      cropperRef.current.cropper.getCroppedCanvas().toBlob(async blob => {
        if (blob && originalFile) {
          const croppedFile = new File([blob], originalFile?.name, {
            type: originalFile?.type,
            lastModified: Date.now(),
          });
          ...
          // 这里可进行你的上传操作
          // 配合后端接口来具体完成
           }
      });
    }
  };

到这里就实现了一个图片的裁剪上传,可支持自定义比例的裁剪。

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Native中进行图片裁剪可以使用第三方库来实现。一个常用的库是react-native-image-crop-picker。下面是一个简单的示例代码,演示如何在React Native中使用该库进行图片裁剪: 首先,你需要安装该库。打开终端,进入项目目录,并执行以下命令: ``` npm install react-native-image-crop-picker ``` 然后,根据你的平台,在iOS或Android项目中执行必要的配置步骤。你可以在该库的官方文档中找到详细的配置说明。 接下来,在你要使用图片裁剪功能的组件中,导入并使用react-native-image-crop-picker库。例如: ```javascript import React, { useState } from 'react'; import { View, Image, Button } from 'react-native'; import ImageCropPicker from 'react-native-image-crop-picker'; const MyComponent = () => { const [image, setImage] = useState(null); const handleImageSelection = () => { ImageCropPicker.openPicker({ width: 300, height: 400, cropping: true, }).then((response) => { if (!response.didCancel) { setImage(response.path); } }); }; return ( <View> {image && <Image source={{ uri: image }} style={{ width: 300, height: 400 }} />} <Button title="Select Image" onPress={handleImageSelection} /> </View> ); }; export default MyComponent; ``` 在上述示例代码中,我们首先导入了需要的React Native组件和react-native-image-crop-picker库。然后,在MyComponent组件中,我们使用useState来管理选择的图片,并在handleImageSelection函数中调用ImageCropPicker.openPicker方法来打开图片选择器并进行裁剪。最后,我们通过判断response对象的didCancel属性,来决定是否将裁剪后的图片路径设置到image状态中,并在界面上显示出来。 请注意,上述示例代码中的裁剪参数(宽度、高度和cropping属性)是可选的,你可以根据自己的需求进行调整。 希望这个示例能帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小童不学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值