react-core-image-upload

一款輕量級的圖片上傳裁剪元件

快速開始

使用 npm

npm install react-core-image-upload --save

使用 yarn

yarn add react-core-image-upload

使用ES6 進行開發

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
    })
  }
})

執行DEMO

yarn run start

配置屬性

image uploading callback

• imageUploaded : 當圖片上傳成功後的響應處理
• imageChanged : 當選擇圖片後
• imageUploading 圖片上傳過程中
• errorHandle 圖片上傳中的異常處理

Demo

發給服務端的裁剪引數

If you crop a image , your crop will send a request to your server with some crop arguments;

引數如上圖。

如果你需要自定義裁剪彈窗的的樣式，你可以自己寫css進行覆蓋

MIT Liscense