帝国cms图片查看页面改
帝国cms图片查看页面改模板 为 /e/ViewImg/index.html
修改图片查看为html5画图canvas生成
代码如下：<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>图片预览</title>
<style>
td{font-size:12px}
body{font-size:12px;text-align:center;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0}
input{font-size:12px;font-family:Tahoma,"MS Shell Dlg"}
a:active,a:link{color:#336;text-decoration:none}
a:visited{color:#336;text-decoration:none}
a:hover{color:red;text-decoration:underline}
.picborder{border:#999;border-style:solid;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px}
#ViewImg{border: 1px solid #ccc}
</style>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><div align="center"></div></td>
</tr>
<tr>
<td align="center">
<canvas id="ViewImg"></canvas>
</td>
</tr>
<tr>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">注:支持鼠标滚轮放大&缩小图片.</div></td>
</tr>
<tr>
<td>
<div align="center"><input type="button" name="Submit" value="关闭" onclick="window.close();"></div>
</td>
</tr>
</table>
<script>
function getQueryString(name)
{
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r); return null;
}
var canvas = document.getElementById('ViewImg');
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = getQueryString('url');
img.onload = function () {
//设置画布宽高与图片宽高相同
canvas.width = img.width;
canvas.height = img.height;
//绘制图片
ctx.drawImage(img, 0, 0, img.width, img.height);
trackTransforms(ctx);
var lastX = canvas.width / 2,
lastY = canvas.height / 2;
var dragStart, dragged;
canvas.addEventListener('mousedown', function(evt) {
document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
dragStart = ctx.transformedPoint(lastX, lastY);
dragged = false
}, false);
canvas.addEventListener('mousemove', function(evt) {
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
dragged = true;
if (dragStart) {
var pt = ctx.transformedPoint(lastX, lastY);
ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);
redraw()
}
}, false);
canvas.addEventListener('mouseup', function(evt) {
dragStart = null;
if (!dragged) zoom(evt.shiftKey ? -1 : 1)
}, false);
var scaleFactor = 1.1;
var zoom = function(clicks) {
if (clicks == 1) return;
var pt = ctx.transformedPoint(lastX, lastY);
ctx.translate(pt.x, pt.y);
var factor = Math.pow(scaleFactor, clicks);
ctx.scale(factor, factor);
ctx.translate(-pt.x, -pt.y);
redraw()
}
var handleScroll = function(evt) {
var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
if (delta) zoom(delta);
return evt.preventDefault() && false
};
canvas.addEventListener('DOMMouseScroll', handleScroll, false);
canvas.addEventListener('mousewheel', handleScroll, false)
}
function redraw() {
var p1 = ctx.transformedPoint(0, 0);
var p2 = ctx.transformedPoint(canvas.width, canvas.height);
ctx.clearRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.drawImage(img, 0, 0)
}
function trackTransforms(ctx) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
var xform = svg.createSVGMatrix();
ctx.getTransform = function() {
return xform
};
var savedTransforms = [];
var save = ctx.save;
ctx.save = function() {
savedTransforms.push(xform.translate(0, 0));
return save.call(ctx)
};
var restore = ctx.restore;
ctx.restore = function() {
xform = savedTransforms.pop();
return restore.call(ctx)
};
var scale = ctx.scale;
ctx.scale = function(sx, sy) {
xform = xform.scaleNonUniform(sx, sy);
return scale.call(ctx, sx, sy)
};
var rotate = ctx.rotate;
ctx.rotate = function(radians) {
xform = xform.rotate(radians * 180 / Math.PI);
return rotate.call(ctx, radians)
};
var translate = ctx.translate;
ctx.translate = function(dx, dy) {
xform = xform.translate(dx, dy);
return translate.call(ctx, dx, dy)
};
var transform = ctx.transform;
ctx.transform = function(a, b, c, d, e, f) {
var m2 = svg.createSVGMatrix();
m2.a = a;
m2.b = b;
m2.c = c;
m2.d = d;
m2.e = e;
m2.f = f;
xform = xform.multiply(m2);
return transform.call(ctx, a, b, c, d, e, f)
};
var setTransform = ctx.setTransform;
ctx.setTransform = function(a, b, c, d, e, f) {
xform.a = a;
xform.b = b;
xform.c = c;
xform.d = d;
xform.e = e;
xform.f = f;
return setTransform.call(ctx, a, b, c, d, e, f)
};
var pt = svg.createSVGPoint();
ctx.transformedPoint = function(x, y) {
pt.x = x;
pt.y = y;
return pt.matrixTransform(xform.inverse())
}
}
</script>
</body>
</html>
页:
[1]