flex前端鼠标拖拽截图，没有实现上传。
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Script>
4 <![CDATA[
5 import mx.events.CloseEvent;
6 import mx.managers.PopUpManager;
7 import mx.containers.TitleWindow;
8 import mx.controls.Alert;
9 private var initX:Number;
10 private var initY:Number;
11 private var borderCan:Canvas;
12 //测试用图片地址，可以用鼠标拖拽进行选择区域
13 [Bindable]private var imgPath:String="Images/2.jpg";
14 private function downHander(e:MouseEvent):void{
15 if(borderCan!=null){
16 this.mainCan.removeChild(borderCan);
17 }
18 initX = preUploadImage.mouseX;
19 initY = preUploadImage.mouseY;
20 this.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
21 this.addEventListener(MouseEvent.MOUSE_UP,upHander);
22 borderCan = new Canvas();
23 borderCan.width=1;
24 borderCan.height=1
25 borderCan.setStyle("borderStyle","solid");
26 borderCan.setStyle("borderColor","red");
27 borderCan.x=initX;
28 borderCan.y=initY;
29 this.mainCan.addChild(borderCan);
30 }
31 private var upX:Number;
32 private var upY:Number;
33 private function upHander(e:MouseEvent):void{
34 upX = borderCan.x
35 upY = borderCan.y
36 this.txtX.text ="X坐标："+upX+" 宽度： "+borderCan.width;
37 this.txtY.text = "Y坐标："+upY+" 高度： "+borderCan.height;
38 this.removeEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
39 this.removeEventListener(MouseEvent.MOUSE_UP,upHander);
40 }
41
42 private function moveHandler(e:MouseEvent):void{
43 this.borderCan.width = this.mainCan.mouseX-initX;
44 this.borderCan.height = this.mainCan.mouseY - initY;
45 }
46
47 private var w:Number=0;
48 private var h:Number=0;
49 private function getImg():void{
50 w = borderCan.width;
51 h = borderCan.height;
52 //处理截图时候鼠标反向拖拽的坐标问题
53 var finalX:Number=borderCan.x;
54 var finalY:Number=borderCan.y;
55 if(w<0){
56 finalX = borderCan.x + w;
57 w= -w;
58 }
59 if(h<0){
60 finalY = borderCan.y + h;
61 h= -h;
62 }
63
64 //用bitmapdata全部获取预览图片的像素
65 var initBD:BitmapData = new BitmapData(preUploadImage.width,preUploadImage.height);
66 initBD.draw(preUploadImage);
67 var bytearray:ByteArray = new ByteArray();
68 //矩形为要截取区域
69 var re:Rectangle = new Rectangle(finalX,finalY,w,h);
70 bytearray = initBD.getPixels(re); //截取出所选区域的像素集合
71 var imgBD:BitmapData = new BitmapData(w,h);
72 bytearray.position=0; //必须的，当前的bytearray.position为最大长度，要设为从0开始读取
73 var fillre:Rectangle = new Rectangle(0,0,w,h);
74 imgBD.setPixels(fillre,bytearray); //将截取出的像素集合存在新的bitmapdata里，大小和截取区域一样
75 showImg(imgBD); //显示图片
76 }
77
78 private function showImg(e:BitmapData):void{
79 var t:TitleWindow = new TitleWindow();
80 t.showCloseButton=true;
81 t.addEventListener(CloseEvent.CLOSE,closeWindow);
82 t.width = w+t.getStyle("borderThickness");
83 t.height =h+t.getStyle("borderThickness")+t.getStyle("headerHeight");
84 var img:Image = new Image();
85 img.width = w;
86 img.height = h;
87 img.source = new Bitmap(e);
88 t.addChild(img);
89 PopUpManager.addPopUp(t,this,true);
90 PopUpManager.centerPopUp(t);
91 }
92 private function closeWindow(e:CloseEvent):void{
93 var t:TitleWindow = e.currentTarget as TitleWindow;
94 PopUpManager.removePopUp(t);
95 }
96 ]]>
97 </mx:Script>
98 <mx:Canvas width="600" height="400" borderStyle="solid" borderColor="white" id="mainCan" mouseDown="downHander(event)" >
99 <mx:Image id="preUploadImage" width="100%" height="100%" source="{imgPath}" >
100 </mx:Image>
101 </mx:Canvas>
102 <mx:Button x="10" y="410" label="截图" fontSize="12" click="getImg()"/>
103 <mx:Label x="100" y="410" text="Label" id="txtX"/>
104 <mx:Label x="200" y="410" text="Label" id="txtY"/>
105
106 </mx:Application>
107
108
效果图如下：
浙公网安备 33010602011771号