使用拖拽组件，vue-draggble，火狐浏览器的兼容问题

Posted 2023-05-11

参考技术A vue中使用拖拽组件，在谷歌 ie浏览器拖拽都没有问题，火狐浏览器拖拽时 会默认打开浏览器新窗口，所以在生命周期created时 禁掉

created()

    let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    if (userAgent.indexOf("Firefox") > -1) //火狐浏览器需要禁掉默认的拖拽事件

        document.body.ondrop = (e)=> //拖拽结束事件

            if(this.dragging) //当前页面正在拖拽中，阻止默认事件

                e.preventDefault(); //阻止浏览器默认行为，主要是为了解决火狐浏览器拖拽完打开新的窗口问题

                e.stopPropagation();

           

       

   

,

3

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

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