8 |
9 | 一款轻量级的图片上传裁剪组件
10 |
11 | [English Doc]('./README.md')
12 |
13 |
14 | ### 快速开始
15 | 使用 npm
16 | ```bash
17 | npm install react-core-image-upload --save
18 | ```
19 |
20 | 使用 yarn
21 | ``` bash
22 | yarn add react-core-image-upload
23 | ```
24 |
25 | ### 使用ES6 进行开发
26 | ``` js
27 | import React from 'react';
28 | import ReactCoreImageUpload from 'react-core-image-upload';
29 | let App = React.createClass({
30 | //...
31 |
32 | render() {
33 | return(
34 | 
102 |
103 | 参数如上图。
104 |
105 | 如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖
106 |
107 | ### MIT Liscense
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-core-image-upload
2 |
3 | []()
4 | 
5 | [](https://travis-ci.org/Vanthink-UED/react-core-image-upload)
6 |
7 | 
8 |
9 | A component for image to upload and crop
10 |
11 | [Document](http://vanthink-ued.github.io/react-core-image-upload/index.html#/en/home)
12 |
13 | [中文文档](http://vanthink-ued.github.io/react-core-image-upload/index.html#/cn/home)
14 |
15 |
16 | ### Install
17 | Use Npm
18 | ```bash
19 | npm install react-core-image-upload --save
20 | ```
21 |
22 | Use yarn
23 | ``` bash
24 | yarn add react-core-image-upload
25 | ```
26 |
27 | ### How to use
28 | ``` js
29 | import React from 'react';
30 | import ReactCoreImageUpload from 'react-core-image-upload';
31 | let App = React.createClass({
32 | //...
33 |
34 | render() {
35 | return(
36 | 
6 |
7 | a seed for a react app(yarn + webpack + react + react-router)
8 |
9 | ### Start
10 |
11 | ```bash
12 | git clone https://github.com/JackPu/yarn-react-webpack-seed
13 | yarn install
14 | ```
15 | [How to Use Yarn](https://yarnpkg.com/)
16 |
17 | Of course you can use `npm install`.It also works well.
18 |
19 | [Demo](http://events.jackpu.com/yarn-react-webpack-seed/#/start?_k=uyqxva)
20 |
21 | ### Contribute
22 |
23 | Please contribute to the project if you think this can be done better in anyway even for this project(😊😄💐)
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/__sites_/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
36 |
68 |
69 | );
70 | }
71 | }
72 |
73 | export default App;
74 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/compress-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnMultipleFile extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 | render() {
15 | return (
16 |
38 |
66 |
40 |
41 |
64 |
65 |
17 | {`
40 | `}
41 |
42 |
43 | );
44 | }
45 |
46 | imageUploded(res) {
47 | if (res.errcode === 0) {
48 | this.setState({
49 | src: res.data.src,
50 | });
51 | }
52 | }
53 |
54 | };
55 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/crop-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnCropImage extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
11 | cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
12 | cropArgs: {
13 | toCropImgH: '?',
14 | toCropImgW: '?',
15 | toCropImgX: '?',
16 | toCropImgY: '?',
17 | },
18 | };
19 | this.cropLocalImageUploaded = this.cropLocalImageUploaded.bind(this);
20 | this.crpoServerImageUploaded = this.crpoServerImageUploaded.bind(this);
21 | }
22 |
23 | render() {
24 | return (
25 | 压缩图片
18 |设置compress的数值，你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩，数据越大，图片的质量越差，且最大值不能大于100。
20 |
29 |
30 |
31 | 代码示例
32 |
26 | 
49 |
74 |
75 |
91 |
96 | );
97 | }
98 |
99 | cropLocalImageUploaded(res) {
100 | this.src = res.data.src;
101 | }
102 |
103 | crpoServerImageUploaded(res) {
104 | if (res.errcode === 0) {
105 | this.setState({
106 | cropArgs: {
107 | toCropImgH: parseInt(res.data.post.toCropImgH),
108 | toCropImgW: parseInt(res.data.post.toCropImgW),
109 | toCropImgX: parseInt(res.data.post.toCropImgX),
110 | toCropImgY: parseInt(res.data.post.toCropImgY)
111 | },
112 | cropSrc: 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png',
113 | });
114 |
115 | }
116 | }
117 |
118 | };
119 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/custom-component.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CustomComponent extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 | 裁剪图片
27 |你可以通过设置 crop，来实现图片的裁剪。你可以指定图片裁剪的宽高，以及它的最大宽度和高度这些参数。
设置 cropRatio来限制裁剪图片的形状，需要字符串的格式(1:1 或者2:3这种比例形式)，当然你可以设置为 auto 则不限制裁剪框的形状。
设置图片裁剪后，批量上传将不再生效。
30 |图片裁剪完有两种选择，选择本地裁剪local或者服务端裁剪 server。
本地裁剪
32 |你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。
33 |
34 |
44 |
45 |
46 |
35 | 
36 |
37 | 服务端裁剪
47 |服务端裁剪是指将原图片和裁剪的参数一起发给后端，方便服务端保存原图，以及对原图的其他操作，而服务端能够接收到post的参数如下:
48 |
49 | 每个字段具体说明如下:
50 |-
51 |
toCropImgX: 裁剪的区域距离图片的左边缘的距离
52 | toCropImgY: 裁剪的区域距离图片的上边缘的距离
53 | toCropImgW: 裁剪的区域的宽度
54 | toCropImgH: 裁剪的区域的高度
55 | maxWidth: 你期望裁剪的图片的最大宽度
56 | maxHeight: 你期望裁剪的图片的最大高度
57 |
裁剪区域的样式，你可以自行复写样式进行覆盖
59 |服务端裁剪DEMO
60 |上传图片后可以看到裁剪的参数
61 |
62 |
71 |
72 |
73 |
63 | 
64 |
65 | | H | 77 |W | 78 |X | 79 |Y | 80 |
|---|---|---|---|
| {this.state.cropArgs.toCropImgH} | 85 |{this.state.cropArgs.toCropImgW} | 86 |{this.state.cropArgs.toCropImgX} | 87 |{this.state.cropArgs.toCropImgY} | 88 |
Code Example
92 | 93 |设置resize="server"同理，会上传原图片，只是会在服务端的参数自动添加裁剪的比例 imgChangeRatio。
18 |
38 | {`
45 | 
46 | `}
47 |
48 |
49 | );
50 | }
51 |
52 | imageUploded(res) {
53 | if (res.errcode === 0) {
54 | this.setState({
55 | fileList: res.data,
56 | });
57 | }
58 | }
59 |
60 | };
61 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/events.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class Events extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10 | step: 0,
11 | };
12 | this.imagechanged = this.imagechanged.bind(this);
13 | this.imageuploading = this.imageuploading.bind(this);
14 | this.imageuploaded = this.imageuploaded.bind(this);
15 | }
16 |
17 | render() {
18 | return (
19 | 自定义组件样式
19 |你可以设置组件的class 以及自己编写子组件的形式来控制组件的显示的样子。
Demo
21 |下面是一个图片按钮。
22 |
23 |
24 |
26 |
33 |
34 |
35 |
36 |
34 | Code Example
37 |
46 |
20 |
68 | {`
77 | 完整代码
78 |
79 | );
80 | }
81 |
82 | imagechanged() {
83 | this.plus();
84 | }
85 |
86 | imageuploading() {
87 | this.plus();
88 | }
89 |
90 | imageuploaded() {
91 | this.plus();
92 | }
93 |
94 | plus() {
95 | this.setState({
96 | step: this.state.step += 1,
97 | });
98 | }
99 |
100 | }
101 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/get-started.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class GetStarted extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10 | };
11 | this.imageuploaded = this.imageuploaded.bind(this);
12 | }
13 |
14 | render() {
15 | return (
16 | 响应事件
21 |我们在上传的不同阶段指定了不同的派发事件，你可以绑定每个事件的响应方法，实现对于流程的控制。
22 |imageuploaded
23 |当图片上传完，会调用该事件绑定的函数，并且用户可以获取到服务端返回的数据。
24 |imagechanged
25 |当input框改变选择图片时候触发，会返回input的获取的图片数据
26 |imageuploading
27 |当图片上传过程中触发，你可以自定义你需要处理的内容比如显示加载动画等。
28 |errorhandle
29 |当图片上传发生错误的时候触发，会返回错误状态信息
30 |Code Example
31 |
32 | 
33 |
34 |
35 |
44 |
45 |
46 |
47 |
48 |
49 |
65 |
66 | | 图片选中 | 51 |图片上传 | 52 |图片完成 | 53 |
|---|---|---|
| 58 | 0 ? 'circle-bar active': 'circle-bar'}> 59 | | 60 |1 ? 'circle-bar active': 'circle-bar'}> | 61 |2 ? 'circle-bar active': 'circle-bar'}> | 62 |
上面的演示，表示了上传自定义事件的执行状况，参考代码如下：
67 |
17 |
22 | {`import React from 'react';
23 | import ReactCoreImageUpload from 'react-core-image-upload';
24 |
25 | export default class GetStarted extends React.Component {
26 | constructor(props) {
27 | super(props);
28 | this.state = {
29 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
30 | };
31 | this.imageuploaded = this.imageuploaded.bind(this);
32 | }
33 |
34 | redner() {
35 | return(
36 |
63 |
81 | );
82 | }
83 |
84 | imageuploaded(res) {
85 | if (res.errcode == 0) {
86 | this.setState({
87 | src: res.data.src,
88 | });
89 | }
90 | }
91 |
92 | };
93 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 |
4 | export default class CnHome extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | }
8 |
9 | render() {
10 | return (
11 | 快速开始
18 |使用 npm 安装依赖
19 |npm install react-core-image-upload --save安装完成后，编辑源码
21 |
37 |
50 | );
51 | }
52 |
53 | imageuploaded(res) {
54 | if (res.errcode == 0) {
55 | this.setState({
56 | src: res.data.src,
57 | });
58 | }
59 | }
60 | }`
61 | }
62 |
38 |
39 |
41 |
47 |
48 |
49 | Code Example
64 |
65 |
66 |
68 |
74 |
75 |
76 | 如果我们要使用上传插件，我们首先需要引入我们的组件然后并在components中声明。
77 | 实现上传，我们需要定义我们上传的服务器地址url，然后我们需要指定上传完成后触发的方法，也就是imageUploaded，这样我们才能获取上传完后的数据，从而进行下一步的操作。
78 |
12 |
21 | );
22 | }
23 |
24 | goToEnglishDoc() {
25 | vendor.setLocalData('lan', 'en');
26 | window.lan = 'en';
27 | location.href = './index.html#/en/home';
28 | location.reload();
29 | }
30 |
31 | };
32 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/multiple-file.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnMultipleFile extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | fileList: [],
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | const trs = [];
17 | console.log(this.state.fileList);
18 | for(let i = 0; i < this.state.fileList.length; i++) {
19 | const item = this.state.fileList[i];
20 |
21 | trs.push(
22 |
13 | 
14 |
16 | 快速开始 17 |
18 | 19 |react-core-image-upload 是一款轻量级的 react.js 上传插件，它可以支持的图片的上传，裁剪，压缩。它同样也支持在移动端的图片处理，它定义了诸多上传周期，你可以自由的进行流程控制。
20 |
31 |
48 |
49 |
58 | {`
68 | `}
69 |
70 | 查看完整源码
71 |
72 | );
73 | }
74 |
75 | imageUploded(res) {
76 | if (res.errcode === 0) {
77 | this.setState({
78 | fileList: res.data,
79 | });
80 | }
81 | }
82 |
83 | };
84 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/others.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class Others extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | }
7 |
8 | render() {
9 | return (
10 | 上传多个文件
32 |multiple
33 |你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是，你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。
multiple-size
35 |你可以使用multiple-size来限制图片的数量，你可以限制上传文件的数量。
演示
37 |
38 |
45 |
46 |
47 | | 文件名称 | 51 |文件大小 | 52 |
|---|
点击上传按钮，可以选择多张图片，然后在表格中可以看到上传的图片名称和图片大小。
59 |Code Example
60 |
11 | 
16 | 
18 |
19 | );
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/post-data.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class PostData extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | data: {
10 | text: ''
11 | },
12 | };
13 | this.change = this.change.bind(this);
14 | }
15 |
16 | render() {
17 | return (
18 | 其他与反馈
12 |你可以在 Github issue中搜索你遇见的问题，如果没有对应的情况，请直接提交你遇到的问题。
13 |如果你觉得问题比较复杂，难以描述，你可以直接联系我，我的邮箱是: kakashjack#gmail.com(# 替换成 @符号)
14 |微信:
15 |
16 | Facebook Messager:
17 |
18 |
19 |
42 | );
43 | }
44 |
45 | imageuploaded(res) {
46 | if (res.errcode == 0) {
47 | this.setState({
48 | src: res.data.src,
49 | });
50 | }
51 | }
52 |
53 | change(e) {
54 | var val = e.target.value;
55 | if (val) {
56 | this.setState({
57 | data: {
58 | text: val,
59 | }
60 | })
61 | }
62 | }
63 |
64 | };
65 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/props.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class Props extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | }
10 | render() {
11 | return (
12 | 向服务端发送数据
20 |你可以设置data 来将一些附带的数据发送给服务端。
21 | 当然你也可以将一些数据包含在 header 中传递过去，你只需要绑定到 header即可。
Exmaple:
23 |下面会将输入框的内容一并发送过去
24 |
25 |
26 |
27 |
34 |
35 |
36 | 27 |
上传的过程中我们可以打开devtool查看请求，可以看到发送数据中带上了一个新的 text 字段，也就是文本框内容。
37 |
Code Example
39 |你可以设置 isXhr 来取消向服务端上传。
13 | {
17 | `
23 | `
24 | }
25 |
145 | );
146 | }
147 |
148 | imageUploded(res) {
149 | if (res.errcode === 0) {
150 | this.setState({
151 | src: res.data.src,
152 | });
153 | }
154 | }
155 |
156 | };
157 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/cn/resize-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnResizeImage extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 | 基本属性
14 |Vue-core-image-upload 提供了很多可配置的选项，从而希望尽可能的满足开发者的需求。
15 |Code Example
16 |其中 className-file-size均是插件支持的属性，你可以具体查看这张表格:
26 |
27 |
28 |
29 |
129 |
130 | | 属性 | 31 |数据类型 | 32 |示例 | 33 |描述 | 34 |
|---|---|---|---|
| url | 39 |String | 40 |'/crop.php' | 41 |服务端上传的地址 | 42 |
| text | 45 |String | 46 |'Upload Image' | 47 |你需要显示按钮的文本 | 48 |
| inputOfFile | 51 |String | 52 |'file' | 53 |上传服务端对应表单 name | 54 |
| extensions | 57 |String | 58 |'png,jpg,gif' | 59 |限制的图片类型 | 60 |
| crop | 63 |Boolean | 64 |true | 65 |是否需要裁剪 | 66 |
| cropRatio | 69 |String | 70 |'1:1' | 71 |限制裁剪的形状(设置为auto表示不限制裁剪框形状) | 72 |
| cropBtn | 75 |Object | 76 |{"{ok:'Save','cancel':'Give Up'}"} | 77 |按钮文本 | 78 |
| maxFileSize | 81 |Number | 82 |10485760(10M) | 83 |文件大小限制 | 84 |
| maxWidth | 87 |Number | 88 |150 | 89 |限制图片的最大宽度 | 90 |
| maxheight | 93 |Number | 94 |150 | 95 |限制图片的最大高度 | 96 |
| inputAccept | 99 |string | 100 |'image/*' / 'image/jpg,image/jpeg,image/png' | 101 |赋予上传file的接受类型 | 102 |
| compress | 105 |Number | 106 |50 | 107 |设置本地图片压缩的质量 | 108 |
| isXhr | 111 |Boolean | 112 |true | 113 |是否需要调用系统内自己的上传功能 | 114 |
| headers | 117 |Object | 118 |{"{auth: xxxxx}"} | 119 |设置xhr上传 的header | 120 |
| data | 123 |Object | 124 |{"{name: xxxxx}"} | 125 |设置附带发送给服务端的数据 | 126 |
后文会对一些重要的属性进行详细的描述，以及一些其他 Demos 你可以参考左边的导航。
131 |url
132 |url 表示我们指定的服务端配置接口地址，插件会将文件使用 Ajax 的形式上传到到你指定的地址服务，然后你可以通过imageuploaded的回调取得服务器的响应的数据。
inputOfFile
134 |如果你的服务端端需要指定上传表单file name 的字段，你可以通过inputOfFile设置,只能是字符串如果没有设置，默认发给服务端的字段是files。如果你是使用多图片上传的话，字段会变成files[]。
extensions
136 |限制图片的上传类型，你可以传递一组CSV数据进去比如 'png,jpg,gif'，从而只允许png,jpg,gif的类型图片上传到服务器。
137 |maxFileSize
138 |虽然很多时候服务端限制了图片的大小，但是本地同样可以限制上传图片的大小，你可以设置 maxFileSize的值来实现，它的基本单位为字节比如(10485760B = 10M)。
inputAccept
140 |赋予上传file的接受类型,它可以帮助你再上传图片选择时，禁用掉不需要的文件，默认值为 image/jpg,image/jpeg,image/png
141 |isXhr
142 |我们同样接受取消掉默认的上传，你可以设置isXhr为 false ,自行处理我们获取到文件对象。
关于没有涉及到的属性，左边的导航会给出详细说明
144 |
18 |
38 | );
39 | }
40 |
41 | imageUploded(res) {
42 | if (res.errcode === 0) {
43 | this.setState({
44 | src: res.data.src,
45 | });
46 | }
47 | }
48 |
49 | };
50 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/compress-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnMultipleFile extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 | render() {
15 | return (
16 | 调整图片
19 |你可以设置 resize 来进行图片的缩放。
设置resize="local" 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。
22 |
31 |
32 |
33 |
23 |
24 |
25 | Code Example
34 | 35 |设置resize="server"同理，会上传原图片，只是会在服务端的参数自动添加裁剪的比例 imgChangeRatio。
17 | {`
41 | `}
42 |
43 |
44 | );
45 | }
46 |
47 | imageUploded(res) {
48 | if (res.errcode === 0) {
49 | this.setState({
50 | src: res.data.src,
51 | });
52 | }
53 | }
54 |
55 | };
56 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/crop-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnCropImage extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
11 | cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
12 | cropArgs: {
13 | toCropImgH: '?',
14 | toCropImgW: '?',
15 | toCropImgX: '?',
16 | toCropImgY: '?',
17 | },
18 | };
19 | this.cropLocalImageUploaded = this.cropLocalImageUploaded.bind(this);
20 | this.crpoServerImageUploaded = this.crpoServerImageUploaded.bind(this);
21 | }
22 |
23 | render() {
24 | return (
25 | Compress Image
18 |Props compress means the quality of the image you want to compress via browser
19 | and then send the compressed image to the server.
21 |
30 |
31 |
32 | 代码示例
33 |
26 | 
49 |
73 |
74 |
90 | {`
97 | `}
98 | View Code Source
99 |
100 | );
101 | }
102 |
103 | cropLocalImageUploaded(res) {
104 | this.src = res.data.src;
105 | }
106 |
107 | crpoServerImageUploaded(res) {
108 | if (res.errcode === 0) {
109 | this.setState({
110 | cropArgs: {
111 | toCropImgH: parseInt(res.data.post.toCropImgH),
112 | toCropImgW: parseInt(res.data.post.toCropImgW),
113 | toCropImgX: parseInt(res.data.post.toCropImgX),
114 | toCropImgY: parseInt(res.data.post.toCropImgY)
115 | },
116 | cropSrc: 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png',
117 | });
118 |
119 | }
120 | }
121 |
122 | };
123 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/custom-component.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CustomComponent extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 | Crop Image
27 |Set crop value to help you crop the image.
if you setted the crop props, you can not upload multiple files.
29 |cropRatio can be setted for diffrent crop shape.But it must be a string like '2:3' or '1:1'. If you set it to 'auto', users can crop any shape images.
You have two values to select，local crop:localorserver-side crop: server.
Local Crop
32 |crop="local" The Browser will crop the image via canvas API and send the cropped image to the server.
34 |
44 |
45 |
46 |
35 |
36 |
37 | Server-side crop
47 |crop="server" means the bwowser will send the original image to the server and post the cropped data below to the server:
49 | Each filed introduce:
50 |-
51 |
toCropImgX: The x-axis distance between the crop area and the image
52 | toCropImgY: The y-axis distance between the crop area and the image
53 | toCropImgW: The width of crop area
54 | toCropImgH: The height of crop area
55 | maxWidth: The maximum width of the crop image
56 | maxHeight: The maximum height of the crop image
57 |
Code example
59 |Click button to upload and you can view some post params.
60 |
61 |
70 |
71 |
72 |
62 | 
63 |
64 | | H | 76 |W | 77 |X | 78 |Y | 79 |
|---|---|---|---|
| {this.state.cropArgs.toCropImgH} | 84 |{this.state.cropArgs.toCropImgW} | 85 |{this.state.cropArgs.toCropImgX} | 86 |{this.state.cropArgs.toCropImgY} | 87 |
Code Example
91 |
18 |
38 | {`
45 |
46 | `}
47 |
48 |
49 | );
50 | }
51 |
52 | imageUploded(res) {
53 | if (res.errcode === 0) {
54 | this.setState({
55 | fileList: res.data,
56 | });
57 | }
58 | }
59 |
60 | };
61 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/events.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class Events extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10 | step: 0,
11 | };
12 | this.imagechanged = this.imagechanged.bind(this);
13 | this.imageuploading = this.imageuploading.bind(this);
14 | this.imageuploaded = this.imageuploaded.bind(this);
15 | }
16 |
17 | render() {
18 | return (
19 | Custom Component
19 |class will be bind to the component and you can include any child component.
Demo
21 |This is a image upload button.
22 |
23 |
24 |
26 |
33 |
34 |
35 |
36 |
34 | Code Example
37 |
46 |
20 |
68 | {`
77 | View Code
78 |
79 | );
80 | }
81 |
82 | imagechanged() {
83 | this.plus();
84 | }
85 |
86 | imageuploading() {
87 | this.plus();
88 | }
89 |
90 | imageuploaded() {
91 | this.plus();
92 | }
93 |
94 | plus() {
95 | this.setState({
96 | step: this.state.step += 1,
97 | });
98 | }
99 |
100 | }
101 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/get-started.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class GetStarted extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10 | };
11 | this.imageuploaded = this.imageuploaded.bind(this);
12 | }
13 |
14 | render() {
15 | return (
16 | Custom Events
21 |It defines different custom event in different upload progress. You can control the files flow via binding some functions.
22 |imageuploaded
23 |When image has been uploaded, it call the function you bind. You could recive response from server as an param
24 |imagechanged
25 |When input[file] velue has been changed, it call the function you bind. You could recive an file source param
26 |imageuploading
27 |When the image is uploading.
28 |errorhandle
29 |Whne you meet some error like network error or file size error.
30 |Code Example
31 |
32 |
33 |
34 |
35 |
44 |
45 |
46 |
47 |
48 |
49 |
65 |
66 | | Selected | 51 |Uplaoding | 52 |Finished | 53 |
|---|---|---|
| 58 | 0 ? 'circle-bar active': 'circle-bar'}> 59 | | 60 |1 ? 'circle-bar active': 'circle-bar'}> | 61 |2 ? 'circle-bar active': 'circle-bar'}> | 62 |
Code:
67 |
17 |
22 | {`
23 |
58 |
76 | );
77 | }
78 |
79 | imageuploaded(res) {
80 | if (res.errcode == 0) {
81 | this.src = res.data.src;
82 | }
83 | }
84 |
85 | };
86 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 |
4 | export default class EnHome extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | }
8 |
9 | render() {
10 | return (
11 | 快速开始
18 |使用 npm 安装依赖
19 |npm install vue-core-image-upload --save安装完成后，编辑源码
21 |
24 |
31 |
32 |
33 |
34 |
35 | `
56 | }
57 | Code Example
59 |
60 |
61 |
63 |
69 |
70 |
71 | 如果我们要使用上传插件，我们首先需要引入我们的组件然后并在components中声明。
72 | 实现上传，我们需要定义我们上传的服务器地址url，然后我们需要指定上传完成后触发的方法，也就是@imageuploaded，这样我们才能获取上传完后的数据，从而进行下一步的操作。
73 |
12 |
22 | );
23 | }
24 |
25 | goToChineseDoc() {
26 | vendor.setLocalData('lan', 'cn');
27 | window.lan = 'cn';
28 | location.href = './index.html#/cn/home';
29 | location.reload();
30 | }
31 |
32 |
33 | };
34 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/multiple-file.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnMultipleFile extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | fileList: [],
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | const trs = [];
17 | console.log(this.state.fileList);
18 | for(let i = 0; i < this.state.fileList.length; i++) {
19 | const item = this.state.fileList[i];
20 |
21 | trs.push(
22 |
13 |
14 |
16 | Get Started 17 |
18 | 19 |react-core-image-upload is a lightweight plugin for developers to upload and crop images. There is also a good experience on mobile devices. We has define different type events for developers and they can control the file flow and do more thing they want.
20 | 21 |
31 |
48 |
49 |
58 | {`
68 | `}
69 |
70 | 查看完整源码
71 |
72 | );
73 | }
74 |
75 | imageUploded(res) {
76 | if (res.errcode === 0) {
77 | this.setState({
78 | fileList: res.data,
79 | });
80 | }
81 | }
82 |
83 | };
84 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/others.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class Others extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | }
7 |
8 | render() {
9 | return (
10 | 上传多个文件
32 |multiple
33 |你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是，你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。
multiple-size
35 |你可以使用multiple-size来限制图片的数量，你可以限制上传文件的数量。
演示
37 |
38 |
45 |
46 |
47 | | 文件名称 | 51 |文件大小 | 52 |
|---|
点击上传按钮，可以选择多张图片，然后在表格中可以看到上传的图片名称和图片大小。
59 |Code Example
60 |
11 |
16 |
18 |
19 | );
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/post-data.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactCoreImageUpload from '../../../../../src/index';
3 | import Highlight from 'react-highlight';
4 |
5 | export default class PostData extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | data: {
10 | text: ''
11 | },
12 | };
13 | this.change = this.change.bind(this);
14 | }
15 |
16 | render() {
17 | return (
18 | Feedback
12 |You could find some solution from Github issue.
13 |If you need help when you meet some trouble, it is free to contac with me via email:kakashjack@gmail.com
14 |WeChat:
15 |
16 | Facebook Messager:
17 |
18 |
19 | {
40 | `
47 | `
48 | }
49 |
52 | );
53 | }
54 |
55 | imageuploaded(res) {
56 | if (res.errcode == 0) {
57 | this.setState({
58 | src: res.data.src,
59 | });
60 | }
61 | }
62 |
63 | change(e) {
64 | var val = e.target.value;
65 | if (val) {
66 | this.setState({
67 | data: {
68 | text: val,
69 | }
70 | })
71 | }
72 | }
73 |
74 | };
75 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/props.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class Props extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | }
10 | render() {
11 | return (
12 | Send Data to Server
20 |Setting data attribute will send some data you bind to the server via ajax.
21 | Of course you could pass data to server via header, just pass data to header.
Exmaple:
23 |You could type some text here and its text will be sended to the server when you upload your image.
24 |
25 |
26 |
27 |
34 |
35 |
36 | 27 |
We could open chrome devtool to view http status when uploading image. Below is the result after uploading image successfully.
37 |
Code Example
39 |Set isXhr equal false to cancel default ajax uploading.
13 | {
17 | `
23 | `
24 | }
25 |
143 | );
144 | }
145 |
146 | imageUploded(res) {
147 | if (res.errcode === 0) {
148 | this.setState({
149 | src: res.data.src,
150 | });
151 | }
152 | }
153 |
154 | };
155 |
--------------------------------------------------------------------------------
/__sites_/src/components/doc/en/resize-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../../../lib/vendor';
3 | import ReactCoreImageUpload from '../../../../../src/index';
4 | import Highlight from 'react-highlight.js';
5 |
6 | export default class CnResizeImage extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
11 | };
12 | this.imageUploded = this.imageUploded.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 | Props
14 |Vue-core-image-upload supports many props to meet developers needs.
15 |Code Example
16 |class, url and max-file-size are different props. And the table below simply introduces how it work.
27 |
28 |
29 |
129 |
130 | | Props | 31 |Data Type | 32 |Example | 33 |Details | 34 |
|---|---|---|---|
| url | 39 |String | 40 |'/crop.php' | 41 |Your server api | 42 |
| text | 45 |String | 46 |'Upload Image' | 47 |The text of your uploading button | 48 |
| inputOfFile | 51 |String | 52 |'file' | 53 |Yout input[file] name | 54 |
| extensions | 57 |String | 58 |'png,jpg,gif' | 59 |Limit the image type | 60 |
| crop | 63 |Boolean | 64 |'server' | 65 |Crop image option | 66 |
| cropRatio | 69 |String | 70 |'1:1' | 71 |The cropped image shape(set 'auto' not limit the crop shape) | 72 |
| cropBtn | 75 |Object | 76 |{"{ok:'Save','cancel':'Give Up'}"} | 77 |The Text of cropping button text | 78 |
| maxFileSize | 81 |Number | 82 |10485760(10M) | 83 |Limit the size of the file | 84 |
| maxWidth | 87 |Number | 88 |150 | 89 |The maximum width of cropped image | 90 |
| maxheight | 93 |Number | 94 |150 | 95 |限制图片的最大高度 | 96 |
| inputAccept | 99 |string | 100 |'image/*' / 'image/jpg,image/jpeg,image/png' | 101 |the input[file] accept | 102 |
| compress | 105 |Number | 106 |50 | 107 |Set the quality of compressed image | 108 |
| isXhr | 111 |Boolean | 112 |true | 113 |IF cancel ajax uploading | 114 |
| headers | 117 |Object | 118 |{"{auth: xxxxx}"} | 119 |Set customed header when ajax uploading | 120 |
| data | 123 |Object | 124 |{"{name: xxxxx}"} | 125 |Set customed data when ajax posting server | 126 |
url
131 |url means a http url that ajax will send，and you need bind a function on @imageuploaded to handle the server response
inputOfFile
133 |You can set input[file] name which the server must use via inputOfFile. The default value is files。
134 | If you upload multiple images the name will be files[]。
extensions
136 |If you want only one or two image types to upload to server, extensions is the right way when you pass an CSV string to it.
maxFileSize
138 |Even though the server would check the file size , you cloud also limit the file size locally for thrifting the traffic of network.
139 |isXhr
140 |Set isXhr equal false, the uploading will be canceld and you can do something by yourself.
The naviagtion will show other props documents and demos
142 |
18 |
38 | );
39 | }
40 |
41 | imageUploded(res) {
42 | if (res.errcode === 0) {
43 | this.setState({
44 | src: res.data.src,
45 | });
46 | }
47 | }
48 |
49 | };
50 |
--------------------------------------------------------------------------------
/__sites_/src/components/ft.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../lib/vendor'
3 |
4 | export default class Ft extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | const lan = vendor.getLocalData('lan') || 'cn';
8 | this.state = {
9 | lan,
10 | };
11 | this.changeCn = this.changeCn.bind(this);
12 | this.changeEn = this.changeEn.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 | Resize
19 |Set resize props to help you to resize the imagey you want to upload.
resize="local" means you can resize image in local browser via canvas and it will send server the resized image.
22 |
31 |
32 |
33 |
23 |
24 |
25 | Code Example
34 | 35 |resize="server" means it will send the original image you upload，and it will send the server with data params imgChangeRatio.
18 |
32 |
38 | );
39 | }
40 |
41 | changeCn() {
42 | vendor.setLocalData('lan', 'cn');
43 | location.href="./index.html#/cn/home";
44 | location.reload();
45 | }
46 |
47 | changeEn() {
48 | vendor.setLocalData('lan', 'en');
49 | location.href="./index.html#/en/home";
50 | location.reload();
51 | }
52 |
53 |
54 |
55 | };
56 |
--------------------------------------------------------------------------------
/__sites_/src/components/hd.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import vendor from '../lib/vendor';
3 |
4 | let language = vendor.getLocalData('data');
5 | if (!language) {
6 | language = {
7 | label: '🇨🇳 Chinese',
8 | value: 'cn'
9 | }
10 | } else {
11 | language = language['lan']
12 | }
13 |
14 | export default class Hd extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | this.state = {
18 | language,
19 | options: [
20 | {
21 | label: '🇨🇳 Chinese',
22 | value: 'cn',
23 | },
24 | {
25 | label: '🇺🇸 English',
26 | value: 'en',
27 | },
28 | ],
29 | };
30 | }
31 |
32 | render() {
33 | return (
34 |
52 | );
53 |
54 | }
55 |
56 | toggleMenu() {
57 | const $aside = document.querySelector('aside');
58 | if ($aside.className.indexOf('active') > -1) {
59 | $aside.className = '';
60 | } else {
61 | $aside.className = 'active';
62 | }
63 | }
64 |
65 | };
66 |
--------------------------------------------------------------------------------
/__sites_/src/components/nav-list.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { routers } from '../lib/constants';
3 | import vendor from '../lib/vendor';
4 |
5 | export default class NavList extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | const lan = vendor.getLocalData('lan') || 'cn';
9 | for (var item of routers) {
10 | item.url = '#/' + lan + '/' + item.url;
11 | if (lan !== 'en') {
12 | item.name = item.cn_name;
13 | }
14 | }
15 | this.state = {
16 | url: location.hash.replace(/\?.*/, ''),
17 | list: routers,
18 | };
19 | this.setUrl = this.setUrl.bind(this);
20 | }
21 |
22 | setUrl(e) {
23 | const url = /\#(.*)/.exec(e.target.href)[0];
24 | this.setState({
25 | url,
26 | });
27 | const $aside = document.querySelector('aside');
28 | if ($aside) {
29 | $aside.classList.remove('active');
30 | }
31 |
32 | }
33 |
34 | render() {
35 | const lis = [];
36 | for (let i = 0; i < this.state.list.length; i++) {
37 | const classname = this.state.list[i].url === this.state.url ? 'active' : '';
38 | const item = this.state.list[i];
39 | lis.push(
40 | 
21 | 
24 | 
27 | 
30 | All Rights Reserved By Vanthink-UED
33 |34 | 🇨🇳 Chinese 35 | 🇺🇸 English 36 |
37 |
38 |
121 | );
122 | }
123 |
124 | setImage(src, w, h) {
125 | this.setState({
126 | src,
127 | })
128 | if (this.props.ratio.indexOf(':') > 0) {
129 | this.ratioW = this.props.ratio.split(':')[0];
130 | this.ratioH = this.props.ratio.split(':')[1];
131 | this.ratioVal = this.ratioW / this.ratioH;
132 | } else {
133 | this.ratioW = 1;
134 | this.ratioH = 1;
135 | this.ratioVal = this.ratio;
136 | }
137 | this.natrualWidth = w;
138 | this.natrualHeight = h;
139 | this.setLayout(w, h);
140 | const resizeBar = this.refs.resizeBar;
141 | if (this.props.isResize) {
142 | resizeBar.setProgress(100);
143 | } else {
144 | resizeBar.setProgress(0);
145 | }
146 | return this.imgChangeRatio;
147 | }
148 |
149 | resizeImage(progress) {
150 | let w,
151 | h;
152 | if (this.props.isResize) {
153 | w = this.natrualWidth * this.imgChangeRatio * progress;
154 | h = this.natrualHeight * this.imgChangeRatio * progress;
155 | } else {
156 | w = this.initWidth + (progress * (this.natrualWidth - this.initWidth));
157 | h = this.initHeight + (progress * (this.natrualHeight - this.initHeight));
158 | }
159 | if (w <= this.props.minWidth || h < this.props.minHeight) {
160 | return;
161 | }
162 | this.setState({
163 | left: this.state.left + ((this.state.width - w) / 2),
164 | top: this.state.top + ((this.state.height - h) / 2),
165 | width: w,
166 | height: h,
167 | });
168 | this.imgChangeRatio = this.width / this.natrualWidth;
169 | }
170 |
171 | setLayout(w, h) {
172 | let H = areaHeight,
173 | W = areaWidth,
174 | width = w,
175 | height = h,
176 | marginLeft = 0,
177 | marginTop = 0;
178 | // caculate the image ratio
179 | let R = width / height;
180 | let Rs = W / H;
181 | if (R > Rs) {
182 | height = H;
183 | width = H * R;
184 | marginLeft = (W - (H * R)) / 2;
185 | } else {
186 | width = H * R,
187 | height = H;
188 | marginLeft = (W - (H * R)) / 2;
189 | }
190 | this._setStyle(width, height, marginLeft, marginTop, R, true);
191 | }
192 |
193 | _setStyle(w, h, ml, mt, r, isInit) {
194 | const $container = this.__find('.g-crop-image-principal');
195 | if(!isInit) {
196 | this.marginLeft = this.marginLeft + (this.width - w) / 2;
197 | this.marginTop = this.marginTop + (this.height - h) / 2;
198 | }
199 | $container.style.cssText = 'width:' + w + 'px;height:' + h + 'px;margin-left:'
200 | + ml + 'px;' + 'margin-top:' + mt + 'px';
201 | const cropCSS = this.setCropBox(w, h);
202 | let width;
203 | let height;
204 | if (this.props.isResize) {
205 | this.setState({
206 | width: w,
207 | height: h,
208 | });
209 | } else {
210 | if (r >= 1) {
211 | height = cropCSS.height;
212 | width = height * r;
213 | } else {
214 | width = cropCSS.width;
215 | height = width / r;
216 | }
217 | this.initWidth = width;
218 | this.initHeight = height;
219 | const left = (w - width) / 2;
220 | const top = (h - height) / 2;
221 | this.setState({
222 | width,
223 | height,
224 | left,
225 | top,
226 | });
227 | }
228 | this.imgChangeRatio = width / this.natrualWidth;
229 | }
230 |
231 | setCropBox(w, h, r) {
232 | if (this.props.isResize) {
233 | return;
234 | }
235 | let $selectCropBox = this.refs['cropbox'];
236 | let $wrap = this.refs['container'];
237 | let imageWidth = w,
238 | imageHeight = h,
239 | ratioW = this.ratioW,
240 | ratioH = this.ratioH;
241 | let cropWidth = imageWidth;
242 | if (areaWidth < w) {
243 | cropWidth = areaWidth;
244 | }
245 | const baseCropWidth = (cropWidth / 100) * CROPBOX_PERCENT;
246 | const CSSObj = {
247 | width: baseCropWidth,
248 | height: (baseCropWidth / ratioW) * ratioH,
249 | }
250 | CSSObj.left = (imageWidth - baseCropWidth) / 2;
251 | CSSObj.top = (imageHeight - CSSObj.height) / 2;
252 | $selectCropBox.style.cssText = helper.setCssText(CSSObj);
253 | if (CSSObj.height > imageHeight) {
254 | const baseCropHeight = (imageHeight / 100) * CROPBOX_PERCENT
255 | CSSObj.height = baseCropHeight;
256 | CSSObj.width = (CSSObj.height * ratioW) / ratioH;
257 | CSSObj.left = (imageWidth - CSSObj.width) / 2;
258 | CSSObj.top = (imageHeight - CSSObj.height) / 2;
259 | $selectCropBox.style.cssText = helper.setCssText(CSSObj);
260 | }
261 | this.setState({
262 | cropCSS: CSSObj,
263 | });
264 | return CSSObj;
265 | }
266 |
267 | getCropData() {
268 | // keep compatible with old api
269 | if (this.props.isResize) {
270 | return {
271 | imgChangeRatio: this.imgChangeRatio,
272 | toCropImgX: 0,
273 | toCropImgY: 0,
274 | toCropImgW: this.natrualWidth,
275 | toCropImgH: this.natrualHeight,
276 | };
277 | }
278 | return {
279 | toCropImgX: (this.state.cropCSS.left - this.state.left) / this.imgChangeRatio,
280 | toCropImgY: (this.state.cropCSS.top - this.state.top) / this.imgChangeRatio,
281 | toCropImgW: this.state.cropCSS.width / this.imgChangeRatio,
282 | toCropImgH: this.state.cropCSS.height / this.imgChangeRatio,
283 | };
284 | }
285 |
286 | getCropImage() {
287 | return this.refs['crop-image'];
288 | }
289 |
290 | __find(str) {
291 | let dq = this.refs['container'];
292 | return dq.querySelector(str);
293 | }
294 |
295 | resize(e) {
296 | e.stopPropagation();
297 | if (!this.props.ratio.indexOf(':')) {
298 | return;
299 | }
300 | let $el = e.target.parentElement;
301 | let $container = this.__find('.g-crop-image-principal');
302 | if (this._$container) {
303 | this._$container = container;
304 | }
305 | const self = this;
306 | const coor = {
307 | x: helper.isMobile ? e.touches[0].clientX : e.clientX,
308 | y: helper.isMobile ? e.touches[0].clientY : e.clientY,
309 | w: $el.offsetWidth,
310 | h: $el.offsetHeight,
311 | };
312 | this.el = $el;
313 | this.container = $container;
314 | const move = function (ev) {
315 | const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
316 | if (newCropStyle) {
317 | self.setState({
318 | cropCSS:{
319 | width: newCropStyle.width,
320 | height: newCropStyle.height,
321 | }
322 | });
323 | }
324 | };
325 | const end = function (ev) {
326 | this.el = null;
327 | if (helper.isMobile) {
328 | document.removeEventListener('touchmove', move, false);
329 | document.removeEventListener('touchend', end, false);
330 | }
331 | document.removeEventListener('mousemove', move, false);
332 | document.removeEventListener('mouseup', end, false);
333 | };
334 | if (helper.isMobile) {
335 | document.addEventListener('touchmove', move, false);
336 | document.addEventListener('touchend', end, false);
337 | }
338 | document.addEventListener('mousemove', move, false);
339 | document.addEventListener('mouseup', end, false);
340 | }
341 |
342 | drag(e) {
343 | e.preventDefault();
344 | const $el = this.__find('.image-wrap');
345 | this.el = $el;
346 | const $cropBox = this.__find('.crop-box');
347 | const $container = e.currentTarget;
348 | const self = this;
349 | const isMobile = helper.isMobile;
350 | const coor = {
351 | x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft,
352 | y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop,
353 | maxLeft: $cropBox.offsetLeft,
354 | maxTop: $cropBox.offsetTop,
355 | minLeft: ($cropBox.offsetWidth + $cropBox.offsetLeft) - $el.offsetWidth,
356 | minTop: ($cropBox.offsetHeight + $cropBox.offsetTop) - $el.offsetHeight,
357 | };
358 | const move = function (ev) {
359 | const newCropStyle = drag(ev, self.el, coor);
360 | if (newCropStyle) {
361 | self.setState({
362 | left: newCropStyle.left,
363 | top: newCropStyle.top,
364 | })
365 | }
366 | };
367 | const stopMove = function (ev) {
368 | self.el = null;
369 | if (isMobile) {
370 | document.removeEventListener('touchmove', move, false);
371 | document.removeEventListener('touchend', stopMove, false);
372 | return;
373 | }
374 | document.removeEventListener('mousemove', move, false);
375 | document.removeEventListener('mouseup', stopMove, false);
376 | };
377 | if (isMobile) {
378 | document.addEventListener('touchmove', move, false);
379 | document.addEventListener('touchend', stopMove, false);
380 | return;
381 | }
382 | document.addEventListener('mousemove', move, false);
383 | document.addEventListener('mouseup', stopMove, false);
384 | }
385 |
386 | }
387 |
388 | Crop.propTypes = {
389 | isResize: PropTypes.bool,
390 | minWidth: PropTypes.number,
391 | minHeight: PropTypes.number,
392 | ratio: PropTypes.string,
393 | };
394 |
395 | Crop.defaultProps = {
396 | isResize: false,
397 | minWidth: 50,
398 | minHeight: 50,
399 | ratio: '1:1',
400 | };
401 |
--------------------------------------------------------------------------------
/src/components/resize-bar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import helper from '../lib/helper';
4 | import drag from '../lib/drag';
5 |
6 | export default class ResizeBar extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | left: 0,
11 | };
12 | this.drag = this.drag.bind(this);
13 | }
14 |
15 | render() {
16 | return (
17 |
39 |
120 |
43 |
118 |
53 |
57 |
58 | {!this.props.isResize ?
59 |
60 |
97 | : null}
98 | { !this.props.isResize ?
99 |
68 |
69 |
77 |
78 |
86 |
87 |
95 |
96 |
108 |
109 |
110 |
114 |
115 |
116 | : ''}
117 |
18 |
31 | );
32 | }
33 |
34 | setProgress(num) {
35 | this.setState({
36 | left: num,
37 | })
38 | }
39 |
40 | drag(e) {
41 | const $el = e.target;
42 | this.el = $el;
43 | const $container = this.refs.container.parentElement;
44 | const self = this;
45 | const isMobile = helper.isMobile;
46 | const width = 200;
47 | const coor = {
48 | x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft,
49 | y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop,
50 | maxLeft: width,
51 | maxTop: parseInt($container.style.height) - parseInt($el.style.height),
52 | minLeft: 0,
53 | minTop: 0,
54 | };
55 | const move = function (ev) {
56 | const newCoor = drag(ev, self.el, coor);
57 | if (newCoor) {
58 | if((newCoor.left / width) < self.minProgress) {
59 | return;
60 | }
61 | self.progress = newCoor.left / width;
62 | self.setState({
63 | left: newCoor.left / width * 100,
64 | });
65 | self.props.resize(self.progress);
66 | }
67 | };
68 | const stopMove = function (ev) {
69 | self.el = null;
70 | if (isMobile) {
71 | document.removeEventListener('touchmove', move, false);
72 | document.removeEventListener('touchend', stopMove, false);
73 | return;
74 | }
75 | document.removeEventListener('mousemove', move, false);
76 | document.removeEventListener('mouseup', stopMove, false);
77 | };
78 | if (isMobile) {
79 | document.addEventListener('touchmove', move, false);
80 | document.addEventListener('touchend', stopMove, false);
81 | return;
82 | }
83 | document.addEventListener('mousemove', move, false);
84 | document.addEventListener('mouseup', stopMove, false);
85 | }
86 | };
87 | ResizeBar.PropTypes = {
88 | minProgress: PropTypes.minProgress,
89 | resize: PropTypes.function,
90 | };
91 | ResizeBar.defaultProps = {
92 | minProgress: 0,
93 | };
94 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactCoreImageUpload from './react-core-image-upload';
2 |
3 | module.exports = ReactCoreImageUpload;
4 |
--------------------------------------------------------------------------------
/src/lib/canvas-helper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * compress image
3 | * reference https://github.com/brunobar79/J-I-C
4 | **/
5 |
6 | export default {
7 | _getImageType(str) {
8 | let mimeType = 'image/jpeg';
9 | const outputType = str.match(/(image\/[\w]+)\.*/)[0];
10 | if (typeof outputType !== 'undefined'){
11 | mimeType = outputType;
12 | }
13 | return mimeType;
14 | },
15 |
16 | compress (src, quality, callback) {
17 | const reader = new FileReader();
18 | const self = this;
19 | reader.onload = function(event) {
20 | let image = new Image();
21 | image.src = event.target.result;
22 | image.onload = function() {
23 | const mimeType = self._getImageType(src.type);
24 | const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
25 | const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
26 | const newImageData = cvs.toDataURL(mimeType, quality/100);
27 | callback(newImageData);
28 | }
29 | };
30 | reader.readAsDataURL(src);
31 | },
32 | /**
33 | * crop image via canvas and generate data
34 | **/
35 | crop(image, options, callback) {
36 | const checkNumber = function(num) {
37 | return (typeof num === 'number');
38 | };
39 | // check crop options
40 | if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
41 | let w = options.toCropImgW;
42 | let h = options.toCropImgH;
43 | if(options.maxWidth && options.maxWidth < w) {
44 | w = options.maxWidth;
45 | h = options.toCropImgH * w / options.toCropImgW;
46 | }
47 | if (options.maxHeight && options.maxHeight < h) {
48 | h = options.maxHeight
49 | }
50 | const cvs = this._getCanvas(w, h);
51 | const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
52 | const mimeType = this._getImageType(image.src);
53 | const data = cvs.toDataURL(mimeType, options.compress/100);
54 | callback(data);
55 | }
56 | },
57 |
58 | resize(image, options, callback) {
59 | const checkNumber = function(num) {
60 | return (typeof num === 'number');
61 | };
62 | if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
63 | let w = options.toCropImgW * options.imgChangeRatio;
64 | let h = options.toCropImgH * options.imgChangeRatio;
65 | const cvs = this._getCanvas(w, h);
66 | const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
67 | const mimeType = this._getImageType(image.src);
68 | const data = cvs.toDataURL(mimeType, options.compress/100);
69 | callback(data);
70 | }
71 | },
72 |
73 | _loadImage(data, callback) {
74 | const image = new Image();
75 | image.src = data;
76 | image.onload = function () {
77 | callback(image);
78 | }
79 | image.onerror = function() {
80 | console.log('Error: image error!');
81 | }
82 | },
83 |
84 | _getCanvas(width, height) {
85 | const canvas = document.createElement('canvas');
86 | canvas.width = width;
87 | canvas.height = height;
88 | return canvas;
89 | },
90 |
91 | };
92 |
--------------------------------------------------------------------------------
/src/lib/drag.js:
--------------------------------------------------------------------------------
1 | import helper from './helper';
2 |
3 | const isMobile = helper.isMobile;
4 | export default function drag(e, el, coor) {
5 | if (!el) {
6 | return;
7 | }
8 | const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
9 | const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
10 |
11 | let left = currentX - coor.x;
12 | let top = currentY - coor.y;
13 | if (left <= coor.minLeft) {
14 | left = coor.minLeft;
15 | }
16 | if (left >= coor.maxLeft) {
17 | left = coor.maxLeft;
18 | }
19 | if (top <= coor.minTop) {
20 | top = coor.minTop;
21 | }
22 | if (top >= coor.maxTop) {
23 | top = coor.maxTop;
24 | }
25 | return {
26 | left,
27 | top
28 | };
29 | };
30 |
--------------------------------------------------------------------------------
/src/lib/error-code.js:
--------------------------------------------------------------------------------
1 | const SERVER_ERROR = 2500;
2 | const FILE_SIZE_ERROR = 2501;
3 | const FILE_FORMAT = 2502;
4 |
5 | export default {
6 | SERVER_ERROR,
7 | FILE_SIZE_ERROR,
8 | FILE_FORMAT,
9 | };
10 |
--------------------------------------------------------------------------------
/src/lib/helper.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
3 |
4 | setCssText: function(obj) {
5 | var cssArr = [];
6 | for(var key in obj) {
7 | var val = obj[key];
8 | if (typeof val === 'number') {
9 | val = '' + val + 'px';
10 | }
11 | cssArr.push(key + ': ' + val + ';');
12 | }
13 | return cssArr.join('');
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/src/lib/loading-gif.js:
--------------------------------------------------------------------------------
1 | const GIF_LOADING_SRC = 'data:image/gif;base64,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';
2 |
3 | export default GIF_LOADING_SRC;
4 |
--------------------------------------------------------------------------------
/src/lib/resize.js:
--------------------------------------------------------------------------------
1 | /** Reszie
2 | * @el dom
3 | * @container dom
4 | * @ratio string '1:1' like this
5 | * e events
6 | **/
7 | import helper from './helper';
8 |
9 | const isMobile = helper.isMobile;
10 | const W = document.body.offsetWidth;
11 | export default function resize(e, el, container, coor, ratio) {
12 | if (!el) {
13 | return ;
14 | }
15 | const H = document.body.offsetHeight;
16 | const ratioRemainder = 1 / ratio;
17 | const dotBoxW = parseInt(window.getComputedStyle(container).width);
18 | const dotBoxH = parseInt(window.getComputedStyle(container).height);
19 | const $topH = document.querySelector('.info-aside');
20 | const halfX = (W - dotBoxW) / 2;
21 | const topH = parseInt(window.getComputedStyle($topH).height);
22 | const halfY = (H - dotBoxH - topH)/2;
23 | const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
24 | const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
25 | const elOffsetWidth = parseInt(el.offsetWidth);
26 | const elOffsetHeight = parseInt(el.offsetHeight);
27 | const CSSObj = {};
28 | if (ratio >= 1 && resetX <= halfX + dotBoxW) {
29 | if (elOffsetWidth >= dotBoxW) {
30 | CSSObj.width = dotBoxW;
31 | }
32 | CSSObj.width = (coor.w + resetX - coor.x);
33 | CSSObj.height = elOffsetWidth * ratioRemainder;
34 | if (dotBoxW > dotBoxH) {
35 | if (elOffsetWidth > dotBoxH) {
36 | CSSObj.height = dotBoxH;
37 | CSSObj.width = dotBoxH * ratio;
38 | }
39 | } else if (dotBoxW < dotBoxH) {
40 | if (elOffsetWidth > dotBoxW) {
41 | CSSObj.width = dotBoxW;
42 | CSSObj.height = dotBoxW * ratioRemainder;
43 | }
44 | } else if (elOffsetWidth >= dotBoxW) {
45 | CSSObj.width = dotBoxW ;
46 | CSSObj.height = dotBoxW * ratioRemainder;
47 | }
48 | } else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
49 | CSSObj.height = (coor.h + resetY - coor.y);
50 | CSSObj.width = parseInt(el.style.height) * ratio;
51 | // 限制拖拉的范围在图片内
52 | if (dotBoxW > dotBoxH) {
53 | if (elOffsetHeight > dotBoxH) {
54 | CSSObj.height = dotBoxH;
55 | CSSObj.width = dotBoxH * ratio;
56 | }
57 | } else if (dotBoxW < dotBoxH) {
58 | if (elOffsetWidth > dotBoxW) {
59 | CSSObj.width = dotBoxW;
60 | CSSObj.height = dotBoxW * ratioRemainder;
61 | }
62 | } else if (elOffsetWidth > dotBoxW) {
63 | CSSObj.width = dotBoxW;
64 | CSSObj.height = dotBoxW * ratioRemainder;
65 | }
66 | } else if(ratio == 'auto' && resetY <= (halfY + dotBoxH + topH) && resetX <= halfY + dotBoxW) {
67 | CSSObj.height = (coor.h + resetY - coor.y);
68 | CSSObj.width = (coor.w + resetX - coor.x);
69 | } else if (resetX <= halfX + dotBoxW) {
70 | CSSObj.width = (coor.w + resetX - coor.x);
71 | CSSObj.height = el.style.width;
72 | // limit the crop box area
73 | if (dotBoxW > dotBoxH) {
74 | if (elOffsetHeight > dotBoxH) {
75 | CSSObj.height = dotBoxH;
76 | CSSObj.width = dotBoxH;
77 | }
78 | } else if (dotBoxW < dotBoxH) {
79 | if (elOffsetWidth > dotBoxW) {
80 | CSSObj.width = dotBoxW;
81 | CSSObj.height = dotBoxW;
82 | }
83 | } else if (elOffsetWidth > dotBoxW) {
84 | CSSObj.width = el.style.height = dotBoxW;
85 | }
86 | }
87 | return CSSObj;
88 | };
89 |
--------------------------------------------------------------------------------
/src/lib/xhr.js:
--------------------------------------------------------------------------------
1 | /**
2 | * simple ajax handler
3 | **/
4 |
5 | //ADD sendAsBinary compatibilty to older browsers
6 | if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
7 | XMLHttpRequest.prototype.sendAsBinary = function(string) {
8 | var bytes = Array.prototype.map.call(string, function(c) {
9 | return c.charCodeAt(0) & 0xff;
10 | });
11 | this.send(new Uint8Array(bytes).buffer);
12 | };
13 | }
14 |
15 | module.exports = function (method, url, headers, data, callback, err, isBinary) {
16 |
17 | var r = new XMLHttpRequest();
18 | var error = err || function () {
19 | console.error('AJAX ERROR!');
20 | };
21 | const boundary = 'webcodeimageupload';
22 | // Binary?
23 | let binary = false;
24 | if (method === 'blob') {
25 | binary = method;
26 | method = 'GET';
27 | }
28 | method = method.toUpperCase();
29 | // Xhr.responseType 'json' is not supported in any of the vendors yet.
30 | r.onload = function () {
31 | let json = r.response;
32 | try {
33 | json = JSON.parse(r.responseText);
34 | } catch (_e) {
35 | if (r.status === 401) {
36 | json = error('access_denied', r.statusText);
37 | }
38 | }
39 | let headers = headersToJSON(r.getAllResponseHeaders());
40 | headers.statusCode = r.status;
41 | callback(json || (method === 'GET' ? error('empty_response', 'Could not get resource') : {}), headers);
42 | };
43 | r.onerror = function () {
44 | let json = r.responseText;
45 | try {
46 | json = JSON.parse(r.responseText);
47 | } catch (_e) {
48 | console.error(_e);
49 | }
50 | callback(json || error('access_denied', 'Could not get resource'));
51 | };
52 | let x;
53 | // Should we add the query to the URL?
54 | if (method === 'GET' || method === 'DELETE') {
55 | data = null;
56 | } else if (isBinary) {
57 | const keyData = data;
58 | const code = data.base64Code.replace('data:' + data.type + ';base64,', '');
59 | data = ['--' + boundary, 'Content-Disposition: form-data; name="' + data.filed + '"; filename="' + data.filename + '"', 'Content-Type: ' + data.type, '', window.atob(code), ''].join('\r\n');
60 | const keyArr = Object.keys(keyData);
61 | if (keyArr.length > 4) {
62 | for (const k of keyArr) {
63 | if (['filed', 'filename', 'type', 'base64Code'].indexOf(k) == -1) {
64 | data += ['--' + boundary, 'Content-Disposition: form-data; name="' + k + '";', '', ''].join('\r\n');
65 | data += [typeof keyData[k] === 'object' ? JSON.stringify(keyData[k]) : encodeURI(keyData[k]), ''].join('\r\n');
66 | }
67 | }
68 | }
69 | data += '--' + boundary + '--';
70 | }
71 | // Open the path, async
72 | r.open(method, url, true);
73 | if (binary) {
74 | if ('responseType' in r) {
75 | r.responseType = binary;
76 | }
77 | else {
78 | r.overrideMimeType('text/plain; charset=x-user-defined');
79 | }
80 | }
81 | // Set any bespoke headers
82 | if (headers) {
83 | for (x in headers) {
84 | r.setRequestHeader(x, headers[x]);
85 | }
86 | }
87 | if (isBinary) {
88 | r.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
89 | return r.sendAsBinary(data);
90 | }
91 | r.withCredentials = true;
92 | r.send(data);
93 | return r;
94 | // Headers are returned as a string
95 | function headersToJSON(s) {
96 | var o = {};
97 | var reg = /([a-z\-]+):\s?(.*);?/gi;
98 | let m;
99 | while (m = reg.exec(s)) {
100 | o[m[1]] = m[2];
101 | }
102 | return o;
103 | }
104 | };
105 |
--------------------------------------------------------------------------------
/src/propTypes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export default {
4 | url: PropTypes.string,
5 | text: PropTypes.string,
6 | inputAccept: PropTypes.string,
7 | inputOfFile: PropTypes.string,
8 | cropBtn: PropTypes.object,
9 | cropRatio: PropTypes.string,
10 | resizeBtn: PropTypes.object,
11 | maxFileSize: PropTypes.number,
12 | maxWidth: PropTypes.number,
13 | maxHeight: PropTypes.number,
14 | minWidth: PropTypes.number,
15 | minHeight: PropTypes.number,
16 | data: PropTypes.object,
17 | header: PropTypes.object,
18 | multipleSize: PropTypes.number,
19 | compress: PropTypes.number,
20 | };
21 |
--------------------------------------------------------------------------------
/src/props.js:
--------------------------------------------------------------------------------
1 | // default props
2 | export default {
3 | url: '',
4 | text: 'upload',
5 | inputOfFile: 'files',
6 | crop: false,
7 | cropBtn: {
8 | ok: 'Save',
9 | cancel: 'Cancel',
10 | },
11 | extensions: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],
12 | cropRatio: '1:1',
13 | resize: false,
14 | resizeBtn: {
15 | ok: 'Save',
16 | cancel: 'Cancel',
17 | },
18 | inputAccept: 'image/jpg,image/jpeg,image/png',
19 | data: {},
20 | header: {},
21 | isXhr: true,
22 | multiple: false,
23 | compress: 0,
24 | imageUploaded: function(res) {
25 |
26 | },
27 | imageUploading: function(res) {
28 | console.info('uploading');
29 | },
30 | imageChanged: function() {
31 |
32 | },
33 | errorHandle: function(err) {
34 | console.error(err);
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/src/react-core-image-upload.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import xhr from 'core-image-xhr';
3 | import defaultProps from './props';
4 | import propTypes from './propTypes';
5 | import Crop from './components/crop';
6 | import errorCode from './lib/error-code';
7 | import canvasHelper from './lib/canvas-helper';
8 | require('style!css!./style.css');
9 |
10 | let overflowVal = '';
11 | class ReactCoreImageUpload extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | formID: 'g-core-upload-input-' + Math.floor(Math.random() * 10000),
16 | uploading: false,
17 | hasImage: false,
18 | image: {
19 | src: 'http://img1.vued.vanthink.cn/vuedcb0efb21e5f2ca013ca1480198bbf4b3.png',
20 | width: 0,
21 | height: 0,
22 | }
23 | };
24 | if (this.props.multiple) {
25 | this.name = this.props.inputOfFile + '[]';
26 | } else {
27 | this.name = this.props.inputOfFile;
28 | }
29 | this.change = this.change.bind(this);
30 | this.doCrop = this.doCrop.bind(this);
31 | this.doResize = this.doResize.bind(this);
32 | this.cancel = this.cancel.bind(this);
33 | }
34 |
35 | render() {
36 | return (
37 |
22 |
23 |
30 |
38 | {this.props.children ? this.props.children: this.props.text}
39 |
54 |
94 | );
95 | }
96 |
97 | __dispatch(name, res) {
98 | if (this.props[name] && typeof this.props[name] === 'function') {
99 | this.props[name].apply(this, Array.from(arguments).slice(1));
100 | }
101 | }
102 |
103 | __find(ele) {
104 | let dq = document.getElementById(this.state.formID);
105 | return dq.querySelector(ele);
106 | }
107 |
108 | change(e) {
109 | let fileVal = this.__find('input').value.replace(/C:\\fakepath\\/i, "");
110 | let fileExt = fileVal.substring(fileVal.lastIndexOf(".") + 1);
111 | const extensionsArr = this.props.extensions;
112 | if (extensionsArr.length > 1 ) {
113 | var reg = new RegExp('^[' + extensionsArr.join('|') + ']+$','i');
114 | if (!reg.test(fileExt)) {
115 | return this.__dispatch('errorHandle', errorCode['FILE_FORMAT']);
116 | }
117 | }
118 | if (e.target.files[0].size > this.props.maxFileSize) {
119 | var formatSize;
120 | if (parseInt(this.maxFileSize / 1024 / 1024) > 0) {
121 | formatSize = (this.maxFileSize / 1024 / 1024).toFixed(2) + 'MB';
122 | } else if (parseInt(this.maxFileSize / 1024) > 0) {
123 | formatSize = (this.maxFileSize / 1024).toFixed(2) + 'kB';
124 | } else {
125 | formatSize = options.maxFileSize.toFixed(2) + 'Byte';
126 | }
127 | this.__dispatch('errorHandle', errorCode['FILE_MAXSIZE'], 'FILE IS TOO LARGER THAN THE MAX VALUE ' + formatSize);
128 | return;
129 | }
130 |
131 | this.files = e.target.files;
132 | if(this.props.crop || this.props.resize) {
133 | this.__showImage();
134 | return;
135 | }
136 | this.__dispatch('imageChanged', this.files.length > 1 ? this.files : this.files[0]);
137 | if (this.props.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
138 | canvasHelper.compress(this.files[0], 100 - this.props.compress, (code) => {
139 | this.tryAjaxUpload('', true, code);
140 | });
141 | } else {
142 | this.tryAjaxUpload();
143 | }
144 | }
145 | __showImage() {
146 | this.setState({
147 | hasImage: true
148 | })
149 | this.__readFiles();
150 | }
151 | __readFiles() {
152 | let reader = new FileReader();
153 | let self = this;
154 | reader.onload = function(e) {
155 | let src = e.target.result;
156 | overflowVal = document.body.style.overflow;
157 | document.body.style.overflow = 'hidden';
158 | self.__initImage(src);
159 |
160 | }
161 | reader.readAsDataURL(this.files[0]);
162 | }
163 | __initImage(src) {
164 | let pic = new Image();
165 | let self = this;
166 | pic.src = src;
167 | const cropBox = this.cropbox;
168 | pic.onload= function() {
169 | self.setState({
170 | image:{
171 | src: src,
172 | width: pic.naturalWidth,
173 | height: pic.naturalHeight,
174 | }
175 | });
176 | self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
177 | }
178 | }
179 |
180 | resizeImage(progress) {
181 | const cropBox = this.$refs.cropBox;
182 | cropBox.resizeImage(progress);
183 | }
184 |
185 | doCrop(e) {
186 | this.__setData('crop');
187 | const cropBox = this.cropbox;
188 | const upload = this.__setUpload(e.target);
189 | if (this.props.crop === 'local') {
190 | const targetImage = cropBox.getCropImage();
191 | this.props.data.comprese = 100 - this.props.compress;
192 | return canvasHelper.crop(targetImage, this.props.data, (code) => {
193 | console.log(code);
194 | upload(code);
195 | })
196 | }
197 | upload();
198 | }
199 |
200 | doResize(e) {
201 | this.__setData('reszie');
202 | const cropBox = this.cropbox;
203 | const upload = this.__setUpload(e.target);
204 | if (this.props.resize === 'local') {
205 | const targetImage = cropBox.getCropImage();
206 | this.data.comprose = 100 - this.compress;
207 | return canvasHelper.resize(targetImage, this.data, (code) => {
208 | upload(code);
209 | })
210 | }
211 | upload();
212 | }
213 |
214 | __setData(type) {
215 | this.props.data["request"] = type;
216 | const cropBox = this.cropbox;
217 | const newCSSObj = cropBox.getCropData();
218 | for (const k of Object.keys(newCSSObj)) {
219 | this.props.data[k] = newCSSObj[k];
220 | }
221 | if (this.props.maxWidth) {
222 | this.props.data['maxWidth'] = this.maxWidth;
223 | }
224 | if (this.maxHeight) {
225 | this.props.data['maxHeight'] = this.maxHeight;
226 | }
227 | if (this.minWidth) {
228 | this.props.data['minWidth'] = this.minWidth;
229 | }
230 | }
231 | __setUpload(btn) {
232 | btn.value = btn.value + '...';
233 | btn.disabled = true;
234 | const upload = (code) => {
235 | this.tryAjaxUpload(() => {
236 | btn.value = btn.value.replace('...','');
237 | btn.disabled = false;
238 | }, code ? true: false, code);
239 | };
240 | return upload;
241 | }
242 |
243 | cancel() {
244 | this.setState({
245 | hasImage: false,
246 | })
247 | document.body.style.overflow = overflowVal;
248 | this.files = '';
249 | this.__find('input').value = '';
250 | }
251 | // use ajax upload IE10+
252 | tryAjaxUpload(callback, isBinary, base64Code) {
253 | const self = this;
254 | this. __dispatch('imageuploading',this.files[0]);
255 | const done = function(res) {
256 | if(typeof callback === 'function') {
257 | callback();
258 | }
259 | self.uploading = false;
260 | self.cancel();
261 | self.__dispatch('imageUploaded',res);
262 | };
263 | const errorUpload = function(err) {
264 | self.__dispatch('errorHandle', errorCode['SERVER_ERROR']);
265 | };
266 | if (!this.props.isXhr) {
267 | if(this.props.crop) {
268 | this.setState(
269 | hasImage: false,
270 | );
271 | }
272 | return typeof callback === 'function' && callback();
273 | }
274 | let data;
275 | if (isBinary) {
276 | data = {
277 | type: this.files[0]['type'],
278 | filename: this.files[0]['name'],
279 | filed: this.props.inputOfFile,
280 | base64Code: base64Code
281 | };
282 | if (typeof this.props.data === 'object') {
283 | data = Object.assign(this.props.data, data);
284 | }
285 | } else {
286 | data = new FormData();
287 | for (let i = 0;i < this.files.length; i++) {
288 | data.append(this.name, this.files[i]);
289 | }
290 | if (typeof this.props.data === 'object') {
291 | for(let k in this.props.data) {
292 | if(this.props.data[k] !== undefined) {
293 | data.append(k,this.props.data[k]);
294 | }
295 | }
296 | }
297 | }
298 | xhr('POST', this.props.url, this.props.headers, data, done, errorUpload, isBinary);
299 | }
300 | }
301 | ReactCoreImageUpload.propTypes = propTypes;
302 | ReactCoreImageUpload.defaultProps = defaultProps;
303 |
304 | export default ReactCoreImageUpload;
305 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | .g-core-image-upload-btn {
2 | position: relative;
3 | overflow: hidden;
4 | cursor: pointer;
5 | }
6 |
7 | .g-core-image-upload-form {
8 | position: absolute;
9 | left: 0;
10 | right: 0;
11 | top: 0;
12 | bottom: 0;
13 | opacity: 0;
14 | }
15 |
16 | .g-core-image-upload-container {
17 | position: absolute;
18 | background: #111;
19 | z-index: 900;
20 | }
21 |
22 | .g-core-image-upload-modal {
23 | position: absolute;
24 | left: 0;
25 | right: 0;
26 | width: 100%;
27 | height: 100%;
28 | border: 1px solid #ccc;
29 | z-index: 899;
30 | }
31 |
32 | .dropped {
33 | border: 4px solid #ea6153;
34 | }
35 |
36 | .g-core-image-corp-container {
37 | z-index: 1900;
38 | position: fixed;
39 | left: 0;
40 | right: 0;
41 | top: 0;
42 | bottom: 0;
43 | background: rgba(0, 0, 0, .9);
44 | color: #f1f1f1;
45 | }
46 |
47 | .g-core-image-corp-container .image-aside {
48 | overflow: hidden;
49 | position: absolute;
50 | right: 30px;
51 | left: 30px;
52 | top: 60px;
53 | bottom: 20px;
54 | text-align: center;
55 | }
56 |
57 | .g-core-image-corp-container .image-aside img {
58 | max-width: 100%;
59 | -webkit-touch-callout: none;
60 | -webkit-user-select: none;
61 | -khtml-user-select: none;
62 | -moz-user-select: none;
63 | -ms-user-select: none;
64 | user-select: none;
65 | }
66 |
67 | .g-core-image-corp-container .info-aside {
68 | position: absolute;
69 | left: 0;
70 | right: 0;
71 | top: 0;
72 | height: 40px;
73 | padding-left: 10px;
74 | padding-right: 10px;
75 | background: #fefefe;
76 | color: #777;
77 | }
78 |
79 | .g-core-image-corp-container .info-aside .image-corp-preview {
80 | position: relative;
81 | overflow: hidden;
82 | text-align: center;
83 | border: 2px solid #ccc;
84 | }
85 |
86 | .g-core-image-corp-container .info-aside .image-corp-preview.circled {
87 | border-radius: 160px;
88 | }
89 |
90 | .g-core-image-corp-container .info-aside .image-corp-preview img {
91 | width: 100%;
92 | }
93 |
94 |
95 | .g-core-image-corp-container .btn-groups {
96 | text-align: right;
97 | margin: 5px 0 0;
98 | }
99 |
100 | .g-core-image-corp-container .btn {
101 | display: inline-block;
102 | padding: 0 15px;
103 | height: 32px;
104 | margin-left: 15px;
105 | background: #fff;
106 | border: 1px solid #ccc;
107 | border-radius: 2px;
108 | font-size: 13px;
109 | color: #222;
110 | line-height: 32px;
111 | transition: all .1s ease-in;
112 | }
113 |
114 | .g-core-image-corp-container .btn:hover {
115 | border: 1px solid #777;
116 | box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
117 | }
118 |
119 | .g-core-image-corp-container .btn:active,
120 | {
121 | background: #ddd;
122 | }
123 |
124 | .g-core-image-corp-container .btn:disabled {
125 | background: #eee !important;
126 | border-color: #ccc;
127 | cursor: not-allowed;
128 | }
129 |
130 | .g-core-image-corp-container .btn-upload {
131 | background: #2d2d2d;
132 | border-color: #3d3d3d;
133 | color: #fff;
134 | }
135 |
136 | .g-core-image-corp-container .btn-upload:hover {
137 | background: #222;
138 | border-color: #222;
139 | box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
140 | }
141 |
142 | .g-core-image-corp-container .g-crop-image-box,
143 | .g-core-image-corp-container .g-crop-image-box .g-crop-image-principal {
144 | position: relative;
145 | }
146 |
147 | .g-crop-image-principal{
148 | overflow: hidden;
149 | background-color: #fff;
150 | background-image: -webkit-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),-webkit-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
151 | background-image: -moz-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),-moz-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
152 | background-image: -o-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),-o-linear-gradient(bottom left, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
153 | background-image: linear-gradient(to top right, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),linear-gradient(to top right, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
154 | background-position: 0 0,10px 10px;
155 | -webkit-background-size: 21px 21px;
156 | background-size: 21px 21px;
157 | }
158 | .image-aside{
159 | overflow: hidden;
160 | position: absolute;
161 | right: 30px;
162 | left:30px;
163 | top:70px;
164 | bottom:40px;
165 | text-align: center;
166 | }
167 | .image-aside .image-wrap{
168 | position: absolute;
169 | left: 0;
170 | top: 0;
171 | -webkit-touch-callout: none;
172 | -webkit-user-select: none;
173 | -khtml-user-select: none;
174 | -moz-user-select: none;
175 | -ms-user-select: none;
176 | user-select: none;
177 | box-shadow: 0 3px 5px -2px rgba(0,0,0,.25);
178 | background-size: cover;
179 | }
180 | .image-mask{
181 | position: absolute;
182 | left: 0;
183 | top: 0;
184 | width:100%;
185 | height: 100%;
186 | }
187 | .image-mask .mask {
188 | position: absolute;
189 | background-color: rgba(255,255,255,.6);
190 | }
191 | .crop-box{
192 | z-index: 2000;
193 | box-sizing: border-box;
194 | position: absolute;
195 | background: none;
196 | cursor: move;
197 | width:100px;
198 | height: 100px;
199 | border:1px solid rgba(255,255,255, .95);
200 | }
201 | .crop-box:after,
202 | .crop-box:before{
203 | content: '';
204 | display: block;
205 | opacity: 0;
206 | position: absolute;
207 | left: 33.3333%;
208 | top: 0;
209 | width: 33.334%;
210 | height: 100%;
211 | background-color: transparent;
212 | border-color: rgba(255,255,255,.7);
213 | border-style: solid;
214 | border-width: 0;
215 | }
216 | .crop-box:active::before,
217 | .crop-box:active::after{
218 | opacity: 1;
219 | }
220 | .crop-box:before{
221 | border-left-width: 1px;
222 | border-right-width: 1px;
223 | }
224 | .crop-box:after{
225 | top: 33.3333%;
226 | left: 0;
227 | height: 33.3334%;
228 | width: 100%;
229 | border-top-width: 1px;
230 | border-bottom-width: 1px;
231 | }
232 | .crop-box .g-resize{
233 | display: inline-block;
234 | z-index: 1910;
235 | position: absolute;
236 | bottom: -8px;
237 | right: -8px;
238 | width: 16px;
239 | height: 16px;
240 | cursor: se-resize;
241 | border-radius: 10px;
242 | background-color: #fff;
243 | box-shadow: 0 2px 4px -2px rgba(0,0,0,.25);
244 | }
245 |
246 | .g-resize-bar{
247 | position: absolute;
248 | bottom: 0px;
249 | margin: 17px auto;
250 | height: 6px;
251 | border-radius: 3px;
252 | width:200px;
253 | margin-left: -100px;
254 | left: 50%;
255 | background-color: #9cd6fd;
256 | box-shadow: 0 2px 3px -1px rgba(0,0,0,.3);
257 | }
258 | .g-resize-bar .g-resize-highlight{
259 | position: absolute;
260 | left: 0;
261 | top:0;
262 | height: 6px;
263 | background-color: #3498db;
264 | border-radius: 3px;
265 | }
266 | .g-resize-bar .circle-btn{
267 | display: block;
268 | position: absolute;
269 | left:0;
270 | top: -5px;
271 | width: 14px;
272 | height: 14px;
273 | margin-left: -7px;
274 | background-color: #fff;
275 | border-radius: 7px;
276 | box-shadow: 0 2px 3px -2px rgba(0,0,0,.6), 0 -2px 3px -2px rgba(0,0,0,.55);
277 | border-width: 0;
278 | }
279 |
--------------------------------------------------------------------------------
/tests/react-core-image-upload.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount, render } from 'enzyme';
3 | import ReactCoreImageUpload from '../src/react-core-image-upload';
4 |
5 | describe('ReactCoreImageUpload Component Tests', function () {
6 |
7 | it('has a form',function() {
8 | expect(shallow(
55 | this.cropbox = re}
57 | isResize={this.props.resize && !this.props.crop}
58 | ratio={this.props.ratio}>
59 |
60 |
93 |
61 | {this.props.crop ?
62 |
92 | 63 | 69 | 75 |
: null} 76 | {this.props.resize ? 77 |78 | 84 | 90 |
: null} 91 |