├── .nojekyll
├── .eslintignore
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── index.js
    ├── main.js
    ├── examples
    │   ├── VueAvatarEditor.html
    │   ├── VueAvatarEditor.js
    │   ├── BasicVueAvatar.vue
    │   ├── VueAvatarEditor.vue
    │   ├── BasicVueAvatar.js
    │   └── BasicVueAvatar.html
    ├── App.vue
    └── components
    │   ├── VueAvatarEditor.vue
    │   └── VueAvatar.vue
├── .postcssrc.js
├── .gitignore
├── .babelrc
├── index.html
├── .eslintrc.js
├── LICENSE
├── package.json
└── README.md


/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueAvatar from './components/VueAvatar.vue';
2 | import VueAvatarEditor from './components/VueAvatarEditor.vue';
3 | export default VueAvatarEditor;
4 | 
5 | export { VueAvatar, VueAvatarEditor };


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App';
 3 | 
 4 | Vue.config.productionTip = false;
 5 | 
 6 | /* eslint-disable no-new */
 7 | new Vue({
 8 |     el: '#app',
 9 |     render: h => h(App)
10 | });
11 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/examples/VueAvatarEditor.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <vue-avatar-editor
 3 |     @finished="saveClicked"
 4 |     @select-file="onSelectFile($event)"
 5 |     :width=400
 6 |     :height=400
 7 |     >
 8 |   </vue-avatar-editor>
 9 |   <img ref="image">
10 | </div>
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log*
 4 | yarn-debug.log*
 5 | yarn-error.log*
 6 | 
 7 | # Editor directories and files
 8 | .idea
 9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 | 
14 | *~
15 | \#*\#
16 | /.emacs.desktop
17 | /.emacs.desktop.lock
18 | *.elc
19 | .\#*
20 | 
21 | dist/


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }]
 9 |   ],
10 |   "plugins": [],
11 |   "env": {
12 |     "test": {
13 |       "presets": ["env"],
14 |       "plugins": ["istanbul"]
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-avatar-editor</title>
 6 |     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/examples/VueAvatarEditor.js:
--------------------------------------------------------------------------------
 1 | import VueAvatarEditor from '@/components/VueAvatarEditor';
 2 | 
 3 | export default {
 4 |     components: {
 5 |         VueAvatarEditor
 6 |     },
 7 |     methods: {
 8 |         onSelectFile (files) {
 9 |             console.log('here is your file', files[0]);
10 |         },
11 |         saveClicked (img) {
12 |             this.$refs.image.src = img.toDataURL();
13 |         }
14 |     }
15 | };
16 | 


--------------------------------------------------------------------------------
/src/examples/BasicVueAvatar.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | let templateHTML = require('./BasicVueAvatar.html');
 3 | let templateJS = require('./BasicVueAvatar.js');
 4 | let templateRawJS = require('raw-loader!./BasicVueAvatar.js');
 5 | 
 6 | let jsDefault = templateJS.default;
 7 | jsDefault.template = templateHTML;
 8 | jsDefault.methods.getRawHTML = function () {
 9 |     return templateHTML;
10 | };
11 | jsDefault.methods.getRawJS = function () {
12 |     return templateRawJS;
13 | };
14 | 
15 | export default jsDefault;
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/examples/VueAvatarEditor.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | let templateHTML = require('./VueAvatarEditor.html');
 3 | let templateJS = require('./VueAvatarEditor.js');
 4 | let templateRawJS = require('raw-loader!./VueAvatarEditor.js');
 5 | 
 6 | let jsDefault = templateJS.default;
 7 | jsDefault.template = templateHTML;
 8 | jsDefault.methods.getRawHTML = function () {
 9 |     return templateHTML;
10 | };
11 | jsDefault.methods.getRawJS = function () {
12 |     return templateRawJS;
13 | };
14 | 
15 | export default jsDefault;
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/examples/BasicVueAvatar.js:
--------------------------------------------------------------------------------
 1 | import VueAvatar from '@/components/VueAvatar';
 2 | 
 3 | export default {
 4 |     components: {
 5 |         VueAvatar
 6 |     },
 7 |     data () {
 8 |         return {
 9 |             rotation: 0,
10 |             scale: 1,
11 |             borderRadius: 0
12 |         };
13 |     },
14 |     methods: {
15 |         saveClicked () {
16 |             var img = this.$refs.vueavatar.getImageScaled();
17 |             this.$refs.image.src = img.toDataURL();
18 |         },
19 |         onImageReady () {
20 |             this.scale = 1;
21 |             this.rotation = 0;
22 |         }
23 |     }
24 | };
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |     root: true,
 5 |     parser: 'babel-eslint',
 6 |     parserOptions: {
 7 |         sourceType: 'module'
 8 |     },
 9 |     env: {
10 |         browser: true,
11 |     },
12 |     // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
13 |     extends: 'standard',
14 |     // required to lint *.vue files
15 |     plugins: [
16 |         'html'
17 |     ],
18 |     // add your custom rules here
19 |     'rules': {
20 |         // allow paren-less arrow functions
21 |         'arrow-parens': 0,
22 |         // allow async-await
23 |         'generator-star-spacing': 0,
24 |         // allow debugger during development
25 |         'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
26 |         // use 4 spaces for tab indenting
27 |         "indent": ["error", 4],
28 |         // require semicolons
29 |         "semi": ["error", "always"]
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/examples/BasicVueAvatar.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <vue-avatar
 3 |     :width="400"
 4 |     :height="400"
 5 |     :rotation="rotation"
 6 |     :borderRadius="borderRadius"
 7 |     :scale="scale"
 8 |     ref="vueavatar"
 9 |     @vue-avatar-editor:image-ready="onImageReady"
10 |     >
11 |   </vue-avatar>
12 |   <br>
13 |   <label>
14 |     Zoom : {{scale}}x
15 |     <br>
16 |     <input
17 |       type="range"
18 |       min=1
19 |       max=3
20 |       step=0.02
21 |       v-model='scale'
22 |     />
23 |   </label>
24 |   <br>
25 |   <label>
26 |     Rotation : {{rotation}}°
27 |     <br>
28 |     <input
29 |       type="range"
30 |       min=0
31 |       max=360
32 |       step=1
33 |       v-model='rotation'
34 |     />
35 |   </label>
36 |   <br>
37 |   <label>
38 |     Radius : {{borderRadius}}px
39 |     <br>
40 |     <input
41 |       type="range"
42 |       min=0
43 |       max=200
44 |       step=1
45 |       v-model='borderRadius'
46 |     />
47 |   </label>
48 |   <br>
49 |   <button v-on:click="saveClicked">Get image</button>
50 |   <br>
51 |   <img ref="image">
52 | </div>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 two20
 4 | 
 5 | Copyright (c) 2017 islas27
 6 | 
 7 | Copyright (c) 2018 fpluquet
 8 | 
 9 | Permission is hereby granted, free of charge, to any person obtaining a copy
10 | of this software and associated documentation files (the "Software"), to deal
11 | in the Software without restriction, including without limitation the rights
12 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13 | copies of the Software, and to permit persons to whom the Software is
14 | furnished to do so, subject to the following conditions:
15 | 
16 | The above copyright notice and this permission notice shall be included in all
17 | copies or substantial portions of the Software.
18 | 
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25 | SOFTWARE.
26 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>Vue-Avatar-Editor Example</h1>
 4 |     <h2> With basic component : Vue-Avatar </h2>
 5 |     <basic-vue-avatar ref="basic"></basic-vue-avatar>
 6 |     HTML code
 7 |     <pre class="prettyprint">{{basic.html}}</pre>
 8 |     JS code
 9 |     <pre class="prettyprint">{{basic.js}}</pre>
10 | 
11 | 
12 |     <h2> With integrated component : Vue-Avatar-Editor </h2>
13 |     <vue-avatar-editor
14 |       ref="editor"
15 |       @select-file="onSelectFile($event, this.eventFile)"
16 |       >
17 |     </vue-avatar-editor>
18 |     HTML code
19 |     <pre class="prettyprint">{{editor.html}}</pre>
20 |     JS code
21 |     <pre class="prettyprint">{{editor.js}}</pre>
22 |     File attached
23 |     <pre class="prettyprint"> {{ eventFile }}</pre>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import BasicVueAvatar from './examples/BasicVueAvatar.vue';
29 | import VueAvatarEditor from './examples/VueAvatarEditor.vue';
30 | 
31 | export default {
32 |     name: 'app',
33 |     components: {
34 |         BasicVueAvatar,
35 |         VueAvatarEditor
36 |     },
37 |     data () {
38 |         return {
39 |             eventFile: {},
40 |             basic: {
41 |                 html: '',
42 |                 js: ''
43 |             },
44 |             editor: {
45 |                 html: '',
46 |                 js: ''
47 |             }
48 |         };
49 |     },
50 |     mounted () {
51 |         this.basic.html = this.$refs.basic.getRawHTML();
52 |         this.basic.js = this.$refs.basic.getRawJS();
53 |         this.editor.html = this.$refs.editor.getRawHTML();
54 |         this.editor.js = this.$refs.editor.getRawJS();
55 |     },
56 |     methods: {
57 |         saveClickedFromEditor (img) {
58 |             this.$refs.imageFromEditor.src = img.toDataURL();
59 |         }
60 |     }
61 | };
62 | </script>
63 | 
64 | <style>
65 |   #app {
66 |       font-family: 'Avenir', Helvetica, Arial, sans-serif;
67 |       -webkit-font-smoothing: antialiased;
68 |       -moz-osx-font-smoothing: grayscale;
69 |       text-align: center;
70 |       color: #2c3e50;
71 |       margin-top: 60px;
72 |   }
73 |   pre {
74 |     text-align: left;
75 |     margin: 0 auto;
76 |     max-width: 800px;
77 |   }
78 |   </style>
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-avatar-editor-improved",
 3 |   "version": "1.0.6",
 4 |   "description": "Resize, rotate and crop your uploaded image using a clear user interface",
 5 |   "author": "Pluquet Frédéric <fpluquet@yahoo.fr>",
 6 |   "homepage": "https://github.com/fpluquet/vue-avatar-editor",
 7 |   "main": "src/index.js",
 8 |   "scripts": {
 9 |     "dev": "node build/dev-server.js",
10 |     "start": "node build/dev-server.js",
11 |     "build": "node build/build.js",
12 |     "lint": "eslint --ext .js,.vue src"
13 |   },
14 |   "dependencies": {
15 |     "vue": "^2.6.14"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^6.7.2",
19 |     "babel-core": "^6.22.1",
20 |     "babel-eslint": "^7.1.1",
21 |     "babel-loader": "^6.2.10",
22 |     "babel-preset-env": "^1.3.2",
23 |     "babel-register": "^6.22.0",
24 |     "chalk": "^1.1.3",
25 |     "connect-history-api-fallback": "^1.6.0",
26 |     "copy-webpack-plugin": "^4.6.0",
27 |     "css-loader": "^0.28.0",
28 |     "eslint": "^4.2.0",
29 |     "eslint-config-standard": "^6.2.1",
30 |     "eslint-friendly-formatter": "^2.0.7",
31 |     "eslint-loader": "^1.7.1",
32 |     "eslint-plugin-html": "^3.1.0",
33 |     "eslint-plugin-promise": "^3.4.0",
34 |     "eslint-plugin-standard": "^2.0.1",
35 |     "eventsource-polyfill": "^0.9.6",
36 |     "express": "^4.17.1",
37 |     "extract-text-webpack-plugin": "^2.0.0",
38 |     "file-loader": "^0.11.1",
39 |     "friendly-errors-webpack-plugin": "^1.1.3",
40 |     "html-loader": "^0.5.5",
41 |     "html-webpack-plugin": "^2.28.0",
42 |     "http-proxy-middleware": "^0.17.3",
43 |     "opn": "^4.0.2",
44 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
45 |     "ora": "^1.2.0",
46 |     "raw-loader": "^0.5.1",
47 |     "rimraf": "^2.7.1",
48 |     "semver": "^5.7.1",
49 |     "shelljs": "^0.7.6",
50 |     "url-loader": "^1.1.2",
51 |     "vue-loader": "^12.1.0",
52 |     "vue-style-loader": "^3.0.1",
53 |     "vue-template-compiler": "^2.6.14",
54 |     "webpack": "^2.6.1",
55 |     "webpack-bundle-analyzer": "^3.9.0",
56 |     "webpack-dev-middleware": "^1.10.0",
57 |     "webpack-hot-middleware": "^2.25.0",
58 |     "webpack-merge": "^4.2.2"
59 |   },
60 |   "license": "MIT",
61 |   "engines": {
62 |     "node": ">= 4.0.0",
63 |     "npm": ">= 3.0.0"
64 |   },
65 |   "browserslist": [
66 |     "> 1%",
67 |     "last 2 versions",
68 |     "not ie <= 8"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/VueAvatarEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <vue-avatar
  4 |       :width='width'
  5 |       :height='height'
  6 |       :rotation="rotation"
  7 |       :borderRadius="borderRadius"
  8 |       :border='border'
  9 |       :color='color'
 10 |       :scale="scale"
 11 |       ref="vueavatar"
 12 |       @vue-avatar-editor:image-ready="onImageReady"
 13 |       @select-file="onSelectFile($event)"
 14 |       >
 15 |     </vue-avatar>
 16 |     <br>
 17 |     <label v-if="hasScale">
 18 |       Zoom : {{scale}}x
 19 |       <br>
 20 |       <input
 21 |         type="range"
 22 |         min=1
 23 |         max=3
 24 |         step=0.02
 25 |         v-model='scale'
 26 |       />
 27 |     </label>
 28 |     <br>
 29 |     <label v-if="hasRotation">
 30 |       Rotation : {{rotation}}°
 31 |       <br>
 32 |       <input
 33 |         type="range"
 34 |         min=0
 35 |         max=360
 36 |         step=1
 37 |         v-model='rotation'
 38 |       />
 39 |     </label>
 40 |     <br>
 41 |     <button @click="finished">{{ finishText }}</button>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import VueAvatar from './VueAvatar.vue';
 47 | 
 48 | export default {
 49 |     props: {
 50 |         finishText: {
 51 |             type: String,
 52 |             default: 'Save'
 53 |         },
 54 |         hasRotation: {
 55 |             type: Boolean,
 56 |             default: true
 57 |         },
 58 |         hasScale: {
 59 |             type: Boolean,
 60 |             default: true
 61 |         },
 62 |         image: {
 63 |             type: String,
 64 |             default: ''
 65 |         },
 66 |         border: {
 67 |             type: Number,
 68 |             default: 25
 69 |         },
 70 |         borderRadius: {
 71 |             type: Number,
 72 |             default: 0
 73 |         },
 74 |         width: {
 75 |             type: Number,
 76 |             default: 200
 77 |         },
 78 |         height: {
 79 |             type: Number,
 80 |             default: 200
 81 |         },
 82 |         color: {
 83 |             type: Array,
 84 |             default: () => [0, 0, 0, 0.5]
 85 |         }
 86 |     },
 87 |     data () {
 88 |         return {
 89 |             rotation: 0,
 90 |             scale: 1
 91 |         };
 92 |     },
 93 |     components: {
 94 |         VueAvatar
 95 |     },
 96 |     methods: {
 97 |         onSelectFile (files) {
 98 |             this.$emit('select-file', files);
 99 |         },
100 |         onImageReady () {
101 |             this.scale = 1;
102 |             this.rotation = 0;
103 |         },
104 |         finished () {
105 |             return this.$emit('finished', this.$refs.vueavatar.getImageScaled());
106 |         }
107 |     }
108 | };
109 | 
110 | </script>
111 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-avatar-editor
  2 | 
  3 | Facebook like, avatar / profile picture component. This is Vue.js clone of <a href="https://github.com/mosch/react-avatar-editor">mosch/react-avatar-editor</a>
  4 | 
  5 | Resize, rotate and crop your uploaded image using a clear user interface.
  6 | 
  7 | Demo at <a href="https://fpluquet.github.io/vue-avatar-editor/">https://fpluquet.github.io/vue-avatar-editor/</a>
  8 | 
  9 | # Installation
 10 | 
 11 | This is a [Node.js](https://nodejs.org/en/) module available through the
 12 | [npm registry](https://www.npmjs.com/).
 13 | 
 14 | Before installing, [download and install Node.js](https://nodejs.org/en/download/).
 15 | Node.js 0.10 or higher is required.
 16 | 
 17 | Installation is done using the
 18 | [`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
 19 | 
 20 | ```bash
 21 | $ npm install vue-avatar-editor-improved
 22 | ```
 23 | 
 24 | # Usage
 25 | 
 26 | ```html
 27 | <div id="app">
 28 |       <vue-avatar
 29 |       :width=400
 30 |       :height=400
 31 |       :rotation="rotation"
 32 |       :scale="scale"
 33 |       ref="vueavatar"
 34 |       @vue-avatar-editor:image-ready="onImageReady"
 35 |       >
 36 |     </vue-avatar>
 37 |     <br>
 38 |     <input
 39 |       type="range"
 40 |       min=1
 41 |       max=3
 42 |       step=0.02
 43 |       :value='scale'
 44 |     />
 45 |     <input
 46 |       type="range"
 47 |       min=1
 48 |       max=3
 49 |       step=0.02
 50 |       :value='rotation'
 51 |     />
 52 |     <br>
 53 |     <button v-on:click="saveClicked">Click</button>
 54 |     <br>
 55 |     <img ref="image">
 56 | </div>
 57 | ```
 58 | 
 59 | ```javascript
 60 | import Vue from 'vue'
 61 | import {VueAvatar} from 'vue-avatar-editor-improved'
 62 | 
 63 | let vm = new Vue({
 64 |   el: '#app',
 65 |   components: {
 66 |     VueAvatar,
 67 |     VueAvatarScale
 68 |   },
 69 |   data () {
 70 |       return {
 71 |           rotation: 0,
 72 |           scale: 1
 73 |       };
 74 |   },
 75 |   methods: {
 76 |       saveClicked () {
 77 |           var img = this.$refs.vueavatar.getImageScaled()
 78 |           this.$refs.image.src = img.toDataURL()
 79 |       },
 80 |       onImageReady () {
 81 |           this.scale = 1
 82 |           this.rotation = 0
 83 |       }
 84 |   }
 85 | })
 86 | ```
 87 | 
 88 | ## Props
 89 | | Prop                   | Type     | Description
 90 | | ---------------------- | -------- | ---------------
 91 | | width                  | Number   | The total width of the editor
 92 | | height                 | Number   | The total width of the editor
 93 | | border                 | Number   | The cropping border. Image will be visible through the border, but cut off in the resulting image.
 94 | | color                  | Number[] | The color of the cropping border, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)]
 95 | | style                  | Object   | Styles for the canvas element
 96 | | scale                  | Number   | The scale of the image. You can use this to add your own resizing slider.
 97 | | rotation               | Number   | The rotation in degrees of the image. You can use this to add your own rotating slider.
 98 | | accept                 | String   | Types of accepted files (accept props in file input). Default `image/*`. Exemplary other value `image/png, image/jpeg`.
 99 | | placeholderSvg         | String   | Content of svg file for placeholder image
100 | 
101 | ## Accessing the resulting image
102 | 
103 | ```javascript
104 | this.$refs.vueavatar.getImage()
105 | ```
106 | 
107 | 
108 | The resulting image will have the same resolution as the original image, regardless of the editor's size.
109 | If you want the image sized in the dimensions of the canvas you can use `getImageScaled`.
110 | 
111 | 
112 | ```javascript
113 | this.$refs.vueavatar.getImageScaled()
114 | ```
115 | 
116 | 
117 | # Contributing
118 | 
119 | For development you can use following build tools:
120 | 
121 | * `npm run build`: Builds the *minified* dist file: `dist/index.js`
122 | * `npm run dev`: Watches for file changes and builds *unminified* into: `dist/index.js`
123 | localhost:8080)
124 | 


--------------------------------------------------------------------------------
/src/components/VueAvatar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <canvas
  4 |       :width="canvasWidth"
  5 |       :height="canvasHeight"
  6 |       class="cursorPointer"
  7 |       id="avatarEditorCanvas"
  8 |       ref="avatarEditorCanvas"
  9 |       @dragover.prevent
 10 |       @drop="onDrop"
 11 |       @mousedown="onDragStart"
 12 |       @touchstart="onDragStart"
 13 |       @click="clicked">
 14 |     </canvas>
 15 |     <input
 16 |       type="file"
 17 |       ref="input"
 18 |       :accept="accept"
 19 |       @change="fileSelected"
 20 |       style="display:none;"
 21 |       />
 22 |   </div>
 23 | </template>
 24 | 
 25 | <style type="text/css">
 26 | .cursorPointer{
 27 |     cursor: pointer;
 28 | }
 29 | 
 30 | .cursorGrab{
 31 |     cursor: grab;
 32 |     cursor: -webkit-grab;
 33 |     cursor: -moz-grab;
 34 | }
 35 | 
 36 | .cursorGrabbing{
 37 |     cursor: grabbing;
 38 |     cursor: -webkit-grabbing;
 39 |     cursor: -moz-grabbing;
 40 | }
 41 | </style>
 42 | 
 43 | <script>
 44 | export default {
 45 |     props: {
 46 |         image: {
 47 |             type: String,
 48 |             default: ''
 49 |         },
 50 |         accept: {
 51 |             type: String,
 52 |             default: 'image/*'
 53 |         },
 54 |         placeholderSvg: {
 55 |             type: String,
 56 |             default: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65"><defs><style>.cls-1{fill:#000;}</style></defs><title>Upload_Upload</title><path class="cls-1" d="M32.5,1A31.5,31.5,0,1,1,1,32.5,31.54,31.54,0,0,1,32.5,1m0-1A32.5,32.5,0,1,0,65,32.5,32.5,32.5,0,0,0,32.5,0h0Z"/><polygon class="cls-1" points="41.91 28.2 32.59 18.65 23.09 28.39 24.17 29.44 31.87 21.54 31.87 40.05 33.37 40.05 33.37 21.59 40.83 29.25 41.91 28.2"/><polygon class="cls-1" points="40.66 40.35 40.66 44.35 24.34 44.35 24.34 40.35 22.34 40.35 22.34 44.35 22.34 46.35 24.34 46.35 40.66 46.35 42.66 46.35 42.66 44.35 42.66 40.35 40.66 40.35"/></svg>'
 57 |         },
 58 |         border: {
 59 |             type: Number,
 60 |             default: 25
 61 |         },
 62 |         borderRadius: {
 63 |             type: Number,
 64 |             default: 0
 65 |         },
 66 |         width: {
 67 |             type: Number,
 68 |             default: 200
 69 |         },
 70 |         height: {
 71 |             type: Number,
 72 |             default: 200
 73 |         },
 74 |         color: {
 75 |             type: Array,
 76 |             default: () => [0, 0, 0, 0.5]
 77 |         },
 78 |         scale: {
 79 |             type: Number,
 80 |             default: 1
 81 |         },
 82 |         rotation: {
 83 |             type: Number,
 84 |             default: 0
 85 |         }
 86 |     },
 87 |     data () {
 88 |         return {
 89 |             cursor: 'cursorPointer',
 90 |             canvas: null,
 91 |             context: null,
 92 |             dragged: false,
 93 |             imageLoaded: false,
 94 |             changed: false,
 95 |             state: {
 96 |                 drag: false,
 97 |                 my: null,
 98 |                 mx: null,
 99 |                 xxx: 'ab',
100 |                 image: {
101 |                     x: 0,
102 |                     y: 0,
103 |                     resource: null
104 |                 }
105 |             }
106 |         };
107 |     },
108 |     computed: {
109 |         canvasWidth () {
110 |             return this.getDimensions().canvas.width;
111 |         },
112 |         canvasHeight () {
113 |             return this.getDimensions().canvas.height;
114 |         },
115 |         rotationRadian () {
116 |             return this.rotation * Math.PI / 180;
117 |         }
118 |     },
119 |     mounted () {
120 |         let self = this;
121 |         this.canvas = this.$refs.avatarEditorCanvas;
122 |         this.context = this.canvas.getContext('2d');
123 |         this.paint();
124 | 
125 |         if (!this.image) {
126 |             var placeHolder = this.svgToImage(this.placeholderSvg);
127 | 
128 |             placeHolder.onload = function () {
129 |                 var x = self.canvasWidth / 2 - this.width / 2;
130 |                 var y = self.canvasHeight / 2 - this.height / 2;
131 |                 self.context.drawImage(placeHolder, x, y, this.width, this.height);
132 |             };
133 |         } else {
134 |             this.loadImage(this.image);
135 |         }
136 |     },
137 |     methods: {
138 |         drawRoundedRect (context, x, y, width, height, borderRadius) {
139 |             if (borderRadius === 0) {
140 |                 context.rect(x, y, width, height);
141 |             } else {
142 |                 const widthMinusRad = width - borderRadius;
143 |                 const heightMinusRad = height - borderRadius;
144 |                 context.translate(x, y);
145 |                 context.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
146 |                 context.lineTo(widthMinusRad, 0);
147 |                 context.arc(widthMinusRad, borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
148 |                 context.lineTo(width, heightMinusRad);
149 |                 context.arc(widthMinusRad, heightMinusRad, borderRadius, Math.PI * 2, Math.PI * 0.5);
150 |                 context.lineTo(borderRadius, height);
151 |                 context.arc(borderRadius, heightMinusRad, borderRadius, Math.PI * 0.5, Math.PI);
152 |                 context.translate(-x, -y);
153 |             }
154 |         },
155 |         svgToImage (rawSVG) {
156 |             let svg = new Blob([rawSVG], {type: 'image/svg+xml;charset=utf-8'});
157 |             let domURL = self.URL || self.webkitURL || self;
158 |             let url = domURL.createObjectURL(svg);
159 |             let img = new Image();
160 |             img.src = url;
161 |             return img;
162 |         },
163 |         setState (state1) {
164 |             var min = Math.ceil(1);
165 |             var max = Math.floor(10000);
166 | 
167 |             this.state = state1;
168 |             this.state.cnt = 'HELLO' + Math.floor(Math.random() * (max - min)) + min;
169 |         },
170 |         paint () {
171 |             this.context.save();
172 |             this.context.translate(0, 0);
173 |             this.context.fillStyle = 'rgba(' + this.color.slice(0, 4).join(',') + ')';
174 | 
175 |             let borderRadius = this.borderRadius;
176 |             const dimensions = this.getDimensions();
177 |             const borderSize = dimensions.border;
178 |             const height = dimensions.canvas.height;
179 |             const width = dimensions.canvas.width;
180 | 
181 |             // clamp border radius between zero (perfect rectangle) and half the size without borders (perfect circle or "pill")
182 |             borderRadius = Math.max(borderRadius, 0);
183 |             borderRadius = Math.min(borderRadius, width / 2 - borderSize, height / 2 - borderSize);
184 | 
185 |             this.context.beginPath();
186 | 
187 |             // inner rect, possibly rounded
188 |             this.drawRoundedRect(
189 |                 this.context,
190 |                 borderSize,
191 |                 borderSize,
192 |                 width - borderSize * 2,
193 |                 height - borderSize * 2,
194 |                 borderRadius);
195 | 
196 |             this.context.rect(width, 0, -width, height); // outer rect, drawn "counterclockwise"
197 |             this.context.fill('evenodd');
198 |             this.context.restore();
199 |         },
200 |         getDimensions () {
201 |             return {
202 |                 width: this.width,
203 |                 height: this.height,
204 |                 border: this.border,
205 |                 canvas: {
206 |                     width: this.width + (this.border * 2),
207 |                     height: this.height + (this.border * 2)
208 |                 }
209 |             };
210 |         },
211 |         onDrop (e) {
212 |             e = e || window.event;
213 |             e.stopPropagation();
214 |             e.preventDefault();
215 | 
216 |             if (e.dataTransfer && e.dataTransfer.files.length) {
217 |                 // this.props.onDropFile(e)
218 |                 const reader = new FileReader();
219 |                 const file = e.dataTransfer.files[0];
220 |                 this.changed = true;
221 |                 reader.onload = (e) => this.loadImage(e.target.result);
222 |                 reader.readAsDataURL(file);
223 |             }
224 |         },
225 |         onDragStart (e) {
226 |             e = e || window.event;
227 |             if (e.type !== 'touchstart') {
228 |                 e.preventDefault();
229 |             }
230 |             this.state.drag = true;
231 |             this.state.mx = null;
232 |             this.state.my = null;
233 |             this.cursor = 'cursorGrabbing';
234 |             let eventSubject = document;
235 |             let hasMoved = false;
236 |             let handleMouseUp = (event) => {
237 |                 this.onDragEnd(event);
238 |                 if (!hasMoved && event.targetTouches) {
239 |                     e.target.click();
240 |                 }
241 |                 eventSubject.removeEventListener('mouseup', handleMouseUp);
242 |                 eventSubject.removeEventListener('mousemove', handleMouseMove);
243 |                 eventSubject.removeEventListener('touchend', handleMouseUp);
244 |                 eventSubject.removeEventListener('touchmove', handleMouseMove);
245 |             };
246 |             let handleMouseMove = (event) => {
247 |                 hasMoved = true;
248 |                 this.onMouseMove(event);
249 |             };
250 |             eventSubject.addEventListener('mouseup', handleMouseUp);
251 |             eventSubject.addEventListener('mousemove', handleMouseMove);
252 |             eventSubject.addEventListener('touchend', handleMouseUp);
253 |             eventSubject.addEventListener('touchmove', handleMouseMove);
254 |         },
255 |         onDragEnd (e) {
256 |             if (this.state.drag) {
257 |                 this.state.drag = false;
258 |                 this.cursor = 'cursorPointer';
259 |             }
260 |         },
261 |         onMouseMove (e) {
262 |             e = e || window.event;
263 |             if (this.state.drag === false) {
264 |                 return;
265 |             }
266 | 
267 |             this.dragged = true;
268 |             this.changed = true;
269 | 
270 |             let imageState = this.state.image;
271 |             const lastX = imageState.x;
272 |             const lastY = imageState.y;
273 | 
274 |             const mousePositionX = e.targetTouches ? e.targetTouches[0].pageX : e.clientX;
275 |             const mousePositionY = e.targetTouches ? e.targetTouches[0].pageY : e.clientY;
276 | 
277 |             const newState = {
278 |                 mx: mousePositionX,
279 |                 my: mousePositionY,
280 |                 image: imageState
281 |             };
282 | 
283 |             if (this.state.mx && this.state.my) {
284 |                 const xDiff = (this.state.mx - mousePositionX) / this.scale;
285 |                 const yDiff = (this.state.my - mousePositionY) / this.scale;
286 | 
287 |                 imageState.y = this.getBoundedY(lastY - yDiff, this.scale);
288 |                 imageState.x = this.getBoundedX(lastX - xDiff, this.scale);
289 |             }
290 | 
291 |             this.state.mx = newState.mx;
292 |             this.state.my = newState.my;
293 |             this.state.image = imageState;
294 |             // this.setState(newState)
295 |         },
296 |         replaceImageInBounds () {
297 |             let imageState = this.state.image;
298 |             imageState.y = this.getBoundedY(imageState.y, this.scale);
299 |             imageState.x = this.getBoundedX(imageState.x, this.scale);
300 |         },
301 |         loadImage (imageURL) {
302 |             let imageObj = new Image();
303 |             let self = this;
304 | 
305 |             // imageObj.onload = () => this.handleImageReady(imageObj);
306 |             imageObj.onload = () => {
307 |                 let imageState = self.getInitialSize(imageObj.width, imageObj.height);
308 |                 self.state.image.x = 0;
309 |                 self.state.image.y = 0;
310 |                 self.state.image.resource = imageObj;
311 |                 self.state.image.width = imageState.width;
312 |                 self.state.image.height = imageState.height;
313 |                 self.state.drag = false;
314 |                 self.$emit('vue-avatar-editor:image-ready', self.scale);
315 |                 self.imageLoaded = true;
316 |                 this.$emit('imageLoaded', self.imageLoaded);
317 |                 self.cursor = 'cursorGrab';
318 |             };
319 |             imageObj.onerror = (err) => console.log('error loading image: ', err);
320 | 
321 |             // imageObj.onerror = this.props.onLoadFailure
322 |             if (!this.isDataURL(imageURL)) {
323 |                 imageObj.crossOrigin = 'anonymous';
324 |             }
325 | 
326 |             imageObj.src = imageURL;
327 |         },
328 |         getInitialSize (width, height) {
329 |             let newHeight;
330 |             let newWidth;
331 | 
332 |             const dimensions = this.getDimensions();
333 |             const canvasRatio = dimensions.height / dimensions.width;
334 |             const imageRatio = height / width;
335 | 
336 |             if (canvasRatio > imageRatio) {
337 |                 newHeight = (this.getDimensions().height);
338 |                 newWidth = (width * (newHeight / height));
339 |             } else {
340 |                 newWidth = (this.getDimensions().width);
341 |                 newHeight = (height * (newWidth / width));
342 |             }
343 | 
344 |             return {
345 |                 height: newHeight,
346 |                 width: newWidth
347 |             };
348 |         },
349 |         isDataURL (str) {
350 |             if (str === null) {
351 |                 return false;
352 |             }
353 |             return !!str.match(/^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+=[a-z\-]+)?)?(;base64)?,[a-z0-9!$&',()*+;=\-._~:@\/?%\s]*\s*$/i); // eslint-disable-line no-useless-escape
354 |         },
355 |         getBoundedX (x, scale) {
356 |             var image = this.state.image;
357 |             var dimensions = this.getDimensions();
358 |             let width = Math.abs(image.width * Math.cos(this.rotationRadian)) + Math.abs(image.height * Math.sin(this.rotationRadian));
359 |             let widthDiff = Math.floor((width - dimensions.width / scale) / 2);
360 |             widthDiff = Math.max(0, widthDiff);
361 |             return Math.max(-widthDiff, Math.min(x, widthDiff));
362 |         },
363 |         getBoundedY (y, scale) {
364 |             var image = this.state.image;
365 |             var dimensions = this.getDimensions();
366 |             let height = Math.abs(image.width * Math.sin(this.rotationRadian)) + Math.abs(image.height * Math.cos(this.rotationRadian));
367 |             let heightDiff = Math.floor((height - dimensions.height / scale) / 2);
368 |             heightDiff = Math.max(0, heightDiff);
369 |             return Math.max(-heightDiff, Math.min(y, heightDiff));
370 |         },
371 |         paintImage (context, image, border) {
372 |             if (image.resource) {
373 |                 var position = this.calculatePosition(image, border);
374 |                 context.save();
375 |                 context.globalCompositeOperation = 'destination-over';
376 |                 let dimensions = this.getDimensions();
377 |                 context.translate(dimensions.canvas.width / 2, dimensions.canvas.height / 2);
378 |                 context.rotate(this.rotationRadian);
379 |                 context.translate(-dimensions.canvas.width / 2, -dimensions.canvas.height / 2);
380 |                 context.drawImage(
381 |                     image.resource,
382 |                     position.x,
383 |                     position.y,
384 |                     position.width,
385 |                     position.height);
386 |                 context.restore();
387 |             }
388 |         },
389 |         transformDataWithRotation (x, y) {
390 |             let radian = -this.rotationRadian;
391 |             let rx = x * Math.cos(radian) - y * Math.sin(radian);
392 |             let ry = x * Math.sin(radian) + y * Math.cos(radian);
393 |             return [rx, ry];
394 |         },
395 |         calculatePosition (image, border) {
396 |             image = image || this.state.image;
397 |             var dimensions = this.getDimensions();
398 |             let width = image.width * this.scale;
399 |             let height = image.height * this.scale;
400 |             var widthDiff = (width - dimensions.width) / 2;
401 |             var heightDiff = (height - dimensions.height) / 2;
402 |             var x = image.x * this.scale;// - widthDiff;
403 |             var y = image.y * this.scale;// - heightDiff;
404 |             [x, y] = this.transformDataWithRotation(x, y);
405 |             x += border - widthDiff;
406 |             y += border - heightDiff;
407 |             return {
408 |                 x,
409 |                 y,
410 |                 height,
411 |                 width
412 |             };
413 |         },
414 |         redraw () {
415 |             this.context.clearRect(0, 0, this.getDimensions().canvas.width, this.getDimensions().canvas.height);
416 |             this.paint();
417 |             this.paintImage(this.context, this.state.image, this.border);
418 |         },
419 |         getImage () {
420 |             const cropRect = this.getCroppingRect();
421 |             const image = this.state.image;
422 | 
423 |             // get actual pixel coordinates
424 |             cropRect.x *= image.resource.width;
425 |             cropRect.y *= image.resource.height;
426 |             cropRect.width *= image.resource.width;
427 |             cropRect.height *= image.resource.height;
428 | 
429 |             // create a canvas with the correct dimensions
430 |             const canvas = document.createElement('canvas');
431 |             canvas.width = cropRect.width;
432 |             canvas.height = cropRect.height;
433 | 
434 |             // draw the full-size image at the correct position,
435 |             // the image gets truncated to the size of the canvas.
436 |             canvas.getContext('2d').drawImage(image.resource, -cropRect.x, -cropRect.y);
437 | 
438 |             return canvas;
439 |         },
440 |         getImageScaled () {
441 |             const { width, height } = this.getDimensions();
442 | 
443 |             const canvas = document.createElement('canvas');
444 |             canvas.width = width;
445 |             canvas.height = height;
446 | 
447 |             // don't paint a border here, as it is the resulting image
448 |             this.paintImage(canvas.getContext('2d'), this.state.image, 0);
449 | 
450 |             return canvas;
451 |         },
452 |         imageChanged () {
453 |             return this.changed;
454 |         },
455 |         getCroppingRect () {
456 |             const dim = this.getDimensions();
457 |             const frameRect = {
458 |                 x: dim.border,
459 |                 y: dim.border,
460 |                 width: dim.width,
461 |                 height: dim.height
462 |             };
463 |             const imageRect = this.calculatePosition(this.state.image, dim.border);
464 | 
465 |             return {
466 |                 x: (frameRect.x - imageRect.x) / imageRect.width,
467 |                 y: (frameRect.y - imageRect.y) / imageRect.height,
468 |                 width: frameRect.width / imageRect.width,
469 |                 height: frameRect.height / imageRect.height
470 |             };
471 |         },
472 |         clicked (e) {
473 |             if (this.dragged === true) {
474 |                 this.dragged = false;
475 |             } else {
476 |                 this.$refs.input.click();
477 |             }
478 |         },
479 |         fileSelected (e) {
480 |             var files = e.target.files || e.dataTransfer.files;
481 |             this.$emit('select-file', files);
482 | 
483 |             if (!files.length) {
484 |                 return;
485 |             }
486 | 
487 |             // var image = new Image();
488 |             var reader = new FileReader();
489 | 
490 |             this.changed = true;
491 |             reader.onload = (e) => this.loadImage(e.target.result);
492 |             reader.readAsDataURL(files[0]);
493 |         },
494 |         resetImage () {
495 |             let self = this;
496 |             this.canvas = this.$refs.avatarEditorCanvas;
497 |             this.context = this.canvas.getContext('2d');
498 |             self.imageLoaded = false;
499 |             this.$emit('imageLoaded', self.imageLoaded);
500 |             self.state = {
501 |                 drag: false,
502 |                 my: null,
503 |                 mx: null,
504 |                 xxx: 'ab',
505 |                 image: {
506 |                     x: 0,
507 |                     y: 0,
508 |                     resource: null
509 |                 }
510 |             };
511 |             this.context.clearRect(0, 0, this.getDimensions().canvas.width, this.getDimensions().canvas.height);
512 |             this.paint();
513 | 
514 |             var placeHolder = this.svgToImage(this.placeholderSvg);
515 | 
516 |             placeHolder.onload = function () {
517 |                 var x = self.canvasWidth / 2 - this.width / 2;
518 |                 var y = self.canvasHeight / 2 - this.height / 2;
519 |                 self.context.drawImage(placeHolder, x, y, this.width, this.height);
520 |             };
521 |         }
522 |     },
523 |     watch: {
524 |         state: {
525 |             handler (val, oldval) {
526 |                 if (this.imageLoaded) {
527 |                     this.redraw();
528 |                 }
529 |             },
530 |             deep: true
531 |         },
532 |         scale () {
533 |             if (this.imageLoaded) {
534 |                 this.replaceImageInBounds();
535 |                 this.redraw();
536 |             }
537 |         },
538 |         rotation () {
539 |             if (this.imageLoaded) {
540 |                 this.replaceImageInBounds();
541 |                 this.redraw();
542 |             }
543 |         },
544 |         borderRadius () {
545 |             this.redraw();
546 |         }
547 |     }
548 | };
549 | </script>
550 | 


--------------------------------------------------------------------------------