flex+php截图Demo

时间:2022-06-14
本文章向大家介绍flex+php截图Demo,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在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 实现截图功能