反应中有没有实现截图插件

这篇文章给大家分享的是有关的反应中有没有实现截图插件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

反应中有实现截图插件,如反应截图组件“react-cropper”,该组件可以实现图片裁剪功能,其使用方法是:首先安装“react-cropper”,然后通过getCroppedCanvas等方法获取裁剪的图片即可。

<强>反应截图组件react-cropper的的使用方法

在使用反应开发中我们经常会遇到上传图片的情况,如果要使的上传的图片符合一定的规格,那么便要在客户端对上传的图片进行一定的裁剪,这个时候我么便可以使用到react-cropper这个图片裁剪组件,可以帮助我们轻松的实现图片裁剪功能。

使用步骤如下:

1,安装:

npm  install ——save-dev  react-cropper

2,使用方法如下:

import  React 得到& # 39;反应# 39; 　　import  Cropper 得到& # 39;react-cropper& # 39; 　　import  & # 39; cropperjs/dist/cropper.css& # 39; 　　import }{按钮,得到& # 39;antd& # 39; 　　export  default  class  Crop  extends  React.Component  { 　　,,,构造函数(),{ 　　,,,,,,,超级(); 　　,,,,,,,this.cropImage =, this.cropImage.bind(这个); 　　,,,} 　　,,,cropImage (), { 　　,,,,,,,if  (this.cropper.getCroppedCanvas(),===, & # 39;零# 39;),{ 　　,,,,,,,,,,,return 错误的 　　,,,,,,,} 　　,,,,,,,this.props.getCropData (this.cropper.getCroppedCanvas () .toDataURL ()) 　　,,,} 　　,,,渲染(),{ 　　,,,,,,,return  ( 　　,,,,,,,,,,,& lt; div> 　　,,,,,,,,,,,,,,,& lt; div 风格={{宽度:& # 39;100% & # 39;}}祝辞 　　,,,,,,,,,,,,,,,,,,,& lt;农作物 　　,,,,,,,,,,,,,,,,,,,,,,,src=https://www.yisu.com/zixun/{this.props.src} 　　ref={收割机=> { 　　这一点。收割机=收割机; 　　}} 　　风格={{高度:400,宽度:‘100%’}} 　　aspectRatio={246/346} 　　导游={假}/>