js实现图片旋转 js滚动鼠标中间对图片放大缩小

2024-09-29 03:20:36

从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。

现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。

这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。

我先给大家展示一下效果图。

鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。

1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。

2.js中要在图片加载完成之后在方法

主要的地方就是这个啦，其它就是js方法了，我就不一一解释了，有js功底的能看懂，如果有地方不懂，或者需要改进的就在下面评论出来，大家一起学习。

下面我就贴出代码了，需要演示项目源码的小伙伴也评论出来，我把演示项目发出来。

这是目录结构，也不需要什么jar包。image下面就是图片啦。

html页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/pictureCss.css" rel="external nofollow" />
<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>

css样式代码

@CHARSET "UTF-8";

* {
  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;
}

核心重点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";
}

这就是实现这个图片旋转，放大，缩小的演示代码。

由于这几天在做一个切换图片的功能，点击上一页，下一页实现图片切换，这个功能以及快全部实现了，到时候我搭建一个框架的演示项目，来给大家展示图片切换上一张，下一张，也包括旋转，放大缩小功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js自制图片放大镜功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下注释: small img size:600x400 big img size:1200x800 原理: 1.大图是小图的 2倍整 2.大图以小图片中心点为中心 a.transform : translate(-50%,-50%) b.(rate-0.5)*50% c.clip : rect(t,r,b,l) 以小图边界为边界 3.rect必须有absolute 4.获取鼠标
原生js代码实现图片放大境效果

今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE
原生js实现图片放大缩小计时器效果

知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器判断当图片放大缩小到固定大小时,清除计时器完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
利用javascript实现的三种图片放大镜效果实例（附源码）

本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端:大家可以直接下载源码进行学习参考,下面来一起学习学习吧. 实现效果如下效果一效果二效果三调用代码如下 //前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: zoom('#item').init(); //这里写0,或者不写都可以,默认0 zoom('#item').init(1); //效果2 zoom('#item').init(2); //效果3 //另外还有一个参数,就是选择器后面写
原生javascript实现图片放大镜效果

当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t
js图片放大镜效果实现方法详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
js实现图片放大展示效果

图片放大展示效果的实现代码,可动态生成图片,每次点击看原图的时候为当前id里面的图片 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="node_modules/jquery/jquery.js"></script> <style> *{
angularjs点击图片放大实现上传图片预览

本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
JS图片放大效果简单实现代码

本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30p
JS实现图片放大缩小的方法

本文实例讲述了JS实现图片放大缩小的方法.分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来.我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试):第二种方法只能兼容IE. 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inhe

js实现图片旋转 js滚动鼠标中间对图片放大缩小

相关推荐

随机推荐