• flex+php截图Demo


    在flex中使用了两种方案来处理图片:

    一、直接将byteArray转为bitmap通过loader(flash.display.Loader)显示在舞台上;

    二、将byteArray调用将三方方法(Base64),做为字符串传给php,php使用base64_decode再将图片进行保存

    Demo效果图:

    image

    image image

    操作步骤:

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

  • 相关阅读:
    微信消息推送和支付宝支付
    django rest framework
    Redis
    flask_migrate
    flask 学习
    windowsserver补丁
    mysql 8.0.23密码更新方法
    交换机配置实例
    爱国论坛OPENWRT
    openwrt资料
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2006884.html
Copyright © 2020-2023  润新知