react图片剪裁react-cropper

react-cropper插件文档

先上效果图

import { Upload,  Button, Modal } from 'antd';
state:imgList: [], // 图片avatarModalVisible: false,avatarConfirmLoading: false,
render:const {imgList,avatarModalVisible,avatarConfirmLoading,} = this.state;<>{imgList.length !== 0 && (<Uploadaction=""listType="picture-card"fileList={imgList}onRemove={this.onRemove}/>)}{imgList.length < 9 && (<Button onClick={() => this.hanldeUpload()}>上传图片</Button>)}</><Modaltitle="设备图片"visible={avatarModalVisible}onOk={this.handleOk}onCancel={this.handleCancel}confirmLoading={avatarConfirmLoading}><div><Cropperstyle={{ width: 300, height: 200 }}orginStyle={{ width: 300, height: 200 }}hidePreviewhideInputhideRatioBtnhideTailorBtnaspectRatio={1 / 1}src=""handleTailor={cb => {this.handleTailor = cb;}}autoCropArea={0.95}ref={el => (this.cropperRef = el)}isUploadminContainerWidth={300}minContainerHeight={200}/></div></Modal>方法：// 弹窗取消handleCancel = () => {this.setState({avatarModalVisible: false,});};// 弹窗确定handleOk = e => {const file = base64ConvertFile(this.handleTailor(), createUuid());const uuid = createUuid();const params = {uuid,file,type: 1,};// 调用接口this.queryZuulDocrepoUploadPost(params);};// 图片上传queryZuulDocrepoUploadPost = params => {const fileDocDownloadPath = 'api/download?attachmentId=';const { imgList } = this.state;this.setState({avatarConfirmLoading: true,},async () => {const formData = new FormData();// 将得到的文件流添加到FormData对象formData.append('file', params.file);formData.append('uuid', params.uuid);formData.append('type', params.type);const res = await axios.post(`api/upload`, formData);this.setState({avatarConfirmLoading: false,imgList: [...imgList,{uid: params.uuid,name: res?.data?.data?.fjmc,// 文件名称url: fileDocDownloadPath + res?.data?.data?.bh, // 图片的src设置},],},() => {this.setState({avatarModalVisible: false,});});});};// 打开剪裁弹窗hanldeUpload = () => {this.setState({avatarModalVisible: true,});};// 删除图片onRemove = file => {let { imgList } = this.state;imgList = imgList.filter(item => item.uid !== file.uid);this.setState({imgList,});};base64ConvertFile = function(urlData, filename) {if (typeof urlData !== 'string') {// ("urlData不是字符串")return;}const arr = urlData.split(',');const type = arr[0].match(/:(.*?);/)[1];const fileExt = type.split('/')[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], `${filename}.${fileExt}`, {type,});
};

react图片剪裁react-cropper相关推荐

react 图片剪切(react-easy-crop)
antd 官方提供的剪切组件仅支持本地图片的剪切和上传 import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; imp ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
native react 图片多选_react-native实现的多图片选择器
react-native-syan-image-picker 功能介绍基于已有原生第三方框架封装的多图片选择组件,适用于 React Native App. 原生框架依赖功能特点支持 iOS.A ...
vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
react图片裁剪工具 - react-image-crop
react-image-crop react-image-crop 是react响应式图片裁剪的一个工具包,能做到裁剪区域,裁剪宽高比限制等等. npm地址:https://www.npmjs.com ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
React图片懒加载
React图片懒加载话不多说了,创建一个LazyLoad.js的React组件,然后将下面的代码复制过去: import React from 'react' // import './lazylo ...
IM4Java + GraphicsMagick 实现高清图片剪裁处理
2019独角兽企业重金招聘Python工程师标准>>> 简单介绍 GraphicsMagick是ImageMagick的一个分支,相对于ImageMagick而言,TA处理速度更快, ...

react图片剪裁react-cropper

react图片剪裁react-cropper相关推荐

最新文章

热门文章