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

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

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

1、解决图片角度的问题

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

  1. .rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
  2. .rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
  3. .rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

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

2、图片放大缩小

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

  1.   //放大缩小图片
  2.         function imgToSize(size) {
  3.             var img = $("#rotImg");
  4.             var oWidth = img.width(); //取得图片的实际宽度
  5.             var oHeight = img.height(); //取得图片的实际高度
  6.  
  7.             img.width(oWidth + size);
  8.             img.height(oHeight + size / oWidth * oHeight);
  9.         }

3、区域内拖动图片

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

  1.  $(document).bind('mousemove.imgview', function (event) {
  2.                 if ($img.data('mousedown')) {
  3.                     var dx = event.pageX - settings['pageX'];
  4.                     var dy = event.pageY - settings['pageY'];
  5.                     if ((dx == 0) && (dy == 0)) {
  6.                         return false;
  7.                     }
  8.  
  9.                     var newX = parseInt($img.css('left')) + dx;
  10.                     if (newX > 0) newX = 0;
  11.                     if (newX < settings['width'] - $img.width())
  12.                         newX = settings['width'] - $img.width() + 1;
  13.                     var newY = parseInt($img.css('top')) + dy;
  14.                     if (newY > 0) newY = 0;
  15.                     if (newY < settings['height'] - $img.height())
  16.                         newY = settings['height'] - $img.height() + 1;
  17.  
  18.                     if (settings['width'] >= $img.width()) {
  19.                         newX = settings['width'] / 2 - $img.width() / 2;
  20.                     }
  21.                     if (settings['height'] >= $img.height()) {
  22.                         newY = settings['height'] / 2 - $img.height() / 2;
  23.                     }
  24.  
  25.                     $img.css('left', newX + 'px');
  26.                     $img.css('top', newY + 'px');
  27.  
  28.                     settings['pageX'] = event.pageX;
  29.                     settings['pageY'] = event.pageY;
  30.                     $img.data('cannot_minimize', true);
  31.                 }
  32.                 return false;
  33.             });

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style type="text/css">
  8.         .rot1 {
  9.             -moz-transform: rotate(90deg);
  10.             -webkit-transform: rotate(90deg);
  11.             transform: rotate(90deg);
  12.             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  13.             -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  14.         }
  15.  
  16.         .rot2 {
  17.             -moz-transform: rotate(180deg);
  18.             -webkit-transform: rotate(180deg);
  19.             transform: rotate(180deg);
  20.             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  21.             -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  22.         }
  23.  
  24.         .rot3 {
  25.             -moz-transform: rotate(270deg);
  26.             -webkit-transform: rotate(270deg);
  27.             transform: rotate(270deg);
  28.             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  29.             -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  30.         }
  31.  
  32.         #imageView_container{
  33.             border: 2px solid #000000;
  34.         }
  35.     </style>
  36.  
  37.     <script src="js/jquery-1.10.2.js"></script>
  38.     <script src="js/jquery-browser.js"></script>
  39.     <script src="js/jquery.imageView.js"></script>
  40. </head>
  41. <body>
  42. <div id="imageView_container" style="overflow: hidden; position: relative; width: 800px; height: 500px; ">
  43.     <img src="data:images/1.jpg" id="rotImg" style="cursor: move; visibility: visible; position: absolute; width: 800px; height: 500px;" />
  44. </div>
  45. <div style="padding-top:5px;">
  46.     <input type="button" value="放大" onclick="imgToSize(100)">
  47.     <input type="button" value="缩小" onclick="imgToSize(-100);">
  48.     <input type="button" value="向右旋转" id="rotRight">
  49.     <input type="button" value="向左旋转" id="rotLeft">
  50. </div>
  51.  
  52. <script type="text/javascript">
  53.     $(function () {
  54.     var param = {
  55.         right: document.getElementById("rotRight"),
  56.         left: document.getElementById("rotLeft"),
  57.         img: document.getElementById("rotImg"),
  58.         rot: 0
  59.     };
  60.  
  61.     var fun = {
  62.         right: function () {
  63.             param.rot += 1;
  64.             param.img.className = "rot" + param.rot;
  65.             if (param.rot === 3) {
  66.                 param.rot = -1;
  67.             }
  68.         },
  69.         left: function () {
  70.             param.rot -= 1;
  71.             if (param.rot === -1) {
  72.                 param.rot = 3;
  73.             }
  74.             param.img.className = "rot" + param.rot;
  75.         }
  76.     };
  77.     param.right.onclick = function () {
  78.         fun.right();
  79.         return false;
  80.     };
  81.     param.left.onclick = function () {
  82.         fun.left();
  83.         return false;
  84.     };
  85.  
  86.     $('#imageView_container').imageView({ width: 800, height: 500 });
  87.  
  88.     });
  89.  
  90.     var size = 0;
  91.  
  92.     //放大缩小图片
  93.     function imgToSize(size) {
  94.         var img = $("#rotImg");
  95.         var oWidth = img.width(); //取得图片的实际宽度
  96.         var oHeight = img.height(); //取得图片的实际高度
  97.  
  98.         img.width(oWidth + size);
  99.         img.height(oHeight + size / oWidth * oHeight);
  100.     }
  101. </script>
  102. </body>
  103. </html>

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

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

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

  1. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  2. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  3. vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  4. Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  5. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  6. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  7. Java界面程序实现图片的放大缩小

    Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...

  8. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  9. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

随机推荐

  1. <经验杂谈>前端form提交导出数据

    之前在做列表的是总会遇到一些导出的功能,而在做导出的时候总是习惯于用get的方法将参数放在url上,这样一来就会有很多的弊端,一是url的参数长度有限,遇到有的参数很长的时候就会报错,二是也不太安全. ...

  2. Mysql数据库索引

    今天,我们来讲讲Mysql数据库的索引的一些东西,想必大家都知道索引能干吗?必然是查找数据表的时候,查找的速度快啊,尤其是那些几百万行的数据库,不建立索引,你是想考验用户的耐心吗?Mysql有多种存储 ...

  3. koa／redux middleware系统解析

    middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...

  4. MyBatis框架知识整理

    MyBatis框架 一.介绍: MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术---> Spring ...

  5. Android滑动控件.md

    1.概述 最近写代码临时加了个功能主要是滑动选择的功能效果图如下: 2.代码 这里主要是用属性动画做的 <ImageButton android:id="@+id/fab" ...

  6. Java：用Lambda表达式简化代码一例

    之前,调用第3方服务,每个方法都差不多“长”这样, 写起来啰嗦, 改起来麻烦, 还容易改漏. public void authorizeRoleToUser(Long userId, List< ...

  7. 学会数据库读写分离、分表分库——用Mycat，这一篇就够了！

    系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理本身优化也是非常重要的.主从.热备.分表分库等都是系统发展迟早会遇到的技术问题问题.Mycat是一 ...

  8. C#后台调用浏览器打开下载连接地址的三种方法

    一.从注册表中读取到本地计算机默认浏览器,然后调用下载. private void button1_Click(object sender, EventArgs e)   {       //从注册表 ...

  9. Java线程：线程栈模型

    要理解线程调度的原理,以及线程执行过程,必须理解线程栈模型. 线程栈是指某时刻时内存中线程调度的栈信息,当前调用的方法总是位于栈顶.线程栈的内容是随着程序的运行动态变化的,因此研究线程栈必须选择一个运 ...

  10. ★电车难题的n个坑爹变种

    哲学家都不会做的电车难题变异 此题会答清华北大 "电车难题(Trolley Problem)"是伦理学领域最为知名的思想实验之一,其内容大致是: 一个疯子把五个无辜的人绑在电车轨道 ...