react-crop, 图像裁剪反应构件

分享于 

4分钟阅读

GitHub

  繁體 雙語
An image cropping react component
  • 源代码名称:react-crop
  • 源代码网址:http://www.github.com/instructure-react/react-crop
  • react-crop源代码文档
  • react-crop源代码下载
  • Git URL:
    git://www.github.com/instructure-react/react-crop.git
    Git Clone代码到本地:
    git clone http://www.github.com/instructure-react/react-crop
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/instructure-react/react-crop
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    #react-crop# 一个可以访问的图像退出,它的中图像是固定的,可以调整的可以拖动框表示剪裁图像

    例如使用docs文档 folder。 演示:http://instructure-react.github.io/react-crop/

    ###Basic usage###

    importReact, { Component } from'react';importCropperfrom'react-crop';import'react-crop/css';// You'll need to use async functionsimport"babel-core/register";import"babel-polyfill";exportdefaultclassMyComponentextendsComponent {
     constructor() {
     super();
     this.state= {
     image:null,
     previewImage:null };
     }
     onChange(evt) {
     this.setState({
     image:evt.target.files[0]
     })
     }
     asynccrop() {
     let image =awaitthis.refs.crop.cropImage()
     this.setState({
     previewUrl:window.URL.createObjectURL(image)
     })
     }
     clear() {
     this.refs.file.value=nullthis.setState({
     previewUrl:null,
     image:null })
     }
     imageLoaded(img) {
     if (img.naturalWidth&&img.naturalWidth<262&&img.naturalHeight&&img.naturalHeight<147) {
     this.crop()
     }
     }
     render() {
     return (
     <div><input ref='file' type='file' onChange={this.onChange} /> {
     this.state.image&&<div><Cropper
     ref='crop' image={this.state.image}
     width={100}
     height={80}
     onImageLoaded={this.imageLoaded}
     /><button onClick={this.crop}>Crop</button><button onClick={this.clear}>Clear</button></div> }
     {
     this.state.previewUrl&&<img src={this.state.previewUrl} /> }
     </div> );
     }
    }

    ###Props###

    #### width #### 这是你希望将图像裁剪成的宽度。 cropper的宽度将按尺寸调整。 这里支柱还有助于确定cropper可以使用的最小宽度。

    #### height #### 这是希望剪裁图像的所需高度。 cropper的高度将按尺寸调整。 这里支柱还有助于确定cropper可以使用的最小高度。 宽度和高宽比将在调整大小时保留。

    #### image #### 你想要裁剪的原始图像的blob

    #### widthLabel #### 用于键盘用户的宽度输入旁边的标签。 如果需要本地化文本,这一点尤其有用。 默认值为"宽度"。

    #### heightLabel #### 用于键盘用户的高度输入旁边的标签。 如果需要本地化文本,这一点尤其有用。 默认值为"高度"。

    #### offsetXLabel #### 用于键盘用户的偏移量X 输入旁边的标签。 如果需要本地化文本,这一点尤其有用。 默认值为"偏移x"。

    #### offsetYLabel #### 用于键盘用户的偏移量Y 输入旁边的标签。 如果需要本地化文本,这一点尤其有用。 默认值为"偏移y"。

    ###Running Example###

    • 克隆 repo
    • npm i
    • npm run docs
    • 访问 localhost:8080

    COM  图像  react  component  CROP  
    相关文章