码迷，mamicode.com
首页 > Web开发 > 详细

图片上传，图片旋转，拖拽

时间：2016-11-25 12:07:56      阅读：216      评论：0      收藏：0      [点我收藏+]

标签：技术分享   自己   调整   return   tle   define   class   idt   eth   

能够支持IE，谷歌，火狐浏览器（兼容多浏览器不容易啊）

    下面仅提供核心思想和部分代码：
     

     拖拽:是使用网上现成的JS代码，在此基础上进行适当的修改即可满足自己的需求，最主要的就是判定拖拽的范围，上传的图片不能给拖没了，所以加上个范围限定，判断超出了这个范围便拖拽无效果。

    旋转与缩放要区分浏览器..

    旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相关的一些方法来实现（跟HTML5类似或者说就是Html5,本人才疏学浅理解不透）,并且旋转相关的数据需要自己进行数学计算。

    缩放: IE下要实现图片的缩放很简单只要把img标签对应的width与length值增大或者缩小就可以,但是火狐和谷歌下的canvas标签是一个完全不同的处理方式。这是比较纠结的...详细可以看看代码.

    

    效果图如下：

技术分享

 

 

    本身这个功能是在一个大项目中由于机密不能在大项目中展示运行,我后来自己简单的建了一个小项目单独的运行这个功能。

    部分代码如下：

  

[plain] view plain copy
 
 print?
  1. /**  
  2.  * 图片旋转方法  
  3.  * @param id 被旋转的图片  
  4.  * @param angle 旋转的角度  
  5.  * @param whence (此参数不传的话 旋转的角度会默认累加)  
  6.  */  
  7. function rotate(id,angle,whence) {    
  8.     var p = document.getElementById(id);    
  9.     
  10.     // we store the angle inside the image tag for persistence    
  11.     if (!whence) {    
  12.         p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;  //whence (此参数不传的话 旋转的角度会默认累加)  
  13.     } else {    
  14.         p.angle = angle;    
  15.     }    
  16.     
  17.     if (p.angle >= 0) {    
  18.         var rotation = Math.PI * p.angle / 180;    
  19.     } else {    
  20.         var rotation = Math.PI * (360+p.angle) / 180;    
  21.     }    
  22.     var costheta = Math.cos(rotation);    
  23.     var sintheta = Math.sin(rotation);  //数学知识....  
  24.     if (document.all && !window.opera) {//IE下 用img标签    
  25.         var canvas = document.createElement(‘img‘);     
  26.         canvas.src = p.src;  //将之前图片的src,height,width值赋予canvas  
  27.         canvas.height = p.height;    
  28.         canvas.width = p.width;   
  29.         //用IE的滤镜(用了矩阵知识)实现图片的旋转展示  
  30.         canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod=‘auto expand‘)";                   
  31.     } else {    
  32.         //火狐谷歌浏览器下用canvas标签  
  33.         var canvas = document.createElement(‘canvas‘);    
  34.         if (!p.oImage) {    
  35.             //新建canvas标签的oImage对象 用来存储图片信息  
  36.             canvas.oImage = new Image();    
  37.             canvas.oImage.src = p.src;   
  38.             canvas.oImage.height = p.height;    
  39.             canvas.oImage.width = p.width;  
  40.              
  41.         } else {    
  42.             canvas.oImage = p.oImage;    
  43.         }    
  44.         //计算旋转之后的canvas标签的长和宽（不是图片的长和宽) 旋转之后oImage的height与width值不变  
  45.         canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);  //数学知识...  
  46.         canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);    
  47.           
  48.         //调用一些底层方法进行旋转并展示旋转之后的图片  
  49.         var context = canvas.getContext(‘2d‘);    
  50.         context.save();    
  51.         if (rotation <= Math.PI/2) {    
  52.             context.translate(sintheta*canvas.oImage.height,0);    
  53.         } else if (rotation <= Math.PI) {    
  54.             context.translate(canvas.width,-costheta*canvas.oImage.height);    
  55.         } else if (rotation <= 1.5*Math.PI) {    
  56.             context.translate(-costheta*canvas.oImage.width,canvas.height);    
  57.         } else {    
  58.             context.translate(0,-sintheta*canvas.oImage.width);    
  59.         }    
  60.         context.rotate(rotation);    
  61.         context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);  //将旋转之后的oImage对象绘制出来  
  62.         context.restore();   
  63.     }    
  64.     canvas.id = p.id;    
  65.     canvas.angle = p.angle;    
  66.     p.parentNode.replaceChild(canvas, p);  //将新的canvas 标签 替换之前的标签 从而可以展示旋转之后的图片  
  67.       
  68.         //设置canvas元素的top值与left值     (图片旋转之后top值与left值都发生了变化 现在是要满足图片绕自己的中心的进行旋转，所以旋转之后要进行top与left值的设定)  
  69.         canvas.style.top =(y_center-(canvas.offsetHeight)/2)+"px";//注意加上"px"  
  70.         canvas.style.left = x_center-canvas.offsetWidth/2+"px";  
  71.            
  72.         var imgpos = getStylepos(canvas);//与ImageCopper.js的里面的checkcutpos一样的效果  
  73.         max_x = Math.max(offsetx, offsetx + cutx - canvas.offsetWidth);  
  74.         min_x = Math.min(offsetx + cutx - canvas.offsetWidth, offsetx);  
  75.         if (imgpos.x > max_x)  
  76.             canvas.style.left = max_x + ‘px‘;  
  77.         else if (imgpos.x < min_x)  
  78.             canvas.style.left = min_x + ‘px‘;  
  79.   
  80.         max_y = Math.max(offsety, offsety + cuty - canvas.offsetHeight);  
  81.         min_y = Math.min(offsety + cuty - canvas.offsetHeight, offsety);  
  82.         if (imgpos.y > max_y)  
  83.             canvas.style.top = max_y + ‘px‘;  
  84.         else if (imgpos.y < min_y)  
  85.             canvas.style.top = min_y + ‘px‘;  
  86.   
  87.         x_center = Math.round(canvas.offsetWidth/2)+imgpos.x;//top值与left值变化后需要重新计算图片的中心点  
  88.         if(x_center -142<=1 &&x_center -142>=-1)  
  89.         {  
  90.             //防止图片在预览区中心点旋转之后 导致中心点发生微小的偏离  
  91.             x_center=142;  
  92.         }         
  93.         y_center = Math.round(canvas.offsetHeight/2)+imgpos.y;  
  94.         if(y_center +133<=1 && y_center +133>=-1){  
  95.             y_center=-133;  
  96.         }      
  97. }   

 

 

 

 

[plain] view plain copy
 
 print?
    1. //图片逐步缩放  
    2.     function imageresize(flag) {  
    3.         //增加浏览器类型判断  
    4.         var userAgent = navigator.userAgent.toLowerCase();    
    5.         jQuery.browser = {    
    6.             version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,‘0‘])[1],    
    7.             safari: /safari/.test( userAgent ),    
    8.             opera: /opera/.test( userAgent ),    
    9.             msie: /msie/.test( userAgent ),    
    10.             firefox: /firefox/.test( userAgent ),  
    11.             chrome: /chrome/.test( userAgent )   
    12.         };   
    13.         var rate = 1.08;//此值的设定是为了满足正好放大10次缩小10次这种需求的(需求要求只能放大一倍缩小一倍，为了点击10次正好放大一倍rate就设为了此值)  
    14.         if($.browser.firefox || $.browser.chrome)  
    15.         {  
    16.             rate = 1.07;  
    17.         }  
    18.           
    19.         cut_div = document.getElementById(‘cut_div‘);  
    20.         if (flag) {//放大  
    21.             if (zoom > 2*standardzoom) //超过标准比例的2倍的话就不能进行缩放  
    22.                 return;  
    23.             zoom = zoom * rate;           
    24.         } else {//缩小  
    25.             if (zoom < standardzoom/2)  
    26.                 return;  
    27.             zoom = zoom / rate;           
    28.         }  
    29.         if (document.all && !window.opera) {//IE浏览器下  
    30.             cut_img.width = Math.round(imgdefw * zoom); //只需要改变img标签的width和height 就可以实现缩放了  
    31.             cut_img.height = Math.round(imgdefh * zoom);  
    32.             cut_img.style.top =(y_center-(cut_img.offsetHeight)/2)+"px"; //缩放之后 图片的中心不发生变化 top与left值发生相应的变化  
    33.             cut_img.style.left = x_center-cut_img.offsetWidth/2+"px";  
    34.         }else{//火狐谷歌等浏览器  
    35. //首先改变canvas.oImage的width与height属性的值  
    36.             if(flag){  
    37.                 var image_y=cut_img.oImage.height*rate;  
    38.                 var image_x=cut_img.oImage.width*rate;  
    39.             }else{  
    40.                 var image_y=cut_img.oImage.height/rate;  
    41.                 var image_x=cut_img.oImage.width/rate;  
    42.             }  
    43.               
    44.             cut_img.oImage.height=image_y;  
    45.             cut_img.oImage.width=image_x;             
    46.             roTateRight(‘cut_img‘,0);//旋转0度以调整canvas的width与height值和left与top的值  
    47.         }  
    48.           
    49.         checkcutpos();  
    50.     } 

图片上传，图片旋转，拖拽

标签：技术分享   自己   调整   return   tle   define   class   idt   eth   

原文地址：http://www.cnblogs.com/wangking/p/6100603.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！