React-Cropper实现图片裁剪

文章目录

React-Cropper实现图片裁剪
- 在使用时遇到的问题
- - 1.this.cropper.getCroppedCanvas is not a function
  - 2.加载需要裁剪图片问题
  - 3.传参问题
- 导入依赖和引用
- 组件常用属性详解

在使用时遇到的问题

1.this.cropper.getCroppedCanvas is not a function

根据官网信息

~~Support for ref has been removed.~~Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.

可知下面这种写法不在支持，会导致this.refs.cropper.getCroppedCanvas().toDataURL()中会出现this.cropper.getCroppedCanvas is not a function

<Croppersrc={this.state.cropSrc} // 图片路径，即是base64的值，在Upload上传的时候获取到的style={{ height: 400 }}preview='.cropper-preview'className='company-logo-cropper'viewMode={1} // 定义cropper的视图模式zoomable// 是否允许放大图像aspectRatio={1} // image的纵横比guides // 显示在裁剪框上方的虚线background // 是否显示背景的马赛克rotatable={false}ref='cropper'//在官方更新之后ref不在支持/>

应按照官网描述写为

 <Croppersrc={this.state.cropSrc} // 图片路径，即是base64的值，在Upload上传的时候获取到的style={{ height: 400 }}preview='.cropper-preview'className='company-logo-cropper'viewMode={1} // 定义cropper的视图模式zoomable// 是否允许放大图像aspectRatio={1} // image的纵横比guides // 显示在裁剪框上方的虚线background // 是否显示背景的马赛克rotatable={false}//ref='cropper'//在官方更新之后ref不在支持，应写为以下crop={this._crop.bind(this)}onInitialized={this.onCropperInit.bind(this)}/>
onCropperInit=cropper => { this.cropper = cropper }

2.加载需要裁剪图片问题

// 上传前操作beforeUpload =  file  => {console.log('123',  file ,  file [0].fileObj)let { fileObj } =  file [0]let reader = new FileReader()reader.readAsDataURL(fileObj)let _this = thisreader.onload =  e  => {_this.setState({    cropSrc:  e .target.result,
    cropVisible: true,})}return false}

beforeUpload是antd组件FileUpload的一个属性可以实现在上传图片之前进行操作

利用FileReader将file文件中图片base64格式传递给 Cropper的src中

3.传参问题

一般后台传参要求传一个文件，应写为

let imgName = `${new Date().getTime()}.png` //根据日期为裁剪后的文件重命名
//获取裁剪之后的图片
//base64格式
let file1 = this.cropper.getCroppedCanvas().toDataURL()
//BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。
this.cropper.getCroppedCanvas().toBlob(async blob => {// 创造提交表单数据对象let formData = new FormData()// 添加要上传的文件formData.append('file', blob, imgName)this.tpsc(formData)//根据自己实际接口进行传参
})

导入依赖和引用

npm install react-cropper 图片裁剪

import '../../../node_modules/cropperjs/dist/cropper.css'//引入样式（要对应自己的文件格式）
import Cropper from 'react-cropper' // 引入Cropper

组件常用属性详解

（详解原出处https://blog.csdn.net/jjyq2009/article/details/87229730）

经过整理(*代表常用)

属性	type	default默认值	释义
*viewMode - 视图模式	Number	0	定义裁剪器的视图模式，0：裁剪框可以在画布外展开，1，2，3将裁剪框限制为画布大小，2或3将画布限制到容器。
*dragMode - 拖动模式	String	‘crop’	定义裁剪器的拖动模式，options’crop’: 创建一个新的裁剪框 ‘move’,移动canvas ‘none’,什么也不做
*aspectRatio - 宽高比	Number	NaN	设置裁剪框的宽高比
*data - 初始化图片数据	Object	null	如果存储了以前的数据，将自动传递给setData方法。
*src	-	-	需要裁剪图片资源加载
*preview - 预览	String(jQuery selector)	‘’	为预览添加额外的元素（容器）。注意：最大宽度（高度）是预览容器的初始宽度（高度）。如果设置了aspectRatio选项，请确保以相同的宽高比设置预览容器。如果预览没有正确显示，请给预览容器设overflow:hidden
*responsive(实时响应)	Boolean	true	调整窗口大小时，重新渲染裁剪器。
restore	Boolean	true	调整窗口大小后，恢复裁剪区域。
checkCrossOrigin	Boolean	true	检查当前图像是否是跨源图像，如果是，当克隆图像时，将crossOrigin属性添加到克隆的图像元素中，并将时间戳添加到src属性以重新加载源图像以避免浏览器缓存错误。通过将crossQrigin属性添加到图像将停止向图像url添加时间戳，并停止重新加载图像。如果图像的crossOrigin属性值为"use-credentials",则在通过XMLHttpRequest读取图像数据时，withCredentials属性将会设置为true。
checkOrientation	Boolean	true	检查当前图像的Exif Orientation information 更准确的说，读取旋转或翻转图像的Orientation值，然后用1（default）覆盖Orientation值，以免在iOS设备上出现一些问题（#120， #509）需要同时设置ratatable（旋转）和scalable(缩放)为true 注意：不要总是相信这个，因为一些jpg图像有不正确的方向值。需要Typed Arrays support(IE10+)
*modal	Boolean	true	在图像的上方和裁剪框的下方显示黑色模态。
*guides	Boolean	true	显示裁剪框上的虚线
*center	Boolean	true	在裁剪框上显示中心指示器。
*highlight	Boolean	true	在裁剪框上显示白色模态（突出显示裁剪框）
*background	Boolean	true	显示容器的网格背景
*autoCrop	Boolean	true	在初始化时启用自动裁剪图像。
autoCropArea	Number	0.8（80%）	介于0和1之间的数字，定义自动裁剪区域的大小（百分比）
*movable	Boolean	true	启用移动图像
*ratotable(可旋转)	Boolean	true	启用旋转图像
*scalable(可缩放)	Boolean	true	Enable to scale the image
zoomable	Boolean	true	Enable to zoom the image
*zoomOnTouch	Boolean	true	启用通过拖动触摸缩放图像。
*zoomOnWheel	Boolean	true	启用通过鼠标滚轮缩放图像。
*wheelZoomRatio	Number	0.1	通过滚动滚轮缩放时的缩放倍率
*cropBoxMovable	Boolean	true	启用通过拖动来移动裁剪框。
*cropBoxResizable	Boolean	true	启用通过拖动来调整裁剪框的大小。
*toggleDragModeOnDblclick	Boolean	true	双击裁剪器，在 ‘crop-重新定义裁剪器’ 和 ‘move-移动裁剪器’ 模式下切换
minContainerWidth	Number	200	容器的最小宽度。
minContainerHeight	Number	100	容器的最小高度。
minCanvasWidth	Number	0	画布的最小宽度（img wrapper-图片外层的div）。
minCanvasHeight	Number	0	画布的最小高度（图像包装器）。
minCropBoxWidth	Number	0	画布的最小高度（图像包装器）。
minCropBoxHeight	Number	0	裁剪框的最小高度。注意：这个大小是相对于页面，而不是图像。
ready	function	null	A shortcut of the “ready” event.
cropstart	function	null	A shortcut of the “cropstart” event。
cropmove	function	null	A shortcut of the “cropmove” event.
cropend	function	null	A shortcut of the “cropend” event.
*crop	function	null	A shortcut of the “crop” event.
zoom	function	null	A shortcut of the “zoom” event.

React-Cropper实现图片裁剪相关推荐

利用cropper制作图片裁剪，且不失真
废话不多说,上代码; 先把css和js引入进来,如果是webpack项目可以自行npm下载 <link rel="stylesheet" type="text/cs ...
cropper（图片裁剪插件）
https://github.com/fengyuanchen/cropper cropper使用说明一.特性 jQuery v1.9.1以上版本支持插件有38个options,27种method ...
cropper.js图片裁剪的使用
1.安装 npm install cropperjs 2.在main.js引入cropper的css样式(一定要加,一定要加,一定要加) import 'cropperjs/dist/cropper. ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
vue 移动端头像裁剪_基于vue的移动端图片裁剪压缩处理
前端时间做Vue项目的时候,要用到图片压缩处理,网上查阅了资料后,发现并不能满足实际的业务需求:于是,自己结合网上的资料写了一个,有兴趣的小伙伴不妨试试~ 废话不多说,先上效果图,无图无真相嘛~ 效果 ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
Android第三方开源图片裁剪截取：cropper
Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...

React-Cropper实现图片裁剪

React-Cropper实现图片裁剪

文章目录

在使用时遇到的问题

1.this.cropper.getCroppedCanvas is not a function

2.加载需要裁剪图片问题

3.传参问题

导入依赖和引用

组件常用属性详解

React-Cropper实现图片裁剪相关推荐

最新文章

热门文章