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

74
main.js
View File

@ -39,7 +39,7 @@ function generateStickerpackForm(mxc)
stickerpack.prepend(img);
}
function generateForm(mxc, mxcthumb, mimetype)
function generateForm(mxc, mxcthumb, mimetype, width, height)
{
var preview = document.getElementById("preview");
@ -52,40 +52,7 @@ function generateForm(mxc, mxcthumb, mimetype)
img.className="card-img-top";
img.src=client.mxcUrlToHttp(mxc);
img.mxc = mxc
img.onload = function() {
var mxc = this.mxc;
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
console.log(width);
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);
div.appendChild(img);
var heightStore = document.createElement("input");
heightStore.type = "hidden";
@ -99,8 +66,6 @@ function generateForm(mxc, mxcthumb, mimetype)
widthStore.id = "width" + mxc;
div.appendChild(widthStore);
}
var body = document.createElement("div");
body.className = "card-body"
div.appendChild(body);
@ -138,17 +103,48 @@ function upload(file)
var mimetype = file.type;
client.uploadContent(file).then(mxc => {
var img = new Image();
img.src = client.mxcUrlToHttp(mxc);
img.onload = function() {
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) {
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, 100, 100, "scale"));
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);
generateForm(mxc, mxcthumb, mimetype, width, height);
});
}
};
http.send();
}
});
}