在线查看图片

关注

原创最新推荐文章于 2026-09-18 08:55:01 发布 1k 阅读 AI 写同款· GEO 优化 ›

在线图片查看器该工具集成了图片的在线查看，支持双点触控缩放，单点移动，左右切换查看图片。主要做的是网络图片的查看，可在adapter或FinalData中修改，设置成本地图片也可以加载。立即下载

<div id="loading" style="margin:30px;">

<span>正在载入图片，请稍待...</span><img src="${base}/ntkoOffice/loading.gif" alt="" />
</div>
<html>
<head>
<base href="${request.getScheme()}://${request.getServerName()}:${request.getServerPort().toString()}${request.getContextPath()}/" />
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.nav {font-family: Arial,Verdana, "宋体";font-size:4px;height:20px}
.btn {margin:0px;padding:2px;width:32px;height:20px;color:#000;
      font-size:10px;font-family: Arial,Verdana, "宋体";font-weight:800;text-decoration:none;
      cursor:hand;border:thin outset;background-color:#fff;
      FILTER: alpha(opacity=65); /* IE使用的半透明 */
      -moz-opacity: 0.6; /* Firefox使用的半透明 */
      }
.btn:hover {background-color:#ccc;color:#c00;}

//-->
</style>
<script type="text/javascript">
function addPDFSupport()
{

var pathName=document.getElementById("fileURL").value;
//document.getElementById("img1").src= getPath()+"/ntkoOffice/file/"+pathName; //打开PDF从URL
}

function getPath(){
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8083
    var localhostPaht=curWwwPath.substring(0,pos);
    //获取带"/"的项目名，如：/uimcardprj
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    return localhostPaht+projectName;
}

////////////////////////////////////////////////////////////////////////
window.onload=function(){
drag(document.getElementById('drag'));

document.getElementById('adpanel').style.top = document.body.clientHeight - 120;
orgH=loadpic.height;
orgW=loadpic.width;
document.getElementById('minipic').src=document.getElementById('loadpic').src;
document.getElementById('mainpic').src=document.getElementById('loadpic').src;
loadpic.style.display="none" ;
loading.style.display="none" ;
bar.style.display="block" ;
mainpic.style.display="block" ;
resizefit();
//resize (1);
showpicpos();
setcolors(3);
//var pathName=document.getElementById("fileURL").value;
//loadpic.src=getPath()+"/ntkoOffice/file/"+pathName;
//mainpic.src=getPath()+"/ntkoOffice/file/"+pathName;
//mainpic.title="欢迎使用ImageSee";

}

////////////////////////////////////////////////////////////////////////
window.onresize=function(){
document.getElementById('adpanel').style.top = document.body.clientHeight - 120;
showpicpos();
}

////////////////////////////////////////////////////////////////////////
function drag(o){
o.onmousedown=function(a){
  var d=document;if(!a)a=window.event;
  var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
  if(o.setCapture)
   o.setCapture();
  else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  d.onmousemove=function(a){
   if(!a)a=window.event;
   if(!a.pageX)a.pageX=a.clientX;
   if(!a.pageY)a.pageY=a.clientY;
   var tx=a.pageX-x,ty=a.pageY-y;

var cH;
var cW;
cH=document.all["mainpic"].height ;
cW=document.all["mainpic"].width ;

if (cW > document.body.clientWidth) {
if ((tx + cW) < document.body.clientWidth -20) {
tx = document.body.clientWidth -20 - cW;}
if (tx > 20) {
tx = 20;}
} else {
tx = (document.body.clientWidth - cW)/2;
}

if (cH > document.body.clientHeight) {
if ((ty + cH) < document.body.clientHeight -20) {
ty = document.body.clientHeight -20 - cH;}
if (ty > 20) {
ty = 20;}
} else {
ty = (document.body.clientHeight - cH)/2;
}

   o.style.left=tx;
   o.style.top=ty;
                        showpicpos();
  };

  d.onmouseup=function(){
   if(o.releaseCapture)
    o.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.onmousemove=null;
   d.onmouseup=null;
  };
};
}

var orgH;
var orgW;

//var Request=new Object();
//Request=GetRequest();
var pic;
//pic=Request['pic'];

////////////////////////////////////////////////////////////////////////
function setcolors (x){
if (x==1) {document.body.style.backgroundColor="#000";}
if (x==2) {document.body.style.backgroundColor="#fff";}
if (x==3) {document.body.style.backgroundColor="#cdcdde";}
}

////////////////////////////////////////////////////////////////////////
function loadpicerror () {
var picname = loadpic.src;
bar.style.display="none" ;
showpicpos ();
document.title ='图片浏览ImageSee';
if (pic) {
loadpic.src="err.jpg";
mainpic.src="err.jpg";
//mainpic.width=256;
//mainpic.height=256;
mainpic.title="指定的图片不存在";
alert('指定的图片不存在' + picname);}
else {
loadpic.src="welcome.jpg";
mainpic.src="welcome.jpg";
//mainpic.width=452;
//mainpic.height=350;
mainpic.title="欢迎使用ImageSee";
}

}

////////////////////////////////////////////////////////////////////////
function resizefit () {
if ( orgW > orgH ) {
var x;
x=orgW;
x=(document.body.clientWidth)/x;
mainpic.width=document.body.clientWidth ;
mainpic.height=orgH * x ;

var k1;
k1=mainpic.width / orgW;

mainpic.height= Math.floor(orgH * x) ;

o=document.getElementById('drag');
Py=Number(o.style.top.replace("px",""));
Py=Math.floor(Py * x / k1);

if ((Py + orgH * x) < document.body.clientHeight -20) {
Py = document.body.clientHeight -20 - orgH * x;
}

if (Py > 20) {
Py = 20;
}

if ( orgH * x < document.body.clientHeight ) {
Py = (document.body.clientHeight - orgH * x)/2;
}
o.style.left=0;
o.style.top= Py;
}
else{
var x;
x=orgH;
x=(document.body.clientHeight)/x;
mainpic.width=orgW * x ;
mainpic.height=document.body.clientHeight ;

var k1;
k1=mainpic.width / orgW;

mainpic.width= Math.floor(orgW * x) ;

o=document.getElementById('drag');
Px=Number(o.style.left.replace("px",""));
Px=Math.floor(Px * x / k1);

if ((Px + orgW * x) < document.body.clientWidth -20) {
Px = document.body.clientWidth -20 - orgW * x;
}

if (Px > 20) {
Px = 20;
}

if ( orgW * x < document.body.clientWidth ) {
Px = (document.body.clientWidth - orgW * x)/2;
}

o.style.left=Px;
o.style.top= 0;
}

o=document.getElementById('drag');
//o.style.left=0;
//o.style.top=0;
document.title = "ZoomTo: FullScreen" + " | " + mainpic.src;
showpicpos ();
}

////////////////////////////////////////////////////////////////////////
function resize (x) {
if (mainpic.width== Math.floor(orgW * x)){} else {
var k1;
k1=mainpic.width / orgW;

mainpic.width= Math.floor(orgW * x) ;
mainpic.height= Math.floor(orgH * x) ;

o=document.getElementById('drag');
Px=Number(o.style.left.replace("px",""));
Py=Number(o.style.top.replace("px",""));
Px=Math.floor(Px * x / k1);
Py=Math.floor(Py * x / k1);

if ((Px + orgW * x) < document.body.clientWidth -20) {
Px = document.body.clientWidth -20 - orgW * x;
}
if ((Py + orgH * x) < document.body.clientHeight -20) {
Py = document.body.clientHeight -20 - orgH * x;
}

if (Px > 20) {
Px = 20;
}
if (Py > 20) {
Py = 20;
}

if ( orgW * x < document.body.clientWidth ) {
Px = (document.body.clientWidth - orgW * x)/2;
}
if ( orgH * x < document.body.clientHeight ) {
Py = (document.body.clientHeight - orgH * x)/2;
}

o.style.left=Px;
o.style.top= Py;
document.title = "ZoomTo: " + Math.round(x*100) +"% | " + mainpic.src;
showpicpos();
}
}

////////////////////////////////////////////////////////////////////////
function RotateImage(x) {
document.all["mainpic"].style.filter="progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + x + ")";
document.all["minipic"].style.filter="progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + x + ")";
}

////////////////////////////////////////////////////////////////////////
function showpicpos () {
var cH;
var cW;
cH=document.all["mainpic"].height ;
cW=document.all["mainpic"].width ;

if ((cH > document.body.clientHeight) || (cW > document.body.clientWidth)) {
var cKH;
var cKW;
cKH=cH / document.body.clientHeight;
cKW=cW / document.body.clientWidth;

if ( cW > cH ) {
document.all["minipic"].width=100;
document.all["minipic"].height=100 * orgH / orgW;
document.all["minipicview"].style.width=100 * document.body.clientWidth / cW;
document.all["minipicview"].style.height= document.body.clientHeight / document.body.clientWidth * 100 * document.body.clientWidth / cW;}
else{
document.all["minipic"].height=100;
document.all["minipic"].width=100 * orgW / orgH;
document.all["minipicview"].style.height= 100 * document.body.clientHeight / cH;
document.all["minipicview"].style.width= document.body.clientWidth / document.body.clientHeight * 100 * document.body.clientHeight / cH;}

o=document.getElementById('drag');
Px=Number(o.style.left.replace("px",""));
Py=Number(o.style.top.replace("px",""));
document.all["minipicview"].style.top=- Py * document.all["minipic"].height / document.all["mainpic"].height;
document.all["minipicview"].style.left=- Px * document.all["minipic"].width / document.all["mainpic"].width;
document.all["minipicpanel"].style.display="block";}

else{
document.all["minipicpanel"].style.display="none";}
}

////////////////////////////////////////////////////////////////////////
function moveAdPanel(x) {
if (x==1) {
adpanel.style.top=document.body.clientHeight - 20;
admain.style.display='none';
adbtn1.style.display='none';
adbtn2.style.display='inline';}
if (x==2) {
adpanel.style.top=document.body.clientHeight - 120;
admain.style.display='block';
adbtn1.style.display='inline';
adbtn2.style.display='none';}
}

////////////////////////////////////////////////////////////////////////
function GetRequest()
{
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if(url.indexOf("?") != -1)
{
var str = url.substr(1);
    strs = str.split("&");
for(var i = 0; i < strs.length; i ++)
    {
     theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
    }
}
return theRequest;
}

////////////////////////////////////////////////////////////////////////
function movePicByClick(event) {

if (event.offsetX) {
var cX = event.offsetX - Number(document.all["minipicview"].style.width.replace("px","")) / 2;
var cY = event.offsetY - Number(document.all["minipicview"].style.height.replace("px","")) / 2;
}
if (event.layerX) {
var cX = event.layerX - Number(document.all["minipicview"].style.width.replace("px","")) / 2;
var cY = event.layerY - Number(document.all["minipicview"].style.height.replace("px","")) / 2;
}

var cH;
var cW;
cH=document.all["mainpic"].height ;
cW=document.all["mainpic"].width ;
var cKH;
var cKW;
cKH=cH / document.body.clientHeight;
cKW=cW / document.body.clientWidth;

o=document.getElementById('drag');
Px=Number(o.style.left.replace("px",""));
Py=Number(o.style.top.replace("px",""));
Py =- cY / (document.all["minipic"].height / document.all["mainpic"].height) ;
Px= - cX / (document.all["minipic"].width / document.all["mainpic"].width);

if (cW > document.body.clientWidth) {
if ((Px + cW) < document.body.clientWidth -20) {
Px = document.body.clientWidth -20 - cW;}
if (Px > 20) {
Px = 20;}
} else {
Px = (document.body.clientWidth - cW)/2;
}

if (cH > document.body.clientHeight) {
if ((Py + cH) < document.body.clientHeight -20) {
Py = document.body.clientHeight -20 - cH;}
if (Py > 20) {
Py = 20;}
} else {
Py = (document.body.clientHeight - cH)/2;
}

o.style.left=Px;
o.style.top=Py;

showpicpos();
}

/////////////////////////////////////////
function addme(){
url = location.href;
var myDate = new Date();
title='收藏图片 ' + myDate.getFullYear() + '年' + (myDate.getMonth()+1) + '月' + myDate.getDate() + '日' + myDate.getHours() + '时' + myDate.getMinutes() + '分'
title = prompt("请输入该图片描述文字", title);
if (title) {} else {title=''}
if(document.all)
{window.external.AddFavorite(url,title)}
else{window.sidebar.addPanel(title, url, "")}
}

//-->
</script>
</head>
<body bgcolor="#ffffff" onload="addPDFSupport()"; scroll="no" style="margin:0px;padding:0px;background-color:#fff;overflow:hidden;
">
<input type="hidden" id="fileURL" value="${(fileURL)!}">
<input type="hidden" id="isPrint" value="${(isPrint)!}">
<div id="bar" name="bar" style="width:100%;height:20px;position:absolute;Z-index:200; display:none;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="20" id="table1" style="border-collapse: collapse;Z-index:200;" bordercolor="#FFFFFF">
   <tr>
    <td>
     <span class="nav" >
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(0.05);">5%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(0.1);">10%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(0.3);">30%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(0.5);">50%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(0.8);">80%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.0);" style="color:Purple ;">100%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.1);">110%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.2);">120%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.3);">130%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.5);">150%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(1.8);">180%</button>
<button class="btn" title="缩放到原图的百分比" onclick="javascript:resize(2.0);">200%</button>

<button class="btn" onclick="javascript:resizefit();" title="按屏幕缩放" style="color:Purple ;">full</button>
<button class="btn" onclick="RotateImage(1);" title="转动图片左90度(需IE)">R-90</button>
<button class="btn" onclick="RotateImage(3);" title="转动图片右90度(需IE)">R+90</button>
<button class="btn" onclick="RotateImage(2);" title="转动图片180度(需IE)">R180</button>
<button class="btn" onclick="RotateImage(4);" title="取消转动" style="color:Purple ;">R0</button>
</span>
    </td>
    <td width="55px" style="margin:0px;padding:0px;text-align:center;vertical-align:middle;cursor:hand;">
     <span>
<button class="btn" title="使用黑色背景色" onclick="javascript:setcolors(1)" style="padding:0px;width:12px;height:18px;background-color:#000;"></button>
<button class="btn" title="使用灰色背景色" onclick="javascript:setcolors(3)" style="padding:0px;width:12px;height:18px;background-color:#cdcdde"></button>
<button class="btn" title="使用白色背景色" onclick="javascript:setcolors(2)" style="padding:0px;width:12px;height:18px;background-color:#fff"></button></span>
    </td>
</tr></table>
</div>
<div id="drag" name="drag" style="width:1px;height:1px;margin:0px;border:0;position:absolute;top:20px;left:20px;text-align:center;cursor:move;">
<img id="mainpic" name="mainpic" src="1.jpg" style="border:0;display:none;" alt="" />
</div>