Vue File to Base64 Converter
*) Try To Upload Some Image~
Callback Object
{{ files | json 2 }}
4 |
5 |
40 |
41 |
42 |
43 |
78 |
79 |
80 |
158 |
--------------------------------------------------------------------------------
/src/js/components/vue-image-compressor.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
195 |
--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './components/app.vue';
3 |
4 | Vue.config.debug = true
5 | Vue.config.devtools = true
6 |
7 | new Vue(Vue.util.extend(App)).$mount('app')
8 |
--------------------------------------------------------------------------------
/src/js/plugin.js:
--------------------------------------------------------------------------------
1 | import plugin from './components/vue-image-compressor.vue'
2 | module.exports = plugin;
3 |
--------------------------------------------------------------------------------
/webpack-bundle.config.js:
--------------------------------------------------------------------------------
1 |
2 | var webpack = require('webpack');
3 | var combineLoaders = require('webpack-combine-loaders');
4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
5 | require('es6-promise').polyfill();
6 |
7 | module.exports = {
8 |
9 | devtool: 'eval',
10 |
11 | entry: './src/js/plugin.js',
12 |
13 | output: {
14 | path: __dirname + '/dist',
15 | publicPath: './dist/',
16 | filename: 'vue-image-compressor.js',
17 | libraryTarget: "umd",
18 | library: "VueImageCompressor"
19 | },
20 |
21 | externals: {
22 | "vue": "Vue"
23 | },
24 |
25 |
26 | module: {
27 |
28 | loaders: [
29 | {
30 | test: /\.vue$/,
31 | loader: 'vue'
32 | },
33 |
34 | {
35 | test: /\.js$/,
36 | exclude: /(node_modules|bower_components)/,
37 | loader: 'babel',
38 | query: {
39 | presets: ["es2015"],
40 | plugins: ["transform-object-rest-spread","transform-vue-jsx"]
41 | }
42 | },
43 |
44 | {
45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 | loader: 'url',
47 | },
48 |
49 | {
50 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
51 | loader: 'url',
52 | },
53 |
54 | {
55 | test: /\.css$/,
56 | loaders: ['style','css']
57 | },
58 |
59 | {
60 | test: /\.json$/,
61 | loader: 'json'
62 | },
63 | ]
64 | },
65 |
66 | plugins: [
67 | new webpack.BannerPlugin("Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)\nLicensed Under MIT (http://opensource.org/licenses/MIT)\n \nVue Image Compressor @ Version 0.0.1\n"),
68 | new webpack.DefinePlugin({
69 | 'process.env': {
70 | 'NODE_ENV': '"production"'
71 | }
72 | }),
73 | ]
74 |
75 | };
76 |
--------------------------------------------------------------------------------
/webpack-prod.config.js:
--------------------------------------------------------------------------------
1 |
2 | var webpack = require('webpack');
3 | var combineLoaders = require('webpack-combine-loaders');
4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
5 | require('es6-promise').polyfill();
6 |
7 | module.exports = {
8 |
9 | devtool: 'eval',
10 |
11 | entry: './src/js/main.js',
12 |
13 | output: {
14 | path: __dirname + '/build',
15 | publicPath: './build/',
16 | filename: '[name].js',
17 | chunkFilename: '[name].js'
18 | },
19 |
20 |
21 | module: {
22 |
23 | loaders: [
24 | {
25 | test: /\.vue$/,
26 | loader: 'vue'
27 | },
28 |
29 | {
30 | test: /\.js$/,
31 | exclude: /(node_modules|bower_components)/,
32 | loader: 'babel',
33 | query: {
34 | presets: ["es2015"],
35 | plugins: ["transform-object-rest-spread","transform-vue-jsx"]
36 | }
37 | },
38 |
39 | {
40 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
41 | loader: 'url',
42 | },
43 |
44 | {
45 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
46 | loader: 'url',
47 | },
48 |
49 | {
50 | test: /\.css$/,
51 | loaders: ['style','css']
52 | },
53 |
54 | {
55 | test: /\.json$/,
56 | loader: 'json'
57 | },
58 | ]
59 | },
60 |
61 | plugins: [
62 | new webpack.DefinePlugin({
63 | 'process.env': {
64 | 'NODE_ENV': '"production"'
65 | }
66 | }),
67 | ]
68 |
69 | };
70 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 |
2 | require('es6-promise').polyfill();
3 |
4 | module.exports = {
5 |
6 | entry: './src/js/main.js',
7 |
8 | output: {
9 | path: __dirname + '/build',
10 | publicPath: '/build/',
11 | filename: '[name].js',
12 | chunkFilename: '[name].js'
13 | },
14 |
15 | module: {
16 | loaders: [
17 | {
18 | test: /\.vue$/,
19 | loader: 'vue'
20 | },
21 | {
22 | test: /\.js$/,
23 | exclude: /(node_modules|bower_components)/,
24 | loader: 'babel',
25 | query: {
26 | presets: ["es2015"],
27 | plugins: ["transform-object-rest-spread","transform-vue-jsx"]
28 | }
29 | },
30 | {
31 | test: /\.css$/,
32 | loaders: ['style','css']
33 | }
34 | ]
35 | }
36 |
37 | };
38 |
--------------------------------------------------------------------------------
Client Side Image Compressor
6 |Try To Upload Some Image~
7 | 8 | 9 |
12 |
13 | Responsive Image?
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | Before:
28 | {{ original.size }}
29 | |
30 | After:
31 | {{ compressed.size }}
32 |
33 |
34 |
35 | ![]()
36 | Download
37 |
38 |
39 |