react-core-image-upload 一款轻量级图片上传裁剪插件

Lavender 发布于2019-08-21 11:31 / 2791人阅读

摘要：在不久前，我们把发布了。这次我们保持了完整的迁移到了上。支持了定义，支持了的自定义事件，更新了更加详细的文档。如果你需要自定义裁剪弹窗的的样式，你可以自己写进行覆盖

在不久前，我们把vue-core-image-upload 发布了2.0 。这次我们保持了完整的api迁移到了react上。支持了header 定义，支持了 file change 的自定义事件，更新了更加详细的文档。

react-core-image-upload 项目地址

Demo

快速开始

使用 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(
      
        
        
      
    );
  },
  
  handleRes(res) {
    this.setState({
      // handle response
    })
  }
})

运行DEMO

npm  run start

http://localhost:9000/demo/index.html

Demo Online

配置属性

Props	Type	Example	Description
url	String	"/crop.php"	服务端上传的地址
text	String	"Upload Image"	你需要显示按钮的文本
inputOfFile	String	"file"	上传服务端对应表单 name
extensions	String	"png,jpg,gif"	限制的图片类型
crop	Boolean	true	是否需要裁剪
cropRatio	String	"1:1"	限制裁剪的形状
cropBtn	Object	{ok:"Save","cancel":"Give Up"}	按钮文本
maxFileSize	Number	10485760(10M)	文件大小限制
maxWidth	Number	150	限制裁剪图片的最大宽度
maxheight	Number	150	限制裁剪图片的最大高度
inputAccept	string	"image/*" / "image/jpg,image/jpeg,image/png"	赋予上传file的接受类型
isXhr	Boolean	true	是否需要调用系统内自己的上传功能
headers	Object	{auth: xxxxx}	设置xhr上传的header

image uploading callback

imageUploaded: 当图片上传成功后的响应处理

imageChanged: 当选择图片后

imageUploading 图片上传过程中

errorHandle图片上传中的异常处理

Demo

Demo 代码

发给服务端的裁剪参数

你使用裁剪的话，会向服务端发送上面的参数如上图。

如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖

GPU云服务器云服务器上传图片插件 php js上传图片压缩插件图片裁剪图片裁剪比例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86811.html

JQuery 插件图片裁剪插件cropper.js使用,上传

摘要：图片裁剪，压缩是上传图片一定会遇到的问题。如何获得裁剪的图片呢获取裁剪后的图片信息首先我们可以获得裁剪框的节点然后调用图片质量图片质量越好图片大小越大这样就得到了你裁剪的图片了可以通过，放到你想要的节点里展示。图片裁剪，压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下，可以给新手做参考。引入插件相关文件,你们down到本地也可以。这...

SHERlocked93 2019-08-22 13:46 评论0 收藏0
15个提高编程技巧的JavaScript工具

摘要：官方网站是一组庞大的工具，几乎任何相关文件都可以处理。该工具是独立的，并配有类可处理服务器端的操作。官方网站是一个独立的延迟加载的图像工具。 JavaScript脚本库是一个预先用JavaScript语言写好的库，它方便了我们开发基于JavaScript的应用程序，特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页面的函数，从而实现...

LiangJ 2019-08-22 10:56 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0