beter dimension handling

This commit is contained in:
Daniel Løvbrøtte Olsen 2018-06-13 13:49:11 +02:00
parent ebba063695
commit 116cfc43be

110
main.js
View File

@ -39,7 +39,7 @@ function generateStickerpackForm(mxc)
stickerpack.prepend(img); stickerpack.prepend(img);
} }
function generateForm(mxc, mxcthumb, mimetype) function generateForm(mxc, mxcthumb, mimetype, width, height)
{ {
var preview = document.getElementById("preview"); var preview = document.getElementById("preview");
@ -52,54 +52,19 @@ function generateForm(mxc, mxcthumb, mimetype)
img.className="card-img-top"; img.className="card-img-top";
img.src=client.mxcUrlToHttp(mxc); img.src=client.mxcUrlToHttp(mxc);
img.mxc = mxc img.mxc = mxc
img.onload = function() { div.appendChild(img);
var mxc = this.mxc;
var maxWidth = 512; // Max width for the image var heightStore = document.createElement("input");
var maxHeight = 512; // Max height for the image heightStore.type = "hidden";
heightStore.value = height;
heightStore.id = "height" + mxc;
div.appendChild(heightStore);
var width = img.width; var widthStore = document.createElement("input");
var height = img.height; widthStore.type = "hidden";
var ratio = 0; // Used for aspect ratio widthStore.value = width;
widthStore.id = "width" + mxc;
console.log(width); div.appendChild(widthStore);
console.log(height);
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
width = maxWidth; // Set new width
height = Math.floor(height * ratio); // Scale height based on ratio
}
if(height > maxWidth) {
ratio = maxHeight / height; // get ratio for scaling image
height = maxWidth; // Set new width
width = Math.floor(width * ratio); // Scale height based on ratio
}
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
width = maxWidth; // Set new width
height = Math.floor(height * ratio); // Scale height based on ratio
}
console.log(width);
console.log(height);
div.prepend(img);
var heightStore = document.createElement("input");
heightStore.type = "hidden";
heightStore.value = height;
heightStore.id = "height" + mxc;
div.appendChild(heightStore);
var widthStore = document.createElement("input");
widthStore.type = "hidden";
widthStore.value = width;
widthStore.id = "width" + mxc;
div.appendChild(widthStore);
}
var body = document.createElement("div"); var body = document.createElement("div");
body.className = "card-body" body.className = "card-body"
@ -138,17 +103,48 @@ function upload(file)
var mimetype = file.type; var mimetype = file.type;
client.uploadContent(file).then(mxc => { client.uploadContent(file).then(mxc => {
var http = new XMLHttpRequest();
http.open("GET", client.mxcUrlToHttp(mxc, 100, 100, "scale")); var img = new Image();
http.responseType = "blob"; img.src = client.mxcUrlToHttp(mxc);
http.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { img.onload = function() {
client.uploadContent(this.response, {type: this.response.type}).then(mxcthumb => {
generateForm(mxc, mxcthumb, mimetype); var maxWidth = 512; // Max width for the image
}); var maxHeight = 512; // Max height for the image
var width = img.width;
var height = img.height;
var ratio = 0; // Used for aspect ratio
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width;
width = maxWidth; // Set new width
height = Math.floor(height * ratio);
} }
}; if(height > maxWidth) {
http.send(); ratio = maxHeight / height;
height = maxWidth;
width = Math.floor(width * ratio);
}
if(width > maxWidth){
ratio = maxWidth / width;
width = maxWidth;
height = Math.floor(height * ratio);
}
var http = new XMLHttpRequest();
http.open("GET", client.mxcUrlToHttp(mxc, width, height, "scale"));
http.responseType = "blob";
http.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
client.uploadContent(this.response, {type: this.response.type}).then(mxcthumb => {
generateForm(mxc, mxcthumb, mimetype, width, height);
});
}
};
http.send();
}
}); });
} }