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

Posted 我爱吃小丸子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片上传，图片旋转，拖拽相关的知识，希望对你有一定的参考价值。

能够支持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.     } 

以上是关于图片上传，图片旋转，拖拽的主要内容，如果未能解决你的问题，请参考以下文章

图片拖拽上传至服务器

h5拖拽上传图片

图片上传拖拽排序

PHP仿微信多图片预览上传

div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

antd 表单图片上传、表格拖拽排序