flex+php截图Demo

简介: 在flex中使用了两种方案来处理图片: 一、直接将byteArray转为bitmap通过loader(flash.display.Loader)显示在舞台上; 二、将byteArray调用将三方方法(Base64),做为字符串传给php,php使用base64_decode再将图片进行保存 D...

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

目录
相关文章
|
消息中间件 人工智能 移动开发
阿里云Rocket MQ PHP Http SDK发送消息示例Demo
消息队列 RocketMQ 版支持 RESTful 风格的 HTTP 协议通信,并提供了以下 7 种语言的 SDK,下面以最新的PHP Http SDK为范例介绍RocketMQ消息的发送。
2666 0
阿里云Rocket MQ PHP Http SDK发送消息示例Demo
|
1月前
|
监控 前端开发 安全
PHP脚本:实现实时监控电脑屏幕并生成网页截图
在当今数字化时代,实时监控和数据收集变得越来越重要。有时候,我们需要监视某些活动,例如员工的工作情况、儿童的网络活动等等。在这篇文章中,我们将探讨如何使用PHP脚本实现实时监控电脑屏幕,并将监控到的数据自动提交到网站。
111 2
|
PHP
PHP酒店管理demo案例(数组遍历)
PHP酒店管理demo案例(数组遍历)
122 0
PHP酒店管理demo案例(数组遍历)
|
PHP
iframe_demo实例:消息发送(PHP版本)
iframe_demo实例:消息发送(PHP版本)
125 0
iframe_demo实例:消息发送(PHP版本)
|
移动开发 PHP
php socket(服务端与客户端)demo
php socket(服务端与客户端)demo
159 0
php socket(服务端与客户端)demo
|
自然语言处理 PHP 开发工具
阿里云机器翻译PHP使用Demo
阿里巴巴机器翻译是由阿里巴巴匠心打造的在线智能机器翻译服务。依托领先的自然语言处理技术和海量的互联网数据优势,阿里巴巴成功上线基于注意力机制的深层神经网络翻译系统(NMT),帮助用户跨越语言鸿沟,畅享交流和获取信息,实现无障碍沟通。凭借海量数据积累及关键技术创新,在电商领域翻译质量独具优势。下面介绍如何使用PHP SDK调用阿里云机器翻译API。
1043 0
|
PHP
使用当面付官方DEMO(PHP)调试沙箱
一,说明:本帖将利用官方提供的demo进行修改成沙箱的环境demo,小伙伴如果测试沙箱报错可以自己下载这个里面的demo进行配置自己的沙箱APPID和公私钥测试即可。截图示例以php版的为例,其他开发语言的配置方法一样。
607 0
|
API PHP
[ 转载文章 ] 智能媒体管理(IMM)人脸分组PHP DEMO
智能媒体管理产品, PHP 语言人脸分组 DEMO
1244 0
|
PHP 对象存储
智能媒体管理(IMM)人脸分组PHP DEMO
智能媒体管理(IMM)提供了高效、准确的人脸识别、人脸分组等相关功能。通过简单的API调用即可实现。以下给出一个PHP的DEMO供参考。
1809 0
|
Web App开发 JavaScript 前端开发
Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)
Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo),官网上下载的一直报‘创建订单错误‘和各种报错,于是自己就试着写了一个demo,亲测,可用。
1789 0