├── LICENSE.txt
├── README.md
├── build
└── build.py
├── dist
├── css
│ ├── picedit.css
│ └── picedit.min.css
├── index.html
└── js
│ ├── picedit.js
│ └── picedit.min.js
└── src
├── css
├── font.css
├── font.v01.css
├── picedit.css
└── picediticons
│ ├── Read Me.txt
│ ├── demo-files
│ ├── demo.css
│ └── demo.js
│ ├── demo.html
│ ├── fonts
│ ├── picediticons.eot
│ ├── picediticons.svg
│ ├── picediticons.ttf
│ └── picediticons.woff
│ ├── selection.json
│ └── style.css
├── index.html
├── js
└── picedit.js
└── out.php
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Andy V.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | picEdit
2 | =======
3 |
4 | *This plugin is work in progress! Use with caution!*
5 |
6 | The plugin will turn your form's ```
10 |
11 |
12 | will change to something more user-friendly:
13 |
14 |
15 |
16 |
17 | **This plugin allows you to receive images from 3 different sources:**
18 |
19 | 1. You can search your computer for images by clicking on the image button in the center of the plugin, it will behave just like a regular file input field, you can also drag-and-drop your image on to the widget (work only in browsers that support drag and drop api)
20 | 2. You can use your computer/tablet web-camera to make a photo by clicking on the camera button in the center of the plugin (work only in browsers that support WebRTC)
21 | 3. You can copy and paste the image from the clipboard (work only in browsers that support clipboard api)
22 |
23 | The plugin allows to perform image rotations, cropping, resizing and pen tool.
24 | Once you're done with the image manipulations you can just upload the form as usual, the updated image will be uploaded along with the form as the a part of the form.
25 |
26 |
Note: Due to limitations of HTML5 Form API the form will be submitted with XMLHttpRequest/Ajax. The submission is handled by picEdit. If your form uses any js plugins or custom javascript this can create issues!
27 |
28 | See the demo here: https://andyvr.github.io/picEdit/
29 | ###Usage Example
30 |
31 | **Include jquery, the plugin js and css files**
32 |
33 | ```
34 |
35 |
36 |
37 | ```
38 |
39 | **Create a form in your html code with the file upload input box ex.:**
40 |
41 | ```
42 |
47 | ```
48 |
49 | **Bind the plugin to the file upload input box, that's it!**
50 |
51 | ```
52 |
57 | ```
58 |
59 |
60 | ###Available methods and options
61 |
62 | **defaultImage**
63 |
64 | _type: string, default: false_ - an image to be loaded in the editor by default ('path/to/image')
65 |
use only images located on the same server to prevent CORS issues
66 |
67 | **maxWidth**
68 |
69 | _type: int/auto, default: 400_ - max width for the picedit element (the original image will not be re-scaled if it's wider than maxWidth, this parameter controls image preview only)
70 |
71 | **maxHeight**
72 |
73 | _type: int/auto, default: auto_ - max height for the picedit element (same as with maxWidth parameter)
74 |
75 | **redirectUrl**
76 |
77 | _type: string/bool, default: false_ - the form redirect url. When defined it will redirect the user to the specified url after the form is submitted.
78 |
79 | **imageUpdated**
80 |
81 | _type: func_ - the callback function to be called when the image is updated/changed. Exposes the image object as the first parameter of the function.
82 | ```
83 | $('#image').picEdit({
84 | imageUpdated: function(img){
85 | alert('Image updated!');
86 | }
87 | });
88 | ```
89 |
90 | **formSubmitted**
91 |
92 | _type: func_ - the callback function to be called once the form is submitted to the server. Exposes the XMLHttpRequest response object as the first parameter of the function.
93 | ```
94 | $('#image').picEdit({
95 | formSubmitted: function(response){
96 | alert('Form submitted!');
97 | }
98 | });
99 | ```
100 |
101 |
102 |
15 | 
11 |
12 | will change to something more user-friendly:
13 | 
104 |