mirror of https://github.com/Askill/Photo-Wall.git
81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
|
function Picture(src, id) {
|
||
|
|
this.id = id;
|
||
|
|
this.src = src;
|
||
|
|
this.x = 110;
|
||
|
|
this.y = 110;
|
||
|
|
|
||
|
|
this.img = new Image();
|
||
|
|
this.img.src = this.src;
|
||
|
|
this.imgRotate = Math.PI * 2;
|
||
|
|
|
||
|
|
this.frame = "";
|
||
|
|
this.passp = 20;
|
||
|
|
this.passpImg = new Image();
|
||
|
|
this.passpImg.src = this.frame;
|
||
|
|
this.frameRotate = false;
|
||
|
|
this.passpScale = 1;
|
||
|
|
this.passpColor = "#FFFFFF";
|
||
|
|
this.passpOffset = 3;
|
||
|
|
|
||
|
|
this.calcPassp = function () {
|
||
|
|
|
||
|
|
// check if image was rotated even number of times
|
||
|
|
let imgRotate1 = Math.round((this.imgRotate / (Math.PI / 2)) % 2) == 0;
|
||
|
|
|
||
|
|
let overlapping = this.frameRotate ^ imgRotate1;
|
||
|
|
|
||
|
|
if (overlapping) {
|
||
|
|
// scale the frame x percent bigger than the image
|
||
|
|
this.passpScale = ((this.img.width * this.scale) * (1 + this.passp / 100)) / this.passpImg.width;
|
||
|
|
|
||
|
|
// make sure image isn't bigger than frame in any dimension
|
||
|
|
if (this.img.height * this.scale > this.passpImg.height * this.passpScale) {
|
||
|
|
this.passpScale = ((this.img.height * this.scale) * (1 + this.passp / 100)) / this.passpImg.height;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// if frame or image is rotated switch width and height
|
||
|
|
else {
|
||
|
|
// scale the frame x percent bigger than the image
|
||
|
|
this.passpScale = ((this.img.height * this.scale) * (1 + this.passp / 100)) / this.passpImg.width;
|
||
|
|
|
||
|
|
// make sure image isn't bigger than frame in any dimension
|
||
|
|
if (this.img.width * this.scale > this.passpImg.height * this.passpScale) {
|
||
|
|
this.passpScale = ((this.img.width * this.scale) * (1 + this.passp / 100)) / this.passpImg.height;
|
||
|
|
}
|
||
|
|
if (this.img.height * this.scale > this.passpImg.width * this.passpScale) {
|
||
|
|
this.passpScale = ((this.img.height * this.scale) * (1 + this.passp / 100)) / this.passpImg.width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.passpScale === Infinity || this.passpScale === NaN) {
|
||
|
|
this.passpScale = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.refreshSrc = function () {
|
||
|
|
this.img = new Image();
|
||
|
|
this.img.src = this.src;
|
||
|
|
|
||
|
|
this.passpImg = new Image();
|
||
|
|
this.passpImg.src = this.frame;
|
||
|
|
}
|
||
|
|
this.scale = 1;
|
||
|
|
this.calcScale = function () {
|
||
|
|
let value = ((canvasWidth * 30) / 100) / this.img.width;
|
||
|
|
this.scale = value.toFixed(2);
|
||
|
|
document.getElementById("scale" + id).value = Number(value * 100).toFixed(2);
|
||
|
|
document.getElementById("scaleInput" + id).value = Number(value * 100).toFixed(2);
|
||
|
|
}
|
||
|
|
this.img.addEventListener('load', this.calcScale.bind(this), false);
|
||
|
|
|
||
|
|
this.getWidth = function () {
|
||
|
|
return this.img.width * this.scale;
|
||
|
|
}
|
||
|
|
this.getHeight = function () {
|
||
|
|
return this.img.height * this.scale;
|
||
|
|
}
|
||
|
|
this.isRotated = function(){
|
||
|
|
return Math.round((this.imgRotate / (Math.PI / 2)) % 2) == 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|