<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo viewer</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,
body {
width: 100%;
height: 100%;
background-color: rgb(71, 71, 71);
}
.imgshow {
/* margin: 0px auto; */
width: 100%;
height: 96%;
position: relative;
border: 5px solid rgb(62, 62, 62);
border-top: 0px;
background-color: #f5f2ef;
overflow: auto;
box-sizing: border-box;
}
.down {
width: 100%;
height: 4%;
min-height: 26px;
background-color: rgb(71, 71, 71);
}
.down button::before {
position: absolute;
display: inline-block;
top: 1px;
left: 85%;
}
.down button:hover {
transform: opacity .9s;
opacity: 0.9;
cursor: pointer;
}
.imgshow img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* cursor: -webkit-grab; */
cursor: pointer;
}
.download::before {
content: '';
display: block;
height: 25px;
width: 25px;
background: url(images/toolbarButton-download@2x.png);
background-size: cover;
/* content: url(images/toolbarButton-download@2x.png); */
}
</style>
</head>
<body>
<div class="down">
<button class="download" onclick="download()" title="下载"></button>
</div>
<div class="imgshow">
<img id="myimg" src="" onerror="Onerr()" onmousewheel="MouseWheelHandler()" />
</div>
<script type="text/javascript">
var imgurl = window.opener.url
var filnam = window.opener.nam
var cnt = 0
// function geturl() {
// // var index = imgurl.lastIndexOf("=");
// // imgurl = imgurl.substring(index + 1, imgurl.length);
// }
// //html加载时获取文件路径
// window.onload = function () {
// geturl()
console.log(imgurl)
document.getElementById('myimg').src = imgurl;
// }
//越权后执行
function Onerr() {
if (cnt === 1) {
var img = document.getElementById('myimg');
img.src = "images/error.png";
}
if (cnt > 1) {
img.onerror = null;
}
cnt++;
// console.log(img.src)
}
// 滚轮放大或缩小
function MouseWheelHandler(e) {
var e = window.event || e;
// console.dir(e)
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimg.style.width = Math.max(50, Math.min(8000, myimg.width + (30 * delta))) + "px";
return false;
}
// 下载
function download() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
var elemIF = document.createElement("iframe");
elemIF.src = document.getElementById("myimg").src
elemIF.style.display = "none";
document.body.appendChild(elemIF);
}
else {
const link = document.createElement('a')
link.style.display = 'none'
link.href = document.getElementById("myimg").src
link.setAttribute('download', filnam + "." + filtyp)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
// const link = document.createElement('a')
// link.style.display = 'none'
// link.href = document.getElementById("myimg").src
// link.setAttribute('download', filnam)
// document.body.appendChild(link)
// link.click()
// document.body.removeChild(link)
}
</script>
</body>
</html>