Commit d5016ca4 authored by wim-vantomme's avatar wim-vantomme
Browse files

Added image widgets

parent dc2f4338
......@@ -24,6 +24,7 @@
## Notes
* A quick spike to work with some vue image manipulation libraries / components.
* Cropping and uploading of images to the server is implemented with the following vue-component: [vue-croppa](https://github.com/zhanziyang/vue-croppa). This component has been implemented since it was the only one with a proper license that is compatible with GPLv3.
* The ccv library by [LiuLiu](https://github.com/liuliu/ccv) looks promising to add face detection to a profile component. There also exist a [jQuery implementation](https://github.com/jaysalvat/jquery.facedetection) of this library.
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
......@@ -362,6 +362,15 @@
"integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
"dev": true
},
"axios": {
"version": "0.17.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.17.1.tgz",
"integrity": "sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=",
"requires": {
"follow-redirects": "1.4.1",
"is-buffer": "1.1.6"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......@@ -1715,6 +1724,11 @@
"integrity": "sha512-AoROHIFLv2iv5CG4nonOfT9ZCQ3JTN0GyEn8LG2sPb2Wc5cIyX/UwLYP0pnVajVF3LWH+mrO/DXBzmte0BK9cQ==",
"dev": true
},
"canvas-exif-orientation": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/canvas-exif-orientation/-/canvas-exif-orientation-0.4.0.tgz",
"integrity": "sha1-tIfzcBmYqeh56xBAELKlgRU2i2s="
},
"caseless": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
......@@ -3722,6 +3736,24 @@
"readable-stream": "2.3.3"
}
},
"follow-redirects": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
"integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
"requires": {
"debug": "3.1.0"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
}
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -5531,8 +5563,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
},
"is-builtin-module": {
"version": "1.0.0",
......@@ -6990,8 +7021,7 @@
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"multicast-dns": {
"version": "6.2.3",
......@@ -7251,8 +7281,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"object-copy": {
"version": "0.1.0",
......@@ -12049,6 +12078,15 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
"integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
},
"vue-croppa": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-croppa/-/vue-croppa-1.2.0.tgz",
"integrity": "sha512-UfzIYyPS+bz8ooyGPY+GbX7IW+GqwrBLx0IqMx29wyeMrggpzNT+LM1bUqjBbOql+vIshgb+PutO8TPhC9xeKw==",
"requires": {
"canvas-exif-orientation": "0.4.0",
"object-assign": "4.1.1"
}
},
"vue-hot-reload-api": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",
......
......@@ -12,7 +12,9 @@
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2"
"axios": "^0.17.1",
"vue": "^2.5.2",
"vue-croppa": "^1.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
<div class="image-widget--wrapper">
<image-widget class="image-widget--streamer" v-model="cropWidget"
:width ="1200"
:height="300"
placeholder="Drop your image here."
:prevent-white-space="true"
accept="image/*"
@file-type-mismatch="fileTypeMismatch">
</image-widget>
<image-widget class="image-widget--profile" v-model="cropWidget"
:width ="150"
:height="150"
placeholder="Drop your profile image here."
:prevent-white-space="true"
canvas-color="rgba(0,0,0,0.2)"
accept="image/*"
@file-type-mismatch="fileTypeMismatch">
</image-widget>
</div>
<button type="submit" @click="upload">Upload</button>
<button type="reset" @click="remove">Remove image</button>
<p :class="statusMessageClass" v-if="statusMessage">{{ statusMessage }}</p>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
data() {
return {
cropWidget: {},
statusMessage: '',
error: null
}
},
computed: {
statusMessageClass() {
return {
'text-danger': this
}
}
},
methods: {
remove() {
this.cropWidget.remove();
},
fileTypeMismatch() {
this.error = true
this.statusMessage = 'Please add a valid imagefile.'
},
upload() {
this.cropWidget.remove();
if (!this.cropWidget.hasImage()) {
this.statusMessage = 'Please add an image to upload.'
return
}
}
}
}
</script>
......@@ -25,4 +71,15 @@ export default {
color: #2c3e50;
margin-top: 60px;
}
.image-widget--wrapper{
position: relative;
}
.image-widget--profile {
position: absolute;
bottom: 100px;
left: 200px;
}
.text-danger {
color:red;
}
</style>
......@@ -2,9 +2,14 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Croppa from 'vue-croppa'
import 'vue-croppa/dist/vue-croppa.css'
Vue.config.productionTip = false
Vue.use(Croppa, { componentName: 'image-widget'})
/* eslint-disable no-new */
new Vue({
el: '#app',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment