113 lines
2.1 KiB
HTML
113 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<script type="text/javascript" src="%1/node_modules/viewerjs/dist/viewer.js"></script>
|
|
<link rel="stylesheet" href="%1/node_modules/viewerjs/dist/viewer.css" />
|
|
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: %3;
|
|
}
|
|
|
|
img {
|
|
display: none;
|
|
background: %3;
|
|
}
|
|
|
|
.viewer-container {
|
|
background: %3;
|
|
}
|
|
|
|
.viewer-fullscreen, .viewer-fullscreen-exit {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<img id="image" src="%2">
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// View an image
|
|
const viewer = new Viewer(document.getElementById('image'), {
|
|
inline: true,
|
|
navbar: false,
|
|
transition: false,
|
|
toolbar: {
|
|
zoomIn: 4,
|
|
zoomOut: 4,
|
|
oneToOne: 4,
|
|
reset: 4,
|
|
rotateLeft: 4,
|
|
rotateRight: 4,
|
|
flipHorizontal: 4,
|
|
flipVertical: 4,
|
|
},
|
|
view() {
|
|
viewer.full();
|
|
},
|
|
});
|
|
|
|
function rotateLeft() {
|
|
viewer.rotate(-90);
|
|
}
|
|
|
|
function rotateRight() {
|
|
viewer.rotate(90);
|
|
}
|
|
|
|
function rotateHorizontal() {
|
|
viewer.rotate(180);
|
|
}
|
|
|
|
function zoomOut() {
|
|
viewer.zoom(-0.1, true);
|
|
}
|
|
|
|
function zoomIn() {
|
|
viewer.zoom(0.1, true);
|
|
}
|
|
|
|
function zoomReset() {
|
|
viewer.reset();
|
|
}
|
|
|
|
function zoomToggle() {
|
|
viewer.toggle();
|
|
}
|
|
|
|
function flipHorizontal() {
|
|
viewer.scaleX(-viewer.imageData.scaleX || -1);
|
|
}
|
|
|
|
function flipVertical() {
|
|
viewer.scaleY(-viewer.imageData.scaleY || -1);
|
|
}
|
|
|
|
function moveLeft() {
|
|
viewer.move(-10, 0);
|
|
}
|
|
|
|
function moveRight() {
|
|
viewer.move(10, 0);
|
|
}
|
|
|
|
function moveUp() {
|
|
viewer.move(0, -10);
|
|
}
|
|
|
|
function moveDown() {
|
|
viewer.move(0, 10);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|