antd 官方提供的剪切组件

仅支持本地图片的剪切和上传

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState } from 'react';const App: React.FC = () => {const [fileList, setFileList] = useState<UploadFile[]>([{uid: '-1',name: 'image.png',status: 'done',url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',},]);const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {setFileList(newFileList);};const onPreview = async (file: UploadFile) => {let src = file.url as string;if (!src) {src = await new Promise((resolve) => {const reader = new FileReader();reader.readAsDataURL(file.originFileObj as RcFile);reader.onload = () => resolve(reader.result as string);});}const image = new Image();image.src = src;const imgWindow = window.open(src);imgWindow?.document.write(image.outerHTML);};return (<ImgCrop rotate><Uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76"listType="picture-card"fileList={fileList}onChange={onChange}onPreview={onPreview}>{fileList.length < 5 && '+ Upload'}</Upload></ImgCrop>);
};export default App;

Demo

demo地址: antd 官方提供的剪切组件

react-easy-corp

antd的剪切组件就是基于此依赖封装

import React, { useState, useCallback } from 'react';
import Cropper from 'react-easy-crop';const yourImage = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';const Demo = () => {const [crop, setCrop] = useState({ x: 0, y: 0 });const [zoom, setZoom] = useState(1);const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {console.log(croppedArea, croppedAreaPixels);}, []);return (<div style={{ position: 'relative', width: 300, height: 300 }}><Cropperimage={yourImage}crop={crop}zoom={zoom}aspect={4 / 3}onCropChange={setCrop}onCropComplete={onCropComplete}onZoomChange={setZoom}/></div>);
};export default Demo;

Demo

demo地址: react-easy-crop

react-easy-corp-showImg

基于react-easy-corp,增加了生成剪切后图片blob功能

import { Button, message } from 'antd';
import React, { useState, useEffect, useCallback } from 'react';
import Cropper from 'react-easy-crop';
import type { Area } from 'react-easy-crop/types';
import styles from './ReactEasyCropShowImg.less';
const yourImage = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
const PREFIX = 'tds';export interface ReactEasyCropShowImgProps extends React.HTMLAttributes<HTMLDivElement> {}const ReactEasyCropShowImg = (props: ReactEasyCropShowImgProps) => {const { className = '', ...otherProps } = props;const [crop, setCrop] = useState({ x: 0, y: 0 });const [zoom, setZoom] = useState(1);const [resultUrl, setResultUrl] = useState('');const [croppedAreaPixels, setCroppedAreaPixels] = useState({ x: 0, y: 0, width: 0, height: 0 });const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {console.log(croppedArea, croppedAreaPixels);setCroppedAreaPixels(croppedAreaPixels);}, []);useEffect(() => {const imgSource = document.querySelector(`.${PREFIX}-media`) as HTMLImageElement;imgSource.setAttribute('crossOrigin', 'Anonymous'); // 处理跨域imgSource.onload = () => {// 加载图像完成之后console.log('图片已添加允许跨域的属性');};}, []);const onOk = () => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;const { width: cropWidth, height: cropHeight, x: cropX, y: cropY } = croppedAreaPixels;const imgSource = document.querySelector(`.${PREFIX}-media`) as HTMLImageElement;canvas.width = cropWidth;canvas.height = cropHeight;// ctx.fillStyle = fillColor;ctx.fillRect(0, 0, cropWidth, cropHeight);ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);try {canvas.toBlob((blob) => {if (blob) {console.log('blob', blob);const blobUrl = window.URL.createObjectURL(blob);console.log('blobUrl', blobUrl);setResultUrl(blobUrl);}});} catch (error) {message.error('无法导出受污染的画布');console.log('无法导出受污染的画布', error);}};return (<div className={`${styles.root} ${className}`} {...otherProps}><h2>Crop 操作区</h2><div className={styles.cropBox}><Cropperimage={yourImage}showGrid={false}crop={crop}zoom={zoom}aspect={4 / 3}onCropChange={setCrop}onCropComplete={onCropComplete}onZoomChange={setZoom}classes={{containerClassName: `${PREFIX}-container`,mediaClassName: `${PREFIX}-media`,}}/></div><div style={{ marginTop: 12, marginBottom: 12 }}><Button onClick={onOk}>生成剪切结果</Button></div><h2>剪切结果</h2><img className={styles.resultImg} src={resultUrl}></img></div>);
};export default ReactEasyCropShowImg;

Demo

demo地址: react-easy-crop-showImg

react 图片剪切(react-easy-crop)相关推荐

react图片裁剪工具 - react-image-crop
react-image-crop react-image-crop 是react响应式图片裁剪的一个工具包,能做到裁剪区域,裁剪宽高比限制等等. npm地址:https://www.npmjs.com ...
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 ...
React图片懒加载
React图片懒加载话不多说了,创建一个LazyLoad.js的React组件,然后将下面的代码复制过去: import React from 'react' // import './lazylo ...
什么是React为什么使用React什么时候使用React
什么是React? (What is React?) React.js often referred to as React or ReactJS is a JavaScript library re ...
php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
[译] React 路由和 React 组件的爱恨情仇
原文地址:The Love-Hate Relationship between React Router and React Components 原文作者:Kasra 译文出自:掘金翻译计划本文永 ...
（React 框架）React技术
1.简介 React 是Facebook 开发并开源的前端框架当时他们的团队在市面上没找到合适的MVC 框架,就自己写一个 JS 框架,用来架设 instagram(图片分享社交网路),2013年开 ...
如何将React App转换为React Native
I have been working on a lot of mobile projects lately - including Cordova, PhoneGap, React Native, ...

react 图片剪切(react-easy-crop)

antd 官方提供的剪切组件

Demo

react-easy-corp

Demo

react-easy-corp-showImg

Demo

react 图片剪切(react-easy-crop)相关推荐

最新文章

热门文章