在flex中使用了两种方案来处理图片:
一、直接将byteArray转为bitmap通过loader(flash.display.Loader)显示在舞台上;
二、将byteArray调用将三方方法(Base64),做为字符串传给php,php使用base64_decode再将图片进行保存
Demo效果图:
操作步骤:
1、点击“载入图片”,然后点击“截取图片”,在容器中拉出一条线,之后将三确定一个红色矩形框
2、点击“保存图片”,提交后台php,并在舞台中生成一张当前截图
3、后台保存的文件格式为当前“年月日_时分秒_img.png”
Flex代码:
?>
>
3:
4: <mx:Script>
5: <![CDATA[
import com.dynamicflash.util.Base64;
7:
import mx.controls.Alert;
import mx.core.UIComponent;
import mx.graphics.codec.JPEGEncoder;
import mx.graphics.codec.PNGEncoder;
import mx.utils.Base64Decoder;
import mx.utils.Base64Encoder;
14:
private var UICompt:UIComponent;
private var line:Sprite;
private var line1:Sprite;
private var line2:Sprite;
private var line3:Sprite;
private var line4:Sprite;
private var pointTL:Point;
private var pointBR:Point;
23:
void {
25:
26: cutBtn.enabled = saveBtn.enabled = false;
27:
28: loadImgBtn.addEventListener(MouseEvent.CLICK, loadImgHandler);
29: cutBtn.addEventListener(MouseEvent.CLICK, cutImgHandler);
30: saveBtn.addEventListener(MouseEvent.CLICK, saveImgHandler);
31:
32: }
33:
void {
;
36:
37: loadImgBtn.enabled = saveBtn.enabled = false;
38: cutBtn.enabled = true;
39:
new UIComponent();
41:
this.addChild(UICompt);
43:
new Sprite();
new Sprite();
new Sprite();
new Sprite();
new Sprite();
49:
50: UICompt.addChild(line);
51: UICompt.addChild(line1);
52: UICompt.addChild(line2);
53: UICompt.addChild(line3);
54: UICompt.addChild(line4);
55: }
56:
void {
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
59:
60: cutBtn.enabled = false;
61: }
62:
void {
64: var w:Number = Math.abs(pointBR.x-pointTL.x);
65: var h:Number = Math.abs(pointBR.y-pointTL.y);
66:
new BitmapData(Application.application.width, Application.application.height);
68: bitmapdata.draw(canvas);
69:
70:
new Rectangle(pointTL.x,pointTL.y,w,h);
72: var quality:Number = 100;
new JPEGEncoder(quality);
74: var bytes:ByteArray = jpgEncode.encodeByteArray(bitmapdata.getPixels(rectangle), w, h);
75:
76:
//提交至后台php保存该图片文件
78: var encoded:String = Base64.encodeByteArray(bytes);
new URLVariables();
80: variables.png = encoded;
81:
new URLRequest();
83: req.method = URLRequestMethod.POST;
;
85: req.data = variables;
86:
new URLLoader();
88: urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
89: urlLoader.addEventListener(Event.COMPLETE, function(evt:Event) {
90: urlLoader.removeEventListener(Event.COMPLETE, arguments.callee);
91: urlLoader = null;
92:
93: var _loader:URLLoader = URLLoader(evt.target);
94: Alert.show(_loader.data);
95: });
96: urlLoader.load(req);
97:
98:
99:
100:
//将byteArray转化为Bitmap
new Loader();
103: loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(evt:Event) {
104: var decodedBitmapData:BitmapData = Bitmap(evt.target.content).bitmapData;
105: loader.x = 800;
106: loader.y = 400;
107: stage.addChild(loader);
108: loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, arguments.callee);
109: loader = null;
110: });
111: loader.loadBytes(bytes);
112: }
113:
void {
new Point(mouseX, mouseY);
116:
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
119: }
120:
void {
this.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
this.removeEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
this.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
125:
new Point(mouseX, mouseY);
127: line1.graphics.clear();
128: line2.graphics.clear();
129: line3.graphics.clear();
130: line4.graphics.clear();
131: line.graphics.clear();
132:
133: var borderColor:Number = 0xff0000;
134:
135: line1.graphics.lineStyle(1, borderColor, 1);
136: line2.graphics.lineStyle(1, borderColor, 1);
137: line3.graphics.lineStyle(1, borderColor, 1);
138: line4.graphics.lineStyle(1, borderColor, 1);
139:
140: line1.graphics.moveTo(pointTL.x,pointTL.y);
141: line1.graphics.lineTo(pointTL.x,pointBR.y);
142:
143:
144: line2.graphics.moveTo(pointTL.x,pointTL.y);
145: line2.graphics.lineTo(pointBR.x,pointTL.y);
146:
147: line3.graphics.moveTo(pointTL.x,pointBR.y);
148: line3.graphics.lineTo(pointBR.x,pointBR.y);
149:
150: line4.graphics.moveTo(pointBR.x,pointTL.y);
151: line4.graphics.lineTo(pointBR.x,pointBR.y);
152:
153: saveBtn.enabled = true;
154: }
155:
void {
157: line.graphics.clear();
158: line.graphics.lineStyle(1, 0x000000, 1);
159: line.graphics.moveTo(pointTL.x, pointTL.y);
160: line.graphics.lineTo(mouseX, mouseY);
161: }
162:
163: ]]>
164: </mx:Script>
165:
>
/>
171: </mx:Canvas>
172:
/>
/>
/>
176:
177: </mx:Application>