dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

User bearbeiten crop

Browse Source
This commit is contained in:
Georg Reisinger 2019-03-24 16:53:09 +01:00
parent d06c57701b
commit 8d8560660a
2 changed files with 184 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
express-server/public/javascripts/user.js
View File

@ -31,6 +31,7 @@ var vue = new Vue({
}, },
methods: { methods: {
fertig() { fertig() {
console.log("IMAGE befor dbuserupdate: ", this.image)
this.dbUserUpdate(this.idToken, name, this.image, this.mid); this.dbUserUpdate(this.idToken, name, this.image, this.mid);
this.image = ''; this.image = '';
this.startGetUser(); this.startGetUser();
@ -76,7 +77,7 @@ var vue = new Vue({
console.error(error) console.error(error)
}); });
console.log('Pic for upload: ', vm.dataPic) console.log('Pic for upload: ', vm.image)
// let req = { // let req = {
// url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid, // url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid,
@ -103,7 +104,7 @@ var vue = new Vue({
data: { data: {
token: vm.idToken, token: vm.idToken,
mid: vm.mid, mid: vm.mid,
pic: vm.dataPic, pic: vm.image,
name: name name: name
}, },
success(result) { success(result) {
@ -121,7 +122,9 @@ var vue = new Vue({
var currentUser = firebase.auth().currentUser; var currentUser = firebase.auth().currentUser;
var uid = currentUser.uid; var uid = currentUser.uid;
this.dataPic = this.image; this.dataPic = this.image;
var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {contentType:'image/jpeg'}); var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {
contentType: 'image/jpeg'
});
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function (snapshot) { function (snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
@ -135,9 +138,11 @@ var vue = new Vue({
console.log('Upload is running'); console.log('Upload is running');
break; break;
} }
}, function(error) { },
function (error) {
console.log(error); console.log(error);
}, function() { },
function () {
// Upload completed successfully, now we can get the download URL // Upload completed successfully, now we can get the download URL
var downloadURL = uploadTask.snapshot.downloadURL; var downloadURL = uploadTask.snapshot.downloadURL;
if (!downloadURL) { if (!downloadURL) {
@ -170,9 +175,38 @@ var vue = new Vue({
var vm = this; var vm = this;
reader.onload = (e) => { reader.onload = (e) => {
vm.dataPic = e.target.result;
vm.image = e.target.result; var tempImg = new Image();
this.showUploadButtons = 'true'; tempImg.src = reader.result;
tempImg.onload = function () {
var MAX_WIDTH = 350;
var MAX_HEIGHT = 350;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
vm.dataPic = dataURL;
vm.image = dataURL;
vm.showUploadButtons = 'true';
}
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },

12
express-server/views/user.ejs
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -13,8 +14,9 @@
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title> <title>User bearbeiten</title>
</head> </head>
<body> <body>
<div id="vue-app"> <div id="vue-app">
<!-- Square card --> <!-- Square card -->
@ -41,9 +43,6 @@
</div> </div>
</div> </div>
Image: {{this.image}}<br> DataPic
{{this.dataPic}}
</center> </center>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -51,9 +50,11 @@
width: 320px; width: 320px;
height: 320px; height: 320px;
} }
.demo-card-square>.mdl-card__title { .demo-card-square>.mdl-card__title {
color: #fff; color: #fff;
} }
.fotochooserimg { .fotochooserimg {
width: 30%; width: 30%;
margin: auto; margin: auto;
@ -64,4 +65,5 @@
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="javascripts/user.js"></script> <script src="javascripts/user.js"></script>
</body> </body>
</html> </html>