javascript - I want to achieve a relative image size
问题描述
I wanted to ensure that the picture is always displayed at its full height and the width is calculated in relation to it, as long as it is not zoomed. However, I would like to be able to zoom in and change the size of the window.
I tried to enter the image size relatively in the css code, but the zoom code can't handle it, and the rest by far exceeds my knowledge of HTML / CSS / JS.
Please only use the zoom buttons on the embedded code!
<!doctype html>
<html id="html" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My PDF Viewer</title>
<style>
#documentViewer {
display: inline-block;
margin-top: 0;
padding-top: 0;
text-align: center;
position: relative;
}
#body{
padding: 0;
margin: 0;
position: absolute;
}
#html{
text-align: center;
height:65vw;
position: absolute;
top: -0.2vh;
left: -0.4vw;
right: -0.2vw;
margin: 0;
padding: 0;
}
#tools {
display: inline-block;
width: 100%;
background-color: #035869;
vertical-align: middle;
text-align: center;
}
#toolbarDoc{
display: inline-block;
padding-top: 1vh;
padding-bottom: 1vh;
height: 4vh;
background-color: #035869;
vertical-align: middle;
border: 0.2vw solid black;
margin-left: 0.2vw;
text-align: center;
position: absolute;
top: -0.2vh;
left: -0.4vw;
right: -0.2vw;
}
#current_page, #current_doc, #zoom {
position: relative;
float: left;
font-size: 2vh;
font-weight: 500;
font-family: Verdana;
color: #fff;
white-space: nowrap;
padding: 0.2vw;
background-color: #357987;
margin-left: 1.5vw;
width: 8.5vw;
height: 3vh;
text-align: center;
}
#document_controls{
float: left;
padding-left: 7.8vw;
}
#page_controls{
float: left;
padding-left: 1.5vw;
}
#zoom_controls{
float: left;
padding-left: 1.5vw;
}
#html{
margin-left: -0.2vw;
padding: 0;
display: inline-block;
}
#documentBody{
display: inline-table;
text-align: center;
}
#zoomin, #zoomout, #go_previous, #go_next, #go_previous_doc, #go_next_doc {
position: relative;
float: left;
font-size: 2vh;
font-family: Verdana;
font-weight: 500;
background-color: #357987;
color: white;
text-align: center;
cursor: pointer;
height: 3.8vh;
width: 11vw;
margin-left: 1.5vw;
outline: none;
border: 0.2vw solid white;
}
#zoom-img {
display: inline-block;
cursor: move;
position: relative;
width: 700px;
height: 920px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#zoom-container {
display: inline-block;
position: relative;
top: 8.5vh;
overflow: hidden;
background: #ffffff;
height: 90vh;
width: 100vw;
padding-right: 0.2vw;
text-align: center;
}
</style>
</head>
<body id="documentBody">
<div id="documentViewer"></div>
<div id="toolbarDoc">
<div id="tools">
<div id="document_controls">
<button id="go_previous_doc">Doc -</button>
<!--<input id="current_doc" value="1" type="number" />-->
<button id="go_next_doc">Doc +</button>
</div>
<div id="page_controls">
<button id="go_previous">Page -</button>
<input id="current_page" value="1" type="string" />
<button id="go_next">Page +</button>
</div>
<div id="zoom_controls">
<button id="zoomout" value="Zoom out">Zoom -</button>
<!--<input id="zoom" value="1.5" type="number" />-->
<button id="zoomin" value="Zoom in">Zoom +</button>
</div>
</div>
</div>
<div id="zoom-container">
<img ondragstart="return false" id="zoom-img" src="https://homepages.cae.wisc.edu/~ece533/images/serrano.png" />
</div>
</body>
<script>
var myState = {
currentDoc: 1,
totalDoc: 0,
currentImg: 1,
totalImg: 10,
zoom: 1
}
var folders = [];
folders.length = 0;
var port = 0815;
var iTimer = 0;
var firstload = true;
window.addEventListener("DOMContentLoaded", function () {
if (localStorage.getItem("portSave") != null){
port = Number(localStorage.getItem("portSave"));
document.getElementById('portInput').value = port;
console.log(port);
}
delete folders;
console.log(folders);
src='';
getFiles();
});
var img_ele_height = document.getElementById('zoom-img').getBoundingClientRect().height;
var img_ele_width = document.getElementById('zoom-img').getBoundingClientRect().width;
var zoomer = (function () {
var img_ele = null,
x_cursor = 0,
y_cursor = 0,
x_img_ele = 0,
y_img_ele = 0,
orig_width = img_ele_width,
orig_height = img_ele_height,
current_top = 0,
current_left = 0,
zoom_factor = 1.0;
return {
zoom: function (zoomincrement) {
img_ele = document.getElementById('zoom-img');
zoom_factor = zoom_factor + zoomincrement;
if (zoom_factor <= 1.0)
{
zoom_factor = 1.0;
img_ele.style.top = '0px';
img_ele.style.left = '0px';
}
var pre_width = orig_width, pre_height = orig_height;
console.log('prewidth='+img_ele.getBoundingClientRect().width+'; pre_height ='+img_ele.getBoundingClientRect().height);
var new_width = (orig_width * zoom_factor);
var new_heigth = (orig_height * zoom_factor);
console.log('postwidth='+img_ele.style.width+'; postheight ='+img_ele.style.height);
if (current_left < (orig_width - new_width))
{
current_left = (orig_width - new_width);
}
if (current_top < (orig_height - new_heigth))
{
current_top = (orig_height - new_heigth);
}
img_ele.style.left = current_left + 'px';
img_ele.style.top = current_top + 'px';
img_ele.style.width = new_width + 'px';
img_ele.style.height = new_heigth + 'px';
img_ele = null;
},
start_drag: function () {
if (zoom_factor <= 1.0)
{
return;
}
img_ele = this;
x_img_ele = window.event.clientX - document.getElementById('zoom-img').offsetLeft;
y_img_ele = window.event.clientY - document.getElementById('zoom-img').offsetTop;
console.log('img='+img_ele.toString()+'; x_img_ele='+x_img_ele+'; y_img_ele='+y_img_ele+';')
console.log('offLeft='+document.getElementById('zoom-img').offsetLeft+'; offTop='+document.getElementById('zoom-img').offsetTop)
},
stop_drag: function () {
if (img_ele !== null) {
if (zoom_factor <= 1.0)
{
img_ele.style.left = '0px';
img_ele.style.top = '0px';
}
console.log(img_ele.style.left+' - '+img_ele.style.top);
}
img_ele = null;
},
while_drag: function () {
if (img_ele !== null)
{
var x_cursor = window.event.clientX;
var y_cursor = window.event.clientY;
var new_left = (x_cursor - x_img_ele);
if (new_left > 0)
{
new_left = 0;
}
if (new_left < (orig_width - img_ele.width))
{
new_left = (orig_width - img_ele.width);
}
var new_top = ( y_cursor - y_img_ele);
if (new_top > 0)
{
new_top = 0;
}
if (new_top < (orig_height - img_ele.height))
{
new_top = (orig_height - img_ele.height);
}
current_left = new_left;
img_ele.style.left = new_left + 'px';
current_top = new_top;
img_ele.style.top = new_top + 'px';
}
}
};
} ());
document.getElementById('zoomout').addEventListener('click', function() {
zoomer.zoom(-0.25);
});
document.getElementById('zoomin').addEventListener('click', function() {
zoomer.zoom(0.25);
});
document.getElementById('zoom-img').addEventListener('mousedown', zoomer.start_drag);
document.getElementById('zoom-container').addEventListener('mousemove', zoomer.while_drag);
document.getElementById('zoom-container').addEventListener('mouseup', zoomer.stop_drag);
document.getElementById('zoom-container').addEventListener('mouseout', zoomer.stop_drag);
// Get document and image infos
// Get Documents
function getFiles(){
iTimer++;
var path = '/images';
var xmlhttp = new XMLHttpRequest();
var list="";
myState.totalDoc = 0;
src='files.php';
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200) {
list = xmlhttp.responseText;
var arrStr = list.split(/[""][""]/);
var arrayLength = arrStr.length;
var foldersList = [];
arrStr.forEach(function (item) {
filename = item.replace('"', '')
//console.log(filename);
foldersList.push(filename);
});
var foldersList2 = [];
foldersList.forEach(function (item) {
var index = item.lastIndexOf("_");
var result = item.substring(0, index);
//console.log(result);
foldersList2.push(result);
});
const foldersFormated = new Map();
foldersList.forEach(folder => {
var index = folder.lastIndexOf("_");
var char = folder.substring(0, index);
!foldersFormated.has(char) ? foldersFormated.set(char, 1) : foldersFormated.set(char, foldersFormated.get(char) + 1);
})
for (const [key, value] of foldersFormated.entries()) {
//console.log(`${key}~${value}`);
folders.push(`${key}~${value}`);
myState.totalDoc++;
}
if (firstload == true){
loadfirstDoc();
firstload = false;
}
//console.log("TotalDocuments= " + myState.totalDoc);
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "filelist.txt", true);
xmlhttp.send();
src='';
}
function loadfirstDoc(){
getFiles();
myState.currentImg = 1;
var currentDoc = folders[(myState.currentDoc-1)];
var doc = currentDoc.split('~');
var name = doc[0];
var number = doc[1];
myState.totalImg = number;
console.log(name, 1);
render(name, 1);
}
// Toolbar functions
function changePort(){
port = Number(document.getElementById('portInput').value);
localStorage.setItem("portSave", String(port));
}
function render(name, number) {
console.log('./images/' + name + '/' + name +'_' + number + '.jpg');
document.getElementById('zoom-img').src ='./images/' + name + '/' + name +'_' + number + '.jpg';
}
document.getElementById('go_previous_doc').addEventListener('click', (e) => {
if (myState.currentDoc == 1)
return;
myState.currentDoc -= 1;
getFiles();
myState.currentImg = 1;
var currentDoc = folders[(myState.currentDoc-1)];
var doc = currentDoc.split('~');
var name = doc[0];
var number = doc[1];
myState.totalImg = number;
console.log(myState.totalImg);
//console.log('../images/'+ name + '/' + name + '_' + number + '.jpg');
console.log(name, 1);
render(name, 1);
});
document.getElementById('go_next_doc').addEventListener('click', (e) => {
if(myState.currentDoc >= myState.totalDoc)
return;
myState.currentDoc += 1;
getFiles();
myState.currentImg = 1;
var currentDoc = folders[(myState.currentDoc-1)];
var doc = currentDoc.split('~');
var name = doc[0];
var number = doc[1];
myState.totalImg = number;
console.log(myState.totalImg);
//console.log('../images/'+ name + '/' + name + '_' + number + '.jpg');
console.log(name, 1);
render(name, 1);
});
document.getElementById('go_previous').addEventListener('click', (e) => {
if(myState.currentImg == 1)
return;
myState.currentImg-= 1;
var currentDoc = folders[(myState.currentDoc-1)];
var doc = currentDoc.split('~');
var name = doc[0];
var number = myState.currentImg;
console.log("Current Image = " + myState.currentImg);
render(name, number);
});
document.getElementById('go_next').addEventListener('click', (e) => {
if(myState.currentImg >= myState.totalImg)
return;
myState.currentImg += 1;
var currentDoc = folders[(myState.currentDoc-1)];
var doc = currentDoc.split('~');
var name = doc[0];
var number = myState.currentImg;
console.log("Current Image = " + myState.currentImg);
render(name, number);
});
document.getElementById('current_page').addEventListener('keypress', (e) => {
// Get key code
var code = (e.keyCode ? e.keyCode : e.which);
// If key code matches that of the Enter key
if(code == 13) {
var desiredPage = document.getElementById('current_page').valueAsNumber;
if(desiredPage >= 1 && desiredPage <= myState.totalImg) {
myState.currentImg = desiredPage;
document.getElementById("current_page").value = desiredPage + '/' + myState.totalImg;
render();
}
}
});
</script>
</body>
</html>解决方案
推荐阅读
- javascript - 在我的 express API 项目的其他文件夹中使用时，特定文件夹中的 sqlite3 sql 查询函数不起作用
- spring - 为什么大多数 Spring 应用程序的根级文件夹似乎总是遵循 com/company 命名约定？
- android - 你能得到日期选择器的标签吗
- javascript - 在 JavaScript 中使用 ml5.js 如何返回 resultP.html？
- ffmpeg - FFMPEG：如何确定特定硬件加速上下文支持哪些过滤器？
- r - 如何在ggplot2中切换轴排序
- kubernetes - 如何将 volumeClaimTemplates 提取到单独的 PersistentVolumeClaim yaml 文件中？
- powershell - Powershell检查任何SD \ CF卡（可能是多个），然后将JPG和CR2文件复制到不同的目录
- javascript - 如何使用带有后备的`preload`
- angular - 当我尝试使用 rxjs 下载一些图像时超出了最大调用堆栈大小