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: {
fertig() {
console.log("IMAGE befor dbuserupdate: ", this.image)
this.dbUserUpdate(this.idToken, name, this.image, this.mid);
this.image = '';
this.startGetUser();
@ -76,7 +77,7 @@ var vue = new Vue({
console.error(error)
});
console.log('Pic for upload: ', vm.dataPic)
console.log('Pic for upload: ', vm.image)
// let req = {
// url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid,
@ -103,7 +104,7 @@ var vue = new Vue({
data: {
token: vm.idToken,
mid: vm.mid,
pic: vm.dataPic,
pic: vm.image,
name: name
},
success(result) {
@ -121,7 +122,9 @@ var vue = new Vue({
var currentUser = firebase.auth().currentUser;
var uid = currentUser.uid;
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'
function (snapshot) {
// 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');
break;
}
}, function(error) {
},
function (error) {
console.log(error);
}, function() {
},
function () {
// Upload completed successfully, now we can get the download URL
var downloadURL = uploadTask.snapshot.downloadURL;
if (!downloadURL) {
@ -170,9 +175,38 @@ var vue = new Vue({
var vm = this;
reader.onload = (e) => {
vm.dataPic = e.target.result;
vm.image = e.target.result;
this.showUploadButtons = 'true';
var tempImg = new Image();
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);
},

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

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<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">
<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>
<title>Document</title>
<title>User bearbeiten</title>
</head>
<body>
<div id="vue-app">
<!-- Square card -->
@ -41,9 +43,6 @@
</div>
</div>
Image: {{this.image}}<br> DataPic
{{this.dataPic}}
</center>
</div>
<style lang="scss">
@ -51,9 +50,11 @@
width: 320px;
height: 320px;
}
.demo-card-square>.mdl-card__title {
color: #fff;
}
.fotochooserimg {
width: 30%;
margin: auto;
@ -64,4 +65,5 @@
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="javascripts/user.js"></script>
</body>
</html>