div内部实现图片旋转、放大、缩小、拖拽

药药，切克闹，一人我编码累，累把那bug写成堆。秋高气爽空气干燥你一定dei多喝水，过完了这周我就要回去、趁还有几天、你尽情的来跟我怼~~~

新的一年，很久没更博客了，眼看十一要来了，听说过了十一就等过年了，但是感觉刚过完年一样，心里黯然神伤，更博一篇以表对小白驹过隙之神速聊以慰藉下……

在开发中这样一个场景，web应用程序某处功能会接收来自各个户上传的图片，后台有个图片查看功能，实际生产过程中的结果出现了用户上传的图片是倒转的或者图片因为远距离拍摄上传的比较模糊的情况。

1、解决图片角度的问题

大概原理很简单，切换HTML元素对象（图片）的class。如下CSS代码：

.rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

.rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}

.rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。再次提示下，IE8浏览器是使用的是-ms-filter直接filter没有效果。
这里使用的是CSS3+filter滤镜的方法，所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。

2、图片放大缩小

即为调整图片的宽和高。如下核心代码

  //放大缩小图片

        function imgToSize(size) {

            var img = $("#rotImg");

            var oWidth = img.width(); //取得图片的实际宽度

            var oHeight = img.height(); //取得图片的实际高度

            img.width(oWidth + size);

            img.height(oHeight + size / oWidth * oHeight);

        }

3、区域内拖动图片

图片放大超过父级容器时，支持图片在容器内拖动，在mousedown的条件下绑定mousemove，计算拖拽区域大小，核心代码如下：

 $(document).bind('mousemove.imgview', function (event) {

                if ($img.data('mousedown')) {

                    var dx = event.pageX - settings['pageX'];

                    var dy = event.pageY - settings['pageY'];

                    if ((dx == 0) && (dy == 0)) {

                        return false;

                    }

                    var newX = parseInt($img.css('left')) + dx;

                    if (newX > 0) newX = 0;

                    if (newX < settings['width'] - $img.width())

                        newX = settings['width'] - $img.width() + 1;

                    var newY = parseInt($img.css('top')) + dy;

                    if (newY > 0) newY = 0;

                    if (newY < settings['height'] - $img.height())

                        newY = settings['height'] - $img.height() + 1;

                    if (settings['width'] >= $img.width()) {

                        newX = settings['width'] / 2 - $img.width() / 2;

                    }

                    if (settings['height'] >= $img.height()) {

                        newY = settings['height'] / 2 - $img.height() / 2;

                    }

                    $img.css('left', newX + 'px');

                    $img.css('top', newY + 'px');

                    settings['pageX'] = event.pageX;

                    settings['pageY'] = event.pageY;

                    $img.data('cannot_minimize', true);

                }

                return false;

            });

4、综合功能实现代码如下，运行请底部下载demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .rot1 {

            -moz-transform: rotate(90deg);

            -webkit-transform: rotate(90deg);

            transform: rotate(90deg);

            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

        }

        .rot2 {

            -moz-transform: rotate(180deg);

            -webkit-transform: rotate(180deg);

            transform: rotate(180deg);

            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

        }

        .rot3 {

            -moz-transform: rotate(270deg);

            -webkit-transform: rotate(270deg);

            transform: rotate(270deg);

            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

            -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        }

        #imageView_container{

            border: 2px solid #000000;

        }

    </style>

    <script src="js/jquery-1.10.2.js"></script>

    <script src="js/jquery-browser.js"></script>

    <script src="js/jquery.imageView.js"></script>

</head>

<body>

<div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; ">

    <img src="data:images/1.jpg" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" />

</div>

<div style="padding-top:5px;">

    <input type="button" value="放大" onclick="imgToSize(100)">

    <input type="button" value="缩小" onclick="imgToSize(-100);">

    <input type="button" value="向右旋转" id="rotRight">

    <input type="button" value="向左旋转" id="rotLeft">

</div>

<script type="text/javascript">

    $(function () {

    var param = {

        right: document.getElementById("rotRight"),

        left: document.getElementById("rotLeft"),

        img: document.getElementById("rotImg"),

        rot: 0

    };

    var fun = {

        right: function () {

            param.rot += 1;

            param.img.className = "rot" + param.rot;

            if (param.rot === 3) {

                param.rot = -1;

            }

        },

        left: function () {

            param.rot -= 1;

            if (param.rot === -1) {

                param.rot = 3;

            }

            param.img.className = "rot" + param.rot;

        }

    };

    param.right.onclick = function () {

        fun.right();

        return false;

    };

    param.left.onclick = function () {

        fun.left();

        return false;

    };

    $('#imageView_container').imageView({ width: 800, height: 500 });

    });

    var size = 0;

    //放大缩小图片

    function imgToSize(size) {

        var img = $("#rotImg");

        var oWidth = img.width(); //取得图片的实际宽度

        var oHeight = img.height(); //取得图片的实际高度

        img.width(oWidth + size);

        img.height(oHeight + size / oWidth * oHeight);

    }

</script>

</body>

</html>

5、最终效果如下图所示：

6、示例代码下载地址： https://github.com/mszhtech/ImageView

div内部实现图片旋转、放大、缩小、拖拽的更多相关文章

JS中图片的放大缩小没反应
这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...
JS控制图片拖动放大缩小旋转支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
Android DIY之路（一）指定区域多图片合成放大缩小镜像旋转等（转）
惯例先看效果图 // 注意做类似这种模板功能时候方位由后台数据提供,这里我们用假数据 4个点或者xy 加区域来做示例 //一开始我们公司用的是透明盖住操作图片但发现局限性较大.后来直接限定区 ...
jquery 实现点击图片居住放大缩小
该功能是基于jquery实现的,所以第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...
Android 本地/网路下载图片实现放大缩小
Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...
Java界面程序实现图片的放大缩小
Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...
用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
Android 图片的放大缩小拖拉
package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

随机推荐

面试 | 商汤科技面试经历之Promise红绿灯的实现
说在前面说实话,刚开始在听到这个面试题的实话,我是诧异的,红绿灯?这不是单片机.FPGA.F28335.PLC的实验吗?! 而且还要用Promise去写,当时我确实没思路,只好硬着头皮去写,下来再r ...
git/github常用指令、入门
git的基本常用指令: 1.cd:切换路径 2.mkdir:进入文件夹目录 3.pwd:显示当前目录的路径 4.git init:把当前的目录变成可以管理的git仓库,生成隐藏.git文件 5.git ...
[js高手之路]性能优化技巧 - 缓存与函数重载实战
所谓缓存,通俗点讲就是把已经做过的事情结果先暂时存起来,下次再做同样的事情,不用再重新去做,只要把之前的存的结果拿出来用即可,很明显大大提升了效率.他的应用场景非常广泛.如: 1.缓存ajax结果,大 ...
HashMap和ConcurrentHashMap流程图
本文表达HashMap和ConcurrentHashMap中的put()方法的执行流程图,基于JDK1.8的源码执行过程. HashMap的put()方法: ConcurrentHashMap的put ...
QQ无法通过ISA2006&TMG2010代理收发图片问题解决
近期公司有业务需求通过TMG访问QQ,但配置多次均无法通过QQ收发图片,文字输入正常. 目前已解决,供参考: 这个问题是SSL端口默认使用了443,但QQ的离线文件不使用这个端口.所以ISA会把QQ的 ...
html:table属性cellpadding
cellpadding:单元格边距(空白区域) colspan:可以横跨的列数(td/th都算一列) 详细:http://www.dreamdu.com/xhtml/attribute_cellpad ...
Sublime Text 安装插件
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写检查,书签,完整的 ...
mysql时间戳的获取
时间戳函数:current_timestamp() 在此位置添加时间戳函数. 然后整体的写法就是下图这样: 根据当前时间戳更新有没有打钩将决定你的时间是什么时间(一个是数据完成写入的时间,一个时间戳回 ...
JAVA基础第六组（5道题）
26.[程序26] 题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. 1.程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句 ...
201521123119《Java程序设计》第6周学习总结
1. 本周学习总结 2. 书面作业 Q1.clone方法 Q1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 只能在本类内部或者和 ...

div内部实现图片旋转、放大、缩小、拖拽

div内部实现图片旋转、放大、缩小、拖拽的更多相关文章

随机推荐

热门专题