beter dimension handling
This commit is contained in:
parent
ebba063695
commit
116cfc43be
110
main.js
110
main.js
@ -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();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user