js实现图片的缩放、移动、旋转、拖拽

最新推荐文章于 2024-04-15 10:09:15 发布
最新推荐文章于 2024-04-15 10:09:15 发布
阅读量4.2k 收藏 18
点赞数 3
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbguolei/article/details/114208025
版权

JS代码

<script type="text/javascript">
    function load() {
        init();
    }
        // 缩放图片
        function imgToSize(oBool) {
            var pic = document.getElementById("pic");
            pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';
            text.defaultValue=pic.style.zoom;
        }
        //还原尺寸
        function restore() {
            var pic = document.getElementById("pic");            
            pic.style.zoom = '100%';
            pic.style.left = "0px";
            pic.style.top = "0px";
            text.defaultValue=pic.style.zoom;
        }
        // 旋转图片
        var current = 0;
        function imgRoll(direction) {
            var pic = document.getElementById("pic");
            if (direction == "left") {
                current = (current - 90) % 360;
            }
            else if (direction == "right") {
                current = (current + 90) % 360;
            }
            pic.style.transform = 'rotate(' + current + 'deg)';
        }
        //图片拖拽
        drag = 0;
        move = 0;
        function mousedown() {
            if (drag) {
                X1 = window.event.x - parseInt(pic.style.left);
                Y1 = window.event.y - parseInt(pic.style.top);
                move = 1;
            }
        }
        function onmouseover() {
            drag = 1;
        }
        function mouseStop() {
            window.event.returnValue = false;
        }
        function mousemove() {
            if (move) {
                pic.style.left = (window.event.x - X1) + "px";
                pic.style.top = (window.event.y - Y1) + "px";
            }
        }
        function mouseup() {
            move = 0;
        }
        function init() {
            var pic = document.getElementById("pic");
            pic.style.zoom="100%";
            pic.style.left="0px";
            pic.style.top="0px";
            pic.style.position="relative";
            pic.style.cursor="move";
            document.all.pic.onmouseover = onmouseover;
            document.all.pic.onmousemove = mousemove;
            document.all.pic.onmousedown = mousedown;
            document.all.pic.onmouseup = mouseup;
            document.all.pic.ondragstart = mouseStop;
        }
    </script>

html代码：

<body onload="load()">
    <div style="text-align:center;">
        <img id="pic" src="landscape-4615578_960_720.webp.jpg" />
    </div>
<br/>
<div class="btn">
    <button class="btnleft" onclick="imgRoll('left');">左转</button>
    <button class="btnright" onclick="imgRoll('right');">右转</button>
    <button class="btnup" onclick="imgToSize(1);">放大</button>
    <button class="btndown" onclick="imgToSize(0);">缩小</button>
    <button class="btnreturn" onclick="restore();">还原</button>
​
</div>
</body>

效果图：

 

zbguolei
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js图片随鼠标移动,旋转,拉伸
learn8more的博客
11-12 1716
效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过 本博客源码:https://github.com/shengbid/vue-demo把这个功能放在vue项目里了, 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 我主要讲一下实现思路, 首先是移动,这个比较简单 这里我用的是鼠标事件的pageX,pageY,因为这个获取的是鼠标距文档左上角的坐标,不受滚动条影响 画一张图来演示 ...
JS图片img旋转、放大、缩小
zhoujans的专栏
09-27 9021
HTML代码： <div id="outerdiv"> <div> <img id="bigimg" src="" /> </div> </div> JS代码： <script> $(function(){ $('#uploadImagefileLists').on('click', '.im...
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
javascript js拖拽缩放
04-14
javascript js拖拽缩放 可以任意缩小放大
Js实现任意位置缩放图片，深入理解背后原理
最新发布
weixin_59837683的博客
04-15 774
本文将用一个简单的例子详细讲解如何用原生JS一步步实现完整的任意位置缩放图片功能，无任何第三方依赖，指针事件进行多端统一的事件监听，干货满满。
js实现图片放大缩小功能
qq_42077317的博客
03-19 9866
在web项目中，用到js来实现图片的放大缩小功能，在这里是通过zoomify来实现，并在这个基础上进行二次改进，已达到更满意的效果。 1.下面是展示的效果： 通过对zoomifyjs改进，达到上述效果。 2.下面是具体实现的代码： var currScale=1; var currRotate=0; var currScaleX=0; var currScaleY=0; ;(function($){ // initialization Zoomify = function (element, op
js实现图片的拖拽与缩放
qq_47657875的博客
08-30 364
【代码】实现图片的拖拽与缩放。
纯js实现头像上传预览加剪裁效果
wangzhneg123的博客
02-15 777
效果展示： 代码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;头像上传预览加剪裁效果&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.7.2/jquery
原始js实现图片的放大缩小，拖拽，截取指定部分
WuQingLaoXingXing的博客
07-26 1272
定义结构 <div class="img-intercep-wrap"> <div class="pic_wrapper"> <img src="./1.jpg"> <canvas class="pic_show"></canvas> </div> <button class="translate">截取</butt..
基于hammerjs封装旋转 拖拽 移动 缩放
01-13
使用方法方便简单，直接 调用drag('#test')就ok
JS+Html图片放大缩小旋转拖动效果
10-30
根据网上找的代码修改后的成品，实现了图片的方法，缩小，旋转，拖动查看等功能
实现canvas 图片拖拽旋转移动 点击转成base64
04-14
使用hammer.js监听触控时产生的位移，并用Jcanvas.js画出来，从而实现在canvas画布内进行手势的拖拽 旋转 移动 缩放功能.点击按钮获取画布内的base64，并显示. 测试时请放在tomcat内，并手机访问. 不足：canvas加载...
JavaScript实现拖拽和缩放效果
11-19
JavaScript实现拖拽和缩放效果是网页交互中常见的功能，主要应用于各种图形界面或自定义控件的操作。本文将详细讲解如何使用JavaScript实现这一功能。 首先，我们需要创建一个HTML结构来展示可拖动和可缩放的元素。...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
热门推荐
weixin_46022934的博客
12-20 1万+
背景与效果图 1.背景如下（功能图）： 2.效果图如下： 拖拽后的效果 缩放的效果 放大的效果 一、功能：支持鼠标长按拖拽 1.鼠标事件： 2.拖拽功能流程 3.拖拽部分代码如下 二、功能：滚轮控制图片放大缩小 1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患) 2.功能流程： 3.具体代码如下： 三、案例功能的完整代码如下： 四、总结(一定要看，功能是有坑的)
图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
weixin_42137028的博客
01-29 1787
先上效果演示：功能说明选择图片区域并剪裁为头像Html部分页面分左右两部分：左边显示遮罩图片的缩放与拖动，右边显示剪裁后图片的预览<div class="content"> <div class="left"> <div class="img-wrap"> <img class="img-select" sr...
前端js实现canves画布中拖拽、放大、缩小、旋转图片和文字，设置背景图片，导出
weixin_46382293的博客
12-16 2898
最近在研究canves，想实现一个可以在画布中操作上传的内容，不经意间发现了个插件Fabric.js。Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。image。
javascript实现对图片的随意拖拽,放大缩小
xiangqin的博客
06-26 1771
【JS】基于javascript实现对图片的随意拖拽,放大缩小 最近写项目的过程中需要对图片进行一个操作，点击之后弹出图片，在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小，双击图片恢复原图！对于我们这样后台程序员而言，这种前台效果实现起来确实有点勉强，在经过半个小时挣扎之后，终于完成效果，发表上来，以供广大后台程序员借鉴吧！ 第一步： body之内的代码如下： 1 2 ...
js设置图片放大缩小拖动
zhou13528482267的博客
11-13 894
思路： 在外层box进行相对定位relative，img设置绝对定位absolute；通过监听滚轮事件（wheel），设置样式缩放中心点（transformOrigin）和缩放转换（transform）；获取到图片大小和位置，设置对应图片宽度高度和top、left偏移；鼠标按下事件（mousedown）和鼠标移动事件（onmousemove），得出图片移动偏移量。
canvas实现图片缩放、移动、旋转
06-07
要实现图片的缩放、移动和旋转，可以利用HTML5中的canvas元素和JavaScript来实现。具体的步骤如下： 1. 在HTML中创建canvas元素，并设置它的宽度和高度，以及一个放置图片的容器元素。 ```html <canvas id="myCanvas" width="500" height="500"></canvas> <div id="image-container"></div> ``` 2. 在JavaScript中，获取canvas元素和容器元素，并创建一个Image对象来加载图片。 ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { // 图片加载完成后执行以下代码 }; img.src = "path/to/image.jpg"; ``` 3. 在Image对象加载完成后，将它绘制到canvas上，并将canvas中的图像转换为一个可缩放、可旋转、可拖动的对象。 ```javascript var container = document.getElementById("image-container"); var imageObject = { x: canvas.width / 2, // 图片中心点的x坐标 y: canvas.height / 2, // 图片中心点的y坐标 width: img.width, // 图片的宽度 height: img.height, // 图片的高度 angle: 0, // 图片的旋转角度，单位为弧度 scale: 1 // 图片的缩放比例 }; // 将图片绘制到canvas上 ctx.drawImage(img, 0, 0); // 将canvas中的图像转换为一个可缩放、可旋转、可拖动的对象 var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); container.style.width = canvas.width + "px"; container.style.height = canvas.height + "px"; container.style.backgroundImage = "url(" + canvas.toDataURL() + ")"; container.style.backgroundSize = "100% 100%"; ``` 4. 实现图片的缩放、移动和旋转功能。对于缩放和旋转，可以利用CSS3的transform属性来实现；对于移动，可以通过修改图片对象的x和y属性来实现。 ```javascript // 缩放图片 function zoomImage(scale) { imageObject.scale *= scale; container.style.transform = "rotate(" + imageObject.angle + "rad) scale(" + imageObject.scale + ")"; } // 旋转图片 function rotateImage(angle) { imageObject.angle += angle; container.style.transform = "rotate(" + imageObject.angle + "rad) scale(" + imageObject.scale + ")"; } // 移动图片 function moveImage(dx, dy) { imageObject.x += dx; imageObject.y += dy; container.style.left = imageObject.x - imageObject.width / 2 + "px"; container.style.top = imageObject.y - imageObject.height / 2 + "px"; } ``` 以上代码仅为示例，具体实现方式可能会因具体需求而有所不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值