<apex:page showHeader="false" showQuickActionVfHeader="false">
|
<head>
|
<apex:includescript value="/soap/ajax/40.0/connection.js">
|
</apex:includescript>
|
<apex:includescript value="/soap/ajax/40.0/apex.js">
|
</apex:includescript>
|
<apex:includescript value="{!URLFOR($Resource.jquery183minjs)}">
|
</apex:includescript>
|
<title>
|
查看附件
|
</title>
|
<style>
|
* {
|
margin: 0px;
|
padding: 0px;
|
}
|
|
#pandiv {
|
width: 30%;
|
height: 500px;
|
}
|
|
#control {
|
/*background: #ccc;*/
|
opacity: 0.7;
|
width: 200px;
|
/*liying start*/
|
width: 80px;
|
/*liying end*/
|
height: 30px; display: none;
|
padding-top: 5px;
|
position: absolute;
|
/*liying start*/
|
align-content: center;
|
/*liying end*/
|
/*left: 550px;*/
|
top: 450px;
|
}
|
|
#canvas {
|
border: 1px solid black;
|
}
|
|
#left {
|
float: left;
|
display: block;
|
}
|
|
#right {
|
float: right;
|
display: block;
|
}
|
</style>
|
</head>
|
<body>
|
<!-- <apex:image src="https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file=00P1s0000015mjm" ></apex:image> -->
|
<!-- <button onclick="rotateImg('j_id0:testImg', 'left')">向左旋转</button>
|
<button onclick="rotateImg('j_id0:testImg', 'right')">向右旋转</button>
|
<input id="btn1" type="button" value="放大" onclick="ImageChange('j_id0:testImg',true)" />
|
<input id="btn2" type="button" value="缩小" onclick="ImageChange('j_id0:testImg',false)" />
|
<br/> -->
|
<div style="height: 40px;background-color:#0f218b;width: 100%; ">
|
<h1 style="color: white;margin-left: 45%;font-size: 24px;">查看附件</h1>
|
</div>
|
<div id="pandiv" style="margin-left: 24%; margin-top: 6%; text-align: center;">
|
<apex:image alt="此处的图像描述" id="testImg" value="" style="display: none;">
|
</apex:image>
|
<canvas height="500" id="canvas" style="cursor: default;" width="700">
|
</canvas>
|
<div id="control" style="display: none;margin-top: 100px; background-color: #ececec;margin-left: 24%; ">
|
<img id="left" src="/resource/esignimg02" onclick="rateImage(270)" style="heigh: 30px; width: 30px;" title="逆时针" />
|
<img id="right" src="/resource/esignimg01" onclick="rateImage(90)" style="heigh: 30px; width: 30px;" title="顺时针"/>
|
<!-- <input id="left" onclick="rateImage(270)" type="button" value="←" />
|
<input id="right" onclick="rateImage(90)" type="button" value="→"/> -->
|
</div>
|
</div>
|
|
<!-- //javascript:history.go(-1) 什么都不用传，直接返回上一级请求 -->
|
<input id="left" onclick="javascript:history.go(-1);" type="button" value="返回" style="margin-left: 85%; border-radius: 3px; /* 边框半径 */
|
width: 50px;
|
height: 30px;
|
background: #1E90FF; /* 背景颜色 */
|
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
|
outline: none; /* 不显示轮廓线 */
|
font-family: Microsoft YaHei; /* 设置字体 */
|
color: white; /* 字体颜色 */
|
font-size: 14px; /* 字体大小 */
|
border: 1px solid #1E90FF " />
|
|
<script>
|
//接收url上的参数
|
var queryVal=GetQueryValue('id');
|
var url='/servlet/servlet.FileDownload?file='+queryVal;
|
//20201221 liying end
|
//document.getElementById("j_id0:testImg").value=url;
|
//js动态赋值
|
document.getElementById("j_id0:testImg").src = url;
|
var canvas = document.getElementById("canvas");
|
var pandiv = document.getElementById("pandiv");
|
var cxt = canvas.getContext("2d");
|
var control = document.getElementById("control");
|
var imgScale = 1;
|
var img;
|
var imgX = 0;
|
var imgY = 0;
|
var currentRate = 0;
|
/**当前的旋转角度*/
|
var mouseDownLocation;
|
var isMouseDown = false;
|
|
|
window.onload = function() {
|
var bbox = canvas.getBoundingClientRect();
|
var imageUrl = $("#pandiv>img").attr("src");
|
//20201221 liying start
|
var id = document.getElementById("id");
|
//20201221 liying end
|
img = new Image();
|
img.src = imageUrl;
|
img.id = "pic";
|
|
loadImage();
|
drawImage();
|
}
|
//js取参
|
//20201221 liying start
|
function GetQueryValue(queryName) {
|
var query = decodeURI(window.location.search.substring(1));
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == queryName) { return pair[1]; }
|
}
|
return null;
|
}
|
//20201221 liying end
|
|
function reLoadImage() {
|
loadImage();
|
|
}
|
function loadImage() {
|
if (img.width <= canvas.width && img.height <= canvas.height) {
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2;
|
} else {
|
var ratio = img.width / img.height;
|
widthTime = img.width / canvas.width;
|
heightTime = img.height / canvas.height;
|
|
if (widthTime > heightTime) {
|
img.width = canvas.width;
|
|
img.height = canvas.width / ratio;
|
} else {
|
img.height = canvas.height;
|
img.width = canvas.height * ratio;
|
|
}
|
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
}
|
|
//var backGroundColor = ['#223344', '#445566', '#667788', '#778899'];
|
//var backGroundColorIndex = 0;
|
function drawImage() {
|
|
var bbox = canvas.getBoundingClientRect();
|
|
//cxt.clearRect(0, 0, canvas.width, canvas.height);
|
cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
|
|
// cxt.fillStyle = backGroundColor[backGroundColorIndex++ % backGroundColor.length];
|
//cxt.fillRect(0, 0, canvas.width, canvas.height);
|
|
cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
|
}
|
|
// windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
|
function windowToCanvas(canvas, x, y) {
|
var bbox = canvas.getBoundingClientRect();
|
return {
|
x : x - bbox.left - (bbox.width - canvas.width) / 2,
|
y : y - bbox.top - (bbox.height - canvas.height) / 2
|
};
|
}
|
|
function isPointInImageArea(point) {
|
return true;
|
//return (point.x > imgX && point.x < imgX + img.width * imgScale &&
|
//point.y > imgY && point.y < imgY + img.height * imgScale);
|
}
|
function isPointInCanvasArea(point) {
|
return true;
|
//var bbox = canvas.getBoundingClientRect();
|
//return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
|
}
|
function isDivArea(point) {
|
return true;
|
//var bbox =pandiv.getBoundingClientRect();
|
//return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
|
}
|
|
canvas.onmousewheel = canvas.onwheel = function(event) {
|
|
var pos = windowToCanvas(canvas, event.clientX, event.clientY);
|
event.wheelDelta = event.wheelDelta ? event.wheelDelta
|
: (event.deltaY * (-40));
|
|
if (event.wheelDelta > 0) {
|
//alert("放大");
|
if (isPointInImageArea(pos)) {
|
imgScale *= 2;
|
//imgX = imgX * 2 - pos.x;
|
// imgY = imgY * 2 - pos.y;
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
} else {
|
imgScale *= 2;
|
//imgX = (canvas.width - img.width * imgScale) / 2;
|
//imgY = (canvas.height - img.height * imgScale) / 2;
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
} else {
|
//alert("缩小");
|
if (isPointInImageArea(pos)) {
|
imgScale /= 2;
|
//imgX = imgX * 0.5 + pos.x * 0.5;
|
// imgY = imgY * 0.5 + pos.y * 0.5;
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
} else {
|
imgScale /= 2;
|
// imgX = (canvas.width - img.width * imgScale) / 2;
|
// imgY = (canvas.height - img.height * imgScale) / 2;
|
imgX = (canvas.width - img.width * imgScale) / 2
|
imgY = (canvas.height - img.height * imgScale) / 2
|
}
|
}
|
|
drawImage();
|
|
return false;
|
}
|
|
/**旋转angle度*/
|
function rateImage(angle) {
|
currentRate = (currentRate + angle) % 360;
|
|
cxt.clearRect(0, 0, canvas.width, canvas.height);
|
//cxt.save();
|
cxt.translate(canvas.width / 2, canvas.height / 2);
|
cxt.save();
|
cxt.rotate(angle * Math.PI / 180);
|
cxt.translate(-canvas.width / 2, -canvas.height / 2);
|
imgScale = 1;
|
reLoadImage();
|
|
drawImage();
|
//cxt.restore();
|
}
|
|
/**鼠标按下*/
|
pandiv.onmousedown = function(event) {
|
mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
|
if (isPointInImageArea(mouseDownLocation)) {
|
isMouseDown = true;
|
document.title = '查看附件';
|
}
|
}
|
/**鼠标弹起*/
|
document.body.onmouseup = function() {
|
isMouseDown = false;
|
canvas.style.cursor = "default";
|
document.title = '查看附件';
|
}
|
/**鼠标移动*/
|
pandiv.onmousemove = function(event) {
|
if (isMouseDown) {
|
canvas.style.cursor = "move";
|
var newMouseLocation = windowToCanvas(canvas, event.clientX,
|
event.clientY);
|
if (isDivArea({
|
x : event.clientX,
|
y : event.clientY
|
})) {
|
var x = newMouseLocation.x - mouseDownLocation.x;
|
var y = newMouseLocation.y - mouseDownLocation.y;
|
mouseDownLocation = newMouseLocation;
|
/**根据角度，计算图片偏移*/
|
if (0 == currentRate) {
|
imgX += x;
|
imgY += y;
|
} else if (90 == currentRate) {
|
imgX += y;
|
imgY -= x;
|
} else if (180 == currentRate) {
|
imgX -= x;
|
imgY -= y;
|
} else if (270 == currentRate) {
|
imgX -= y;
|
imgY += x;
|
}
|
} else {
|
/** 鼠标移动至画布范围外，置鼠标弹起 */
|
isMouseDown = false;
|
canvas.style.cursor = "default";
|
document.title = 'mouse up';
|
}
|
drawImage();
|
}
|
}
|
pandiv.onmouseover = function() {
|
//alert("1");
|
control.style.display = "block";
|
|
}
|
canvas.onmouseout = function() {
|
//alert("1");
|
control.style.display = "none";
|
}
|
</script>
|
</body>
|
</apex:page>
|
