图片旋转+滚动鼠标中间对图片放大缩小

目录结构：

html-pictureDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">  /*css代码*/
        * {
            margin: 0px;
            padding: 0px;
          }
 
        #pandiv {
            width: 700px;
            height: 500px;
        }
 
        #control {
            background: #ccc;
            opacity: 0.7;
            width: 200px;
            height: 30px;
            display: none;
            padding-top: 5px;
            position: absolute;
            left: 250px;
            top: 450px;
        }
 
        #canvas {
            border: 1px solid black;
        }
 
        #left {
            float: left;
            display: block;
        }
 
        #right {
            float: right;
            display: block;
        }
</style>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

<link >
</head>
<body>
<div id="pandiv">
        <img src="../image/3.png" style="display: none;">
        <canvas id="canvas" width="700" height="500" style="cursor: default;"> </canvas>
        <div id="control" style="display: none;">
        <img id="left" src="../image/left1.png" onclick="rateImage(270)">  /*左旋转*/
        <img id="right" src="../image/right1.png" onclick="rateImage(90)"> /*右旋转*/
    </div>
    </div>
    <script type="text/javascript" src="../js/pictureJs.js"></script>
</body>
</html>

JS-pictureJs.js

/**
 * 
 */
 
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");
    img = new Image();
    img.src = imageUrl;
    img.id = "pic";
 
    loadImage();
    drawImage();
}
 
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 = 'mouse down';
    }
}
/**鼠标弹起*/
document.body.onmouseup = function() {
    isMouseDown = false;
    canvas.style.cursor = "default";
    document.title = 'mouse up';
}
/**鼠标移动*/
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";
}