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

最新推荐文章于 2021-08-09 13:49:23 发布
最新推荐文章于 2021-08-09 13:49:23 发布
阅读量243 收藏
点赞数
分类专栏： 前端技术
原文链接：https://www.cnblogs.com/chengpanpan/p/7119025.html
版权
目录结构：

image.png

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";
}
TARS_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 以鼠标为中心缩放图片
qq_43589960的博客
04-10 2613
原理 使用的绘制方法 void ctx.drawImage(image, dx, dy, dWidth, dHeight); 参数说明: dx image的左上角在目标canvas上 X 轴坐标。 dy image的左上角在目标canvas上 Y 轴坐标。 dWidth(可选) image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。 dHeight(可选) image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如
html 图片滚动 放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
weixin_29466045的博客
06-04 1217
从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。我先给大家展示一下效果图。鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。1.在引入js的时候...
js 鼠标滚动效果：图片放大缩小
全易
12-18 3312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
js以鼠标位置为中心的滑轮放大功能
一枚小前端
07-12 1159
代码来自网上，小小改动了下，可以用其他的东西替换页面中aaa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
weixin_31935793的博客
06-04 5363
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考，具体如下：今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。方法一：使用js和css3效果如图：这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：网易图片动画div.img {width: ...
鼠标移动到图片上实现图片的放大缩小
编程爱好者
02-26 7489
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeNam
js实现图片旋转 js滚动鼠标中间对图片放大缩小
10-19
在本文中，我们将探讨如何使用JavaScript（JS）实现图片的旋转和通过滚动鼠标中间键对图片进行放大缩小的功能。这个功能通常用于图像查看器或编辑器应用，为用户提供直观的交互体验。 首先，我们需要理解核心的技术...
图片放大、缩小、拖拽、旋转、全屏
07-23
这个名为"图片放大、缩小、拖拽、旋转、全屏"的项目专注于提供一套完整的解决方案，使用户能够对图片进行一系列交互操作，包括但不限于缩放、移动、旋转以及全屏显示。这在网页设计、图像展示应用或任何需要用户互动...
jQuery图片放大缩小旋转预览代码
06-24
实现图片放大缩小的效果，我们需要获取到原始图片的尺寸，然后通过改变图片的CSS属性`width`和`height`来调整大小。同时，为了保持图像比例，需要同时改变这两个值。我们可以监听鼠标的滚轮事件，根据滚动的方向来...
图片 滚动 放大缩小 旋转
10-09
在IT领域，图片的滚动、放大缩小和旋转是常见的图像处理功能，特别是在网页设计和图形用户界面（GUI）开发中。这两个压缩包文件——`iviewer-master.rar`和`mousewheel.zip`，可能包含了实现这些功能的源代码或者库...
JS鼠标为中心放大缩小旋转拖动
03-19
JS鼠标为中心放大缩小旋转(实现以鼠标为中心的滚动无限放大缩小)拖动旋转
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小js资源
09-12
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开查看
MFC鼠标中键拖动、同时滚轮缩放（根据鼠标位置）绘制的图形
08-20
1、VS2010开发的MFC对话框程序； 2、可利用中键拖动绘制的图形； 3、滚轮根据当前鼠标的位置缩放绘制的图形； 4、与AutoCAD及其他平面设计软件的鼠标功能相同。 5、可作为具有类似应用开发的模板、关键代码均提供详细的注释。
MFC图片自由鼠标交互（拖拽、鼠标滚动自由放大）的图片查看类
06-26
最近刚学GDI+，就想找个应用练练手，于是基于GDI+封装了此类，接口已经独立出来，使用十分方便，在MFC上直接使用（在VS2010 x64上编译，32位也可以），类的特定如下： 1.基于GDI+封装的类，文档和对话框可直接使用； 2.类初始化时可选择图片是否充满控件，充满的话，图片会适应控件的宽度进行缩放，但会保存原有的长宽比不变； 3.变换前后的坐标关系已经封装好，可直接调用； 4.缩放前后采样最临近点差值（windows图片查看器和PS都是采样这种差值方式，可能是因为效率比较高），具体差值方式可更改，参考一下GDI+就可以，如果想对图像像素进行操作，可使用GDI+的Bitmap类，可对图像像素点进行操作
js实现图片拖拽，定点缩放，旋转 （一）
MissRen920的博客
08-09 1350
首先我们先来实现最简单的图片的拖拽，在这之前你需要了解 offsetLsft/offsetTop, clientX/clientY, onmousedown/onmousemove/onmousup 这里不做深入的讲解，我们直接看代码吧，注释写的很详细了（目前兼容性暂时只考虑了谷歌浏览器，其他浏览器思路相同，自行拓展） html部分 <body> <div id="app"> <img id="img" src="https://g
Vue.js中结合jQuery.js实现在指定区域内图片的放大缩小、拖拽及旋转
小郝哥的博客
11-27 3002
Vue.js结合jQuery.js实现在指定区域内图片的放大缩小及拖拽 工作项目中，使用vue.js+require.js还有少量的JQuery.js组成的前端JS环境，样式用的element-ui，工作需求是要对APP端传到PC端页面的十几张甚至几十张图片进行显示，且与OCR识别图片中的信息进行人工比对，这就需要PC端的工作人员细致的查看图片，要支持在指定的div中图片可放大、缩小、可拖动。
图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
weixin_42137028的博客
01-29 1807
先上效果演示：功能说明选择图片区域并剪裁为头像Html部分页面分左右两部分：左边显示遮罩图片的缩放与拖动，右边显示剪裁后图片的预览<div class="content"> <div class="left"> <div class="img-wrap"> <img class="img-select" sr...
JS实现鼠标中心放大图片功能原理及实例演示
热门推荐
大V的博客
08-13 1万+
本文将介绍JS实现鼠标中心放大图片功能原理及实例演示
html实现图片放大缩小旋转
最新发布
05-29
要实现图片的放大缩小和旋转功能，可以使用HTML5的canvas和JavaScript来实现。以下是一个简单的示例代码： HTML部分： ```html <canvas id="myCanvas"></canvas> ``` JavaScript部分： ```javascript var canvas...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值