Giter VIP home page Giter VIP logo

react-core-image-upload's Introduction

react-core-image-upload

npm Node Version Build Status

A component for image to upload and crop

Install

Use Npm

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

Use yarn

yarn add react-core-image-upload

Code Example(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
    })
  }
})

Run demo

yarn run start

http://localhost:9000/webpack-dev-server/demo/index.html

Demo Online

Options

Props Type Example Description
url String '/crop.php' your server url
text String 'Upload Image' the text you want to show
inputOfFile String 'file' upload file form name
extensions String 'png,jpg,gif' limit the file type
crop Boolean true if need crop image
cropRatio String '1:1' limit the cropped image shape
cropBtn Object {ok:'Save','cancel':'Give Up'} the text of crop button
maxFileSize Number 10485760(10M) limit the file size
maxWidth Number 150 limit the width of your image you cropped
maxheight Number 150 limit the height of your image you cropped
inputAccept string 'image/*' / 'image/jpg,image/jpeg,image/png' the image file of accept type

Server Crop Arguments

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

  • toCropImgX: the distance of cropbox to the image left;
  • toCropImgY: the distance of cropbox to the image top
  • toCropImgW: the width of cropbox
  • toCropImgH: the height of cropbox
  • maxWidth: the maxium width of your target image
  • maxHeight: the maxium height of your target image If you want to change the crop window style , you should write your own css files.

MIT Liscense

react-core-image-upload's People

Contributors

jackpu avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.