React开源：一款轻量级的图片上传裁剪组件

   <h2>react-core-image-upload</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3f545d5b0ab859b74ba3590a6f057131.jpg"></p>    <p>一款轻量级的图片上传裁剪组件</p>    <p><a href="/misc/goto?guid=4959740830364188147" rel="nofollow,noindex">English Doc</a></p>    <h3>快速开始</h3>    <p>使用 npm</p>    <pre>  <code class="language-javascript">npm install react-core-image-upload --save</code></pre>    <p>使用 yarn</p>    <pre>  <code class="language-javascript">yarn add react-core-image-upload</code></pre>    <h3>使用ES6 进行开发</h3>    <pre>  <code class="language-javascript">import React from 'react';  import ReactCoreImageUpload  from 'react-core-image-upload';  let App = React.createClass({   //...      render() {      return(        <div>          <ReactCoreImageUpload             text="Upload Your Image"            class={['pure-button', 'pure-button-primary', 'js-btn-crop']}             inputOfFile="files"            url="./api/upload.php"            imageUploaded={this.handleRes}>          </ReactCoreImageUpload>        </div>      );    },      handleRes(res) {      this.setState({        // handle response      })    }  })</code></pre>    <h3>运行DEMO</h3>    <pre>  <code class="language-javascript">yarn run start</code></pre>    <p><a href="/misc/goto?guid=4959740830479105782" rel="nofollow,noindex">http://localhost:9000/webpack-dev-server/demo/index.html</a></p>    <p><a href="/misc/goto?guid=4959740830602946862" rel="nofollow,noindex">Demo Online</a></p>    <h3>配置属性</h3>    <table>     <thead>      <tr>       <th>Props</th>       <th>Type</th>       <th>Example</th>       <th>Description</th>      </tr>     </thead>     <tbody>      <tr>       <td>url</td>       <td>String</td>       <td>'/crop.php'</td>       <td>服务端上传的地址</td>      </tr>      <tr>       <td>text</td>       <td>String</td>       <td>'Upload Image'</td>       <td>你需要显示按钮的文本</td>      </tr>      <tr>       <td>inputOfFile</td>       <td>String</td>       <td>'file'</td>       <td>上传服务端对应表单 name</td>      </tr>      <tr>       <td>extensions</td>       <td>String</td>       <td>'png,jpg,gif'</td>       <td>限制的图片类型</td>      </tr>      <tr>       <td>crop</td>       <td>Boolean</td>       <td>true</td>       <td>是否需要裁剪</td>      </tr>      <tr>       <td>cropRatio</td>       <td>String</td>       <td>'1:1'</td>       <td>限制裁剪的形状</td>      </tr>      <tr>       <td>cropBtn</td>       <td>Object</td>       <td>{ok:'Save','cancel':'Give Up'}</td>       <td>按钮文本</td>      </tr>      <tr>       <td>maxFileSize</td>       <td>Number</td>       <td>10485760(10M)</td>       <td>文件大小限制</td>      </tr>      <tr>       <td>maxWidth</td>       <td>Number</td>       <td>150</td>       <td>限制裁剪图片的最大宽度</td>      </tr>      <tr>       <td>maxheight</td>       <td>Number</td>       <td>150</td>       <td>限制裁剪图片的最大高度</td>      </tr>      <tr>       <td>inputAccept</td>       <td>string</td>       <td>'image/*' / 'image/jpg,image/jpeg,image/png'</td>       <td>赋予上传file的接受类型</td>      </tr>      <tr>       <td>isXhr</td>       <td>Boolean</td>       <td>true</td>       <td>是否需要调用系统内自己的上传功能</td>      </tr>      <tr>       <td>headers</td>       <td>Object</td>       <td>{auth: xxxxx}</td>       <td>设置xhr上传 的header</td>      </tr>     </tbody>    </table>    <h3>image uploading callback</h3>    <ul>     <li>imageUploaded : 当图片上传成功后的响应处理</li>     <li>imageChanged : 当选择图片后</li>     <li>imageUploading 图片上传过程中</li>     <li>errorHandle 图片上传中的异常处理</li>    </ul>    <p><a href="/misc/goto?guid=4959740830602946862" rel="nofollow,noindex">Demo</a></p>    <p><a href="/misc/goto?guid=4959740830749895948" rel="nofollow,noindex">Demo Source</a></p>    <h3>发给服务端的裁剪参数</h3>    <p>If you crop a image , your crop will send a request to your server with some crop arguments;</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c9df8aa0052f9dbefa380fba8956b369.png"></p>    <p>参数如上图。</p>    <p>如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖</p>    <h3>MIT Liscense</h3>    <p> </p>