在flex中使用了兩種方案來處理圖片：

一、直接將byteArray轉為bitmap通過loader(flash.display.Loader)顯示在舞臺上；

二、將byteArray調用將三方方法（Base64），做為字符串傳給php，php使用base64_decode再將圖片進行保存

Demo效果圖：

?

操作步驟：

1、點擊“載入圖片”，然后點擊“截取圖片”，在容器中拉出一條線，之后將三確定一個紅色矩形框

2、點擊“保存圖片”，提交后臺php，并在舞臺中生成一張當前截圖

3、后臺保存的文件格式為當前“年月日_時分秒_img.png”

?

Flex代碼：

1: <?xml version="1.0" encoding="utf-8"?> 2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init();"> 3: 4: <mx:Script> 5: <![CDATA[ 6: import com.dynamicflash.util.Base64; 7: 8: import mx.controls.Alert; 9: import mx.core.UIComponent; 10: import mx.graphics.codec.JPEGEncoder; 11: import mx.graphics.codec.PNGEncoder; 12: import mx.utils.Base64Decoder; 13: import mx.utils.Base64Encoder; 14: 15: private var UICompt:UIComponent; 16: private var line:Sprite; 17: private var line1:Sprite; 18: private var line2:Sprite; 19: private var line3:Sprite; 20: private var line4:Sprite; 21: private var pointTL:Point; 22: private var pointBR:Point; 23: 24: private function init():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: 34: private function loadImgHandler(evt:MouseEvent):void { 35: img.source = "./assets/Water lilies.jpg"; 36: 37: loadImgBtn.enabled = saveBtn.enabled = false; 38: cutBtn.enabled = true; 39: 40: UICompt = new UIComponent(); 41: 42: this.addChild(UICompt); 43: 44: line = new Sprite(); 45: line1 = new Sprite(); 46: line2 = new Sprite(); 47: line3 = new Sprite(); 48: line4 = 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: 57: private function cutImgHandler(evt:MouseEvent):void { 58: this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler); 59: 60: cutBtn.enabled = false; 61: } 62: 63: private function saveImgHandler(evt:MouseEvent):void { 64: var w:Number = Math.abs(pointBR.x-pointTL.x); 65: var h:Number = Math.abs(pointBR.y-pointTL.y); 66: 67: var bitmapdata:BitmapData = new BitmapData(Application.application.width, Application.application.height); 68: bitmapdata.draw(canvas); 69: 70: 71: var rectangle:Rectangle = new Rectangle(pointTL.x,pointTL.y,w,h); 72: var quality:Number = 100; 73: var jpgEncode = new JPEGEncoder(quality); 74: var bytes:ByteArray = jpgEncode.encodeByteArray(bitmapdata.getPixels(rectangle), w, h); 75: 76: 77: //提交至后臺php保存該圖片文件 78: var encoded:String = Base64.encodeByteArray(bytes); 79: var variables:URLVariables = new URLVariables(); 80: variables.png = encoded; 81: 82: var req:URLRequest = new URLRequest(); 83: req.method = URLRequestMethod.POST; 84: req.url = "http://meteoric.com/test/uploadFile/prova2.php"; 85: req.data = variables; 86: 87: var urlLoader:URLLoader = 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: 101: //將byteArray轉化為Bitmap 102: var loader:Loader = 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: 114: private function onMouseDownHandler(evt:MouseEvent):void { 115: pointTL = new Point(mouseX, mouseY); 116: 117: this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler); 118: this.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler); 119: } 120: 121: private function onMouseUpHandler(evt:MouseEvent):void { 122: this.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler); 123: this.removeEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler); 124: this.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler); 125: 126: pointBR = 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: 156: private function onMouseMoveHandler(evt:MouseEvent):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: 166: <mx:Canvas x="20" y="20" width="800" height="400" 167: id="canvas" 168: borderColor="#2e2e2e" borderStyle="solid" borderThickness="1" 169: verticalScrollPolicy="off" horizontalScrollPolicy="off"> 170: <mx:Image id="img" scaleContent="false"/> 171: </mx:Canvas> 172: 173: <mx:Button label="載入圖片" x="830" y="20" id="loadImgBtn"/> 174: <mx:Button label="截取圖片" x="830" y="50" id="cutBtn"/> 175: <mx:Button label="保存圖片" x="830" y="80" id="saveBtn"/> 176: 177: </mx:Application>

引用的Base64.as（存放于com.dynamicflash.util包中）

1: /* 2: Base64 - 1.1.0 3: 4: Copyright (c) 2006 Steve Webster 5: 6: Permission is hereby granted, free of charge, to any person obtaining a copy of 7: this software and associated documentation files (the "Software"), to deal in 8: the Software without restriction, including without limitation the rights to 9: use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10: the Software, and to permit persons to whom the Software is furnished to do so, 11: subject to the following conditions: 12: 13: The above copyright notice and this permission notice shall be included in all 14: copies or substantial portions of the Software. 15: 16: THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17: IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 18: FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 19: COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 20: IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 21: CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22: */ 23:? 24: package com.dynamicflash.util { 25:? 26: import flash.utils.ByteArray; 27: 28: public class Base64 { 29: 30: private static const BASE64_CHARS:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 31:? 32: public static const version:String = "1.0.0"; 33:? 34: public static function encode(data:String):String { 35: // Convert string to ByteArray 36: var bytes:ByteArray = new ByteArray(); 37: bytes.writeUTFBytes(data); 38: 39: // Return encoded ByteArray 40: return encodeByteArray(bytes); 41: } 42: 43: public static function encodeByteArray(data:ByteArray):String { 44: // Initialise output 45: var output:String = ""; 46: 47: // Create data and output buffers 48: var dataBuffer:Array; 49: var outputBuffer:Array = new Array(4); 50: 51: // Rewind ByteArray 52: data.position = 0; 53: 54: // while there are still bytes to be processed 55: while (data.bytesAvailable > 0) { 56: // Create new data buffer and populate next 3 bytes from data 57: dataBuffer = new Array(); 58: for (var i:uint = 0; i < 3 && data.bytesAvailable > 0; i++) { 59: dataBuffer[i] = data.readUnsignedByte(); 60: } 61: 62: // Convert to data buffer Base64 character positions and 63: // store in output buffer 64: outputBuffer[0] = (dataBuffer[0] & 0xfc) >> 2; 65: outputBuffer[1] = ((dataBuffer[0] & 0x03) << 4) | ((dataBuffer[1]) >> 4); 66: outputBuffer[2] = ((dataBuffer[1] & 0x0f) << 2) | ((dataBuffer[2]) >> 6); 67: outputBuffer[3] = dataBuffer[2] & 0x3f; 68: 69: // If data buffer was short (i.e not 3 characters) then set 70: // end character indexes in data buffer to index of '=' symbol. 71: // This is necessary because Base64 data is always a multiple of 72: // 4 bytes and is basses with '=' symbols. 73: for (var j:uint = dataBuffer.length; j < 3; j++) { 74: outputBuffer[j + 1] = 64; 75: } 76: 77: // Loop through output buffer and add Base64 characters to 78: // encoded data string for each character. 79: for (var k:uint = 0; k < outputBuffer.length; k++) { 80: output += BASE64_CHARS.charAt(outputBuffer[k]); 81: } 82: } 83: 84: // Return encoded data 85: return output; 86: } 87: 88: public static function decode(data:String):String { 89: // Decode data to ByteArray 90: var bytes:ByteArray = decodeToByteArray(data); 91: 92: // Convert to string and return 93: return bytes.readUTFBytes(bytes.length); 94: } 95: 96: public static function decodeToByteArray(data:String):ByteArray { 97: // Initialise output ByteArray for decoded data 98: var output:ByteArray = new ByteArray(); 99: 100: // Create data and output buffers 101: var dataBuffer:Array = new Array(4); 102: var outputBuffer:Array = new Array(3); 103:? 104: // While there are data bytes left to be processed 105: for (var i:uint = 0; i < data.length; i += 4) { 106: // Populate data buffer with position of Base64 characters for 107: // next 4 bytes from encoded data 108: for (var j:uint = 0; j < 4 && i + j < data.length; j++) { 109: dataBuffer[j] = BASE64_CHARS.indexOf(data.charAt(i + j)); 110: } 111: 112: // Decode data buffer back into bytes 113: outputBuffer[0] = (dataBuffer[0] << 2) + ((dataBuffer[1] & 0x30) >> 4); 114: outputBuffer[1] = ((dataBuffer[1] & 0x0f) << 4) + ((dataBuffer[2] & 0x3c) >> 2); 115: outputBuffer[2] = ((dataBuffer[2] & 0x03) << 6) + dataBuffer[3]; 116: 117: // Add all non-padded bytes in output buffer to decoded data 118: for (var k:uint = 0; k < outputBuffer.length; k++) { 119: if (dataBuffer[k+1] == 64) break; 120: output.writeByte(outputBuffer[k]); 121: } 122: } 123: 124: // Rewind decoded data ByteArray 125: output.position = 0; 126: 127: // Return decoded data 128: return output; 129: } 130: 131: public function Base64() { 132: throw new Error("Base64 class is static container only"); 133: } 134: } 135: }

?

php代碼：

1: <?php 2:? 3: $today = date("Ymd_His"); 4: $filename = $today."_img.png"; 5: $somecontent = base64_decode($_REQUEST['png']); 6:? 7: if ($handle = fopen("upload/".$filename, "w+")) { 8: if (!fwrite($handle, $somecontent) == FALSE) { 9: fclose($handle); 10: } 11: 12: echo "imageurl=".$filename; 13: } 14:? 15: ?>

?

本文參考：

SWF to PNG with Actionscript 3.0 - ByteArray class

利用Flex 實現截圖功能

轉載于:https://www.cnblogs.com/meteoric_cry/archive/2011/04/06/2006884.html

總結

以上是生活随笔為你收集整理的flex+php截图Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。