Flex 画面快照截图及显示实现代码

一、对指定画面进行快照、截图。
在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData。在flex中可以通过两个类对图片进行操作。BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象，这个对象必须实现IBitmapDrawable接口。而DisplayObject类实现了这个接口，DisplayObject是所有可见控件的先祖类，也就意味着所有在flex可以看到的画面、控件都可以用draw方法来进行快照截图。
具体的代码如下：


代码如下:

private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}

BitmapData对象不能直接显示到画面上，所以需要把BitmapData对象封装到Bitmap中，按下截图按钮后，Panel的快照就生成了，保存到了Bitmap对象中。
效果图片：

二、将捕获到的截屏图片显示到画面上。
接下来就是把Bitmap对象显示到画面上，这里需要借助UIComponent类。由于直接把Bitmap对象加到Canvas等容器中，运行时会出错，因为容器中添加的子对象必须是UIComponent的子类，而Bitmap不是，所以需要UIComponent类来封装一层。然后把UIComponent对象加入到Canvas容器中，这样图片就显示出来了。
代码如下所示：


代码如下:

private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}

先按下截图按钮进行截图操作，然后按下显示按钮把截图显示到Canvas中。效果如图所示。

三、以下是这个程序的完整代码：


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontFamily="宋体" fontSize="12" width="831" height="448">
<mx:Panel id="source" x="26" y="77" width="320" height="263" layout="absolute">
<mx:TextInput x="91" y="51"/>
<mx:TextInput x="91" y="106"/>
<mx:Button x="73.5" y="158" label="取 消"/>
<mx:Button x="172.5" y="158" label="确 定"/>
<mx:Label x="32" y="53" text="用户名："/>
<mx:Label x="32" y="108" text="密 码："/>
<mx:Label x="109" y="10" text="用户登录" fontWeight="bold"/>
</mx:Panel>
<mx:Canvas id="showImage" x="427" y="58" width="347" height="292">
</mx:Canvas>
<mx:Label x="124" y="32" text="截图区域"/>
<mx:Label x="562" y="32" text="截图显示区域"/>
<mx:Button x="147" y="394" label="截图" click="onClick()"/>
<mx:Button x="548" y="394" label="显示" click="onShow()"/>
<mx:Script>
<!--[CDATA[
import mx.core.UIComponent;
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
]]-->
</mx:Script>
</mx:Application>

四、总结。
虽然可以用Bitmap和BitmapData类进行截图和现实，但是flex不能直接读写文件。图片的保存还需要后台程序的配合来完成。

赞 (0)

相关推荐

  • jQuery jcrop插件截图使用方法

    jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • C#截图程序类似腾讯QQ截图实现代码

    C#截图程序类似腾讯QQ截图实现代码

    最近把以前制作的截图程序重新写了一下动了一个大手术 高质量仿照的TX的截图程序 先看几个效果图 拖动过程中显示当前鼠标下一小块的图像信息 尺寸.颜色信息的  注意 这里颜色是用的ARGB 本来截图的话RGB就够了 可是我把那个做成了控件 不仅截图可用 其他地方也可用作图像的选取 具体看代码就知道了 并且我还加了一个可以截图的同时把鼠标也捕获下来 现在看到的是我自己的截图程序 那个工具条啥的 是从TX的截图程序上面拔下来的 上面是几个工具条上的工具的三种粗细型号的展示 看到的蓝色的粗的刷笔 本来想

  • Android中通过view方式获取当前Activity的屏幕截图实现方法

    此方法是通过view的方式获取当前activity的屏幕截图,并不是framebuffer的方式,所以有一定的局限性.但是这种方法相对简单,容易理解. 首先通过下面的函数获取Bitmap格式的屏幕截图: 复制代码 代码如下: public Bitmap myShot(Activity activity) { // 获取windows中最顶层的view View view = activity.getWindow().getDecorView(); view.buildDrawingCache()

  • javascript在网页中实现读取剪贴板粘贴截图功能

    见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen

  • Python中使用 Selenium 实现网页截图实例

    Selenium 是一个可以让浏览器自动化地执行一系列任务的工具,常用于自动化测试.不过,也可以用来给网页截图.目前,它支持 Java.C#.Ruby 以及 Python 四种客户端语言.如果你使用 Python,则只需要在命令行里输入"sudo easy_install selenium"并回车,即可安装 selenium 的 Python 版本的客户端支持. 以 Python 为例,我们可以使用下面的脚本来给指定页面(比如我们首页)截图: # -*- coding: utf-8 -

  • IOS实现手动截图并保存

    IOS实现手动截图并保存

    本文实例介绍了iOS手动剪裁图片并保存到相册的详细代码,分享给大家供大家参考,具体内容如下 一.实现效果 1.操作步骤 绘制一个矩形框,弹出一个alertView,提示是否保存图片 点击"是",将图片保存到相册 在相册中查看保存的图片 2.效果图 二.实现思路 1.在控制器的view上添加一个imageView,设置图片 2.在控制器的view上添加一个pan手势 3.跟踪pan手势,绘制一个矩形框(图片的剪切区域) 4.在pan手势结束时,通过alertView提示"是否将

  • java代码实现截图功能(屏幕截图)

    复制代码 代码如下: import java.awt.Dimension;import java.awt.Rectangle;import java.awt.Robot;import java.awt.Toolkit;import java.awt.image.BufferedImage;import java.io.File; import javax.imageio.ImageIO; /*****************************************************

  • JavaScript实现网页截图功能

    JavaScript实现网页截图功能

    使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:

  • 利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用PhantomJS做网页截图经济适用,但其API较少,做其他功能就比较吃力了.例如,其自带的Web Server Mongoose最高只能同时支持10个请求,指望他能独立成为一个服务是不怎么实际的.所以这里需要另一个语言来支撑服务,这里选用NodeJS来完成. 安装PhantomJS 首先,去PhantomJS官网下载对应平台的版本,或者下载源代码自行编译.然后将PhantomJS配置进环境变量,输入 $ phantomjs 如果有反应,那么就可以进行下一步了. 利用PhantomJS进行简

  • Flex 画面快照截图及显示实现代码

    Flex 画面快照截图及显示实现代码

    一.对指定画面进行快照.截图. 在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData.在flex中可以通过两个类对图片进行操作.BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象,这个对象必须实现IBitmapDrawable接口.而DisplayObject类实现了这个接口,DisplayObject是所有可见控件的先祖类,也就意味着所有在flex可以看到的画面.控件都可以用draw方法来进行快照截图. 具体的代码如下

  • C# 实现截图软件功能实例代码

    C# 实现截图软件功能实例代码

    本文是利用C# 开发截图软件的小例子,以供学习分享使用. 思路: 截取屏幕图片. 获取要截取的范围,即左上角,右下角坐标 填充到PictureBox中. 笔触功能,荧光笔,矩形,橡皮擦,复制,保存功能 涉及的知识点: MenuStrip:为窗体提供菜单系统.以ToolStripMenuItem为菜单子选项 ToolStrip:为 Windows 工具栏对象提供容器.以ToolStripButton[表示包含文本和图像的可选]为工具栏子元素 PictureBox:表示用于显示图像的 Windows

  • 微信小程序swiper左右扩展各显示一半代码实例

    微信小程序swiper左右扩展各显示一半代码实例

    这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现如下的功能: 动图展示效果 代码如下: index.wxml <swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-

  • Java Web 简单的分页显示实例代码

    Java Web 简单的分页显示实例代码

    本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据

  • JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

    JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

    本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击"运行代码"后的效果,使用时,你只需将需要运行的HTML代码拷贝到文本框内,点击对应的功能按钮即可. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE>直接页面显示器</TITLE> <STYLE type=&q

  • 将RTF格式的文件转成HTML并在网页中显示的代码

    将RTF格式的文件转成HTML并在网页中显示的代码 它是这样工作的,将一个RTF文件上传,然后转成HTML显示出来,代码有点复杂,teaman还要好好研究,好象中文版有点问题. <html>     <body>     <?     if(!($userfile)) {     ?>     <form enctype="multipart/form-data" action="<?print($PHP_SELF);?>

  • js控制li的隐藏和显示实例代码

    js控制li的隐藏和显示实例代码

    html页面 <div class="favorite_list"> <div class="list_type" id="list_type"> <ul class="all"> <li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class=

  • jQuery地图map悬停显示省市代码分享

    jQuery地图map悬停显示省市代码分享

    这是一款基于jQuery实现地图map悬停显示省市代码,这样一个神奇的地图便于我们更好地了解中国,增加自己的地理知识. 下面是效果图是不是很棒. 效果演示 源码下载 为大家分享的jQuery地图map悬停显示省市代码如下 <head> <meta charset="utf-8"> <title>jQuery地图map悬停显示省市代码</title> <script src="js/lib/jquery-1.11.1.min

  • Android okhttputils现在进度显示实例代码

    OkHttpUtils是一款封装了okhttp的网络框架,支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用,整合Gson,自动解析返回对象,支持Https和自签名证书,支持cookie自动管理,扩展了统一的上传管理和下载管理功能. //download the new app private void downLoadNewApp(NewVersion.XianzaishiRfBean version) { if (StringUtils.isEmpt

  • PHP实现时间日期友好显示实现代码

    系统的友好性在开发过程中是非常重要的,一个系统非常友好不光可以带给用户非常棒的使用体验,而且还可以使系统有这更长的寿命.今天这篇博文主要来展示一个我们如何让日期时间更加友好的显示. 下面就是使时间日期友好显示的代码:核心代码 <?php /** * ======================================= * Created by Zhihua_W. * Author: Zhihua_W * Date: 2016/11/23 0001 * Time: 下午 5:45 * P

随机推荐