目录结构：
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) / 2imgY = (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) / 2imgY = (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) / 2imgY = (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) / 2imgY = (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) / 2imgY = (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) / 2imgY = (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";}
