<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:astion="astions.*"
minWidth="955" minHeight="600"
creationComplete="init()" xmlns:astion1="astion.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<s:Parallel id="imgEffect" target="{showPic}">
<s:Move xFrom="0" xTo="0" yFrom="0" yTo="0" duration="1000" />
<s:Scale scaleXFrom="1.0" scaleXTo="1.5" scaleYFrom="1.0" scaleYTo="1.5" duration="1000" />
</s:Parallel>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.MoveEvent;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder; private var _file:FileReference; // 单个图片列表
private var _fileList:FileReferenceList // 批量图片列表
private var isChoice:Boolean; // 是否裁剪图片
// private var imgData:BitmapData; // 图片bitmap数据 private function init():void
{
_file = new FileReference();
_fileList = new FileReferenceList();
_file.addEventListener(Event.SELECT, onSelect);
_file.addEventListener(Event.COMPLETE, completeHandle);
box.visible = false;
isChoice = false;
group_all.visible = false;
}
// 单击选择时
private function select():void
{
var allTypes:FileFilter = new FileFilter("图片类型(*.jpg; *.jpeg; *.png; *.gif)", "*.jpg; *.jpeg; *.png; *.gif");
_file.browse([allTypes]);
}
// 图片被选中时
private function onSelect(e:Event):void
{
_file.load();
}
// 图片加载完成时
private function completeHandle(e:Event):void
{
showPic.source = _file.data;
showPic.width = 400;
showPic.height = 400;
}
// 图片裁剪
private function cut():void
{
if( showPic.source != null) {
isChoice = true;
box.visible = true;
group_all.visible = true;
uncheckArea();
}
}
// 裁剪图片时,未选中部分变暗
private function uncheckArea():void {
// 盒子的宽度
var boxWidth:int = box.boxWidth;
// 盒子的高度
var boxHeight:int = box.boxHeight;
// 盒子的坐标
var originX:int = box.x;
var originY:int = box.y;
// 图片显示区域的高,宽
var imgHeight:int =showPic.height;
var imgWidth:int = showPic.width;
//bg_1 加上10PX像素文字的高度
bg_1.height = originY -30;
bg_1.width = imgWidth;
bg_1.x = 0;
bg_1.y = 0;
// bg_2
bg_2.height = boxHeight;
bg_2.width = imgWidth - (originX + boxWidth);
bg_2.x = originX + boxWidth;
bg_2.y = originY-30;
// bg_3 减去10PX像素文字的高度 减去 30PX按钮栏的高度
bg_3.height = imgHeight - (originY +boxHeight-30);
bg_3.width = bg_1.width = imgWidth;
bg_3.x = 0;
bg_3.y = originY + boxHeight - 30;
// bg_4
bg_4.height = boxHeight;
bg_4.width = originX;
bg_4.x = 0;
bg_4.y = originY - 30; // bg_2.height = bg_4.height = imgHeight - (bg_3.height + bg_1.height);
}
// 单击预览时. 返回被选中的区域 bitmapdata;
private function preview():BitmapData
{
showSmallPic.source = "";
var bmpData:BitmapData = ImageSnapshot.captureBitmapData(showPic);
var re:Rectangle = new Rectangle(box.x, box.y, box.boxWidth, box.boxHeight);
var byte:ByteArray = bmpData.getPixels(re);
// 已经定义为全局变量,方便数据的存储操作。
// var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);
var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);
//当前的bytearray.position为最大长度,要设为从0开始读取
byte.position = 0;
var imgRe:Rectangle = new Rectangle(0, 0, box.boxWidth, box.boxHeight);
imgData.setPixels(imgRe, byte);
showSmallPic.source = new Bitmap(imgData);
return imgData;
/*
var bmpData_2:BitmapData = new BitmapData(100, 100);
var p:Point = new Point(40, 40);
var area:Rectangle = new Rectangle(0, 0, 100, 100);
// bmpData_2.draw(bmpData, new Matrix());
bmpData_2.copyPixels(bmpData, area, p);
var bmp:Bitmap = new Bitmap(bmpData_2);
showSmallPic.source = bmp;
*/
}
// 图片保存
private function save():void
{
var imgData:BitmapData = preview();
if(!isChoice) {
Alert.show("没有预览图片", "提示信息");
return;
}
if(imgData != null)
{
var file:FileReference = new FileReference();
var date:Date = new Date();
var ba:ByteArray = new JPEGEncoder().encode(imgData);
file.save(ba, date.fullYear.toString() + date.month.toString() + date.day.toString() + date.milliseconds.toString() + ".jpg");
} else {
Alert.show("保存出错!请重试", "提示信息");
}
} protected function showPic_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
// imgEffect.play(null, false);
showPic.width = 400;
showPic.height = 400;
showPic.setStyle("backgroundAlpha", 0.6);
showPic.graphics.lineStyle(1, 0, 100);
showPic.graphics.lineTo(100, 0);
showPic.graphics.lineTo(100, 50);
showPic.graphics.lineTo(0, 50);
showPic.graphics.lineTo(0, 0);
} // 图片修改时防止操作图片的界限
protected function box_moveHandler():void
{
// 当选区X坐标小于图片的X坐标时 左部
if(box.x < showPic.x) {
box.x = showPic.x;
}
// 当选区Y坐标小于图片的Y坐标时 顶部
if(box.y < (showPic.y +30 )) {
box.y = showPic.y +30;
}
// 当选区X坐标 大于图片X坐标时 右部
if((box.x + box.boxWidth) > (showPic.x + showPic.width)) {
box.x = showPic.x + showPic.width - box.boxWidth
}
// 当选区Y坐标大于图片Y坐标时 底部
if((box.y + box.boxHeight) > (showPic.y + showPic.height +30)) {
box.y = showPic.y + showPic.height - box.boxHeight + 30;
}
// 当选区的高度大于图片的高度时
if(box.boxHeight > showPic.height) {
box.boxHeight = showPic.height;
}
// 当选区的宽度大于图片的宽度时
if(box.boxWidth > showPic.width) {
box.boxWidth = showPic.width;
}
// 未选中区域变色
uncheckArea();
} ]]>
</fx:Script>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Group id="group_all" depth="2" y="30" x="0">
<s:Rect id="bg_1" x="0" y="0" width="100" height="80">
<s:fill>
<s:SolidColor color="#333" alpha="0.6" />
</s:fill>
</s:Rect>
<s:Rect id="bg_2" x="0" y="0" width="100" height="80">
<s:fill>
<s:SolidColor color="#333" alpha="0.6" />
</s:fill>
</s:Rect>
<s:Rect id="bg_3" x="0" y="0" width="100" height="80">
<s:fill>
<s:SolidColor color="#333" alpha="0.6" />
</s:fill>
</s:Rect>
<s:Rect id="bg_4" x="0" y="0" width="100" height="80">
<s:fill>
<s:SolidColor color="#333" alpha="0.6" />
</s:fill>
</s:Rect>
</s:Group>
<astion1:ScaleBox id="box" x="130" y="180" width="40" height="40" depth="3" move="box_moveHandler()" resize="box_moveHandler()" />
<mx:VBox verticalGap="0" borderVisible="false">
<mx:HBox>
<s:Button label="选择图片" click="select()" width="80" height="30" useHandCursor="true" buttonMode="true" styleName="btnStyle" />
<s:Button label="图片裁剪" click="cut()" width="80" height="30" useHandCursor="true" buttonMode="true" styleName="btnStyle" />
<s:Button label="预览" click="preview()" width="80" height="30" useHandCursor="true" buttonMode="true" styleName="btnStyle" />
<s:Button label="另存本地" click="save()" width="80" height="30" useHandCursor="true" buttonMode="true" styleName="btnStyle" />
</mx:HBox>
<mx:HBox width="540" height="400" id="container_clip">
<s:Image id="showPic" y="30" x="0" width="400" height="400" click="showPic_clickHandler(event)" />
<s:Image id="showSmallPic" x="440" width="120" height="120" />
</mx:HBox>
<mx:HBox>
</mx:HBox>
</mx:VBox>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.btnStyle {
borderVisible : true;
textAlign : center;
verticalAlign : center;
lineHeight : 30px;
fontFamily : "宋体", "微软雅黑";
}
.t_6 {
backgroundColor : #333;
backgroundAlpha : 0.6;
}
</fx:Style>
</s:Application>

  源码下载地址: http://pan.baidu.com/s/1cT1fS

很抱歉的说,现在没有时间写博客,怕自己忘记写了,还得继续努力,过段时间再过来修改

关于使用Flex中图片处理的更多相关文章

  1. Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]

    最近在做一个基于BS结构的视频会议系统,决定采用开源的FluorineFx.net与Flex结合的方法进行开发,前期开发都非常顺利,包括同步白板等.但到了实时视频传输的时候,原本设计是每个客户端可以显 ...

  2. JS 与Flex交互:html中的js 与flex中的actionScript通信

    Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...

  3. iOS 解决LaunchScreen中图片加载黑屏问题

    iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...

  4. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. iOS相册中图片按照时间排序

    ios相册默认是按照时间从过去到现在排列,图片顺序有正序和逆序,group可以用以下方法来选择顺序 /** @param NSIndexSet 需要获取的相册中图片范围 @param NSEnumer ...

  6. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  7. 关于Android中图片大小、内存占用与drawable文件夹关系的研究与分析

    原文:关于Android中图片大小.内存占用与drawable文件夹关系的研究与分析 相关: Android drawable微技巧,你所不知道的drawable的那些细节 经常会有朋友问我这个问题: ...

  8. Android ListView滑动过程中图片显示重复错乱闪烁问题解决

    最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...

  9. IOS中图片拉伸技巧与方法总结(转载)

    以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...

随机推荐

  1. Linux权限问题(1)-Sticky

    背景:朋友在使用php进行mv操作时,出现了权限被拒绝的问题.查看之后,发现目录设置了sticky权限,取消此权限后,文件可以正常mv及删除. Sticky:对于一个多人可写的目录,如果设置了stic ...

  2. RHEL/CentOS 7 中配置 PXE 网络启动服务器

    RHEL/CentOS 7 中配置 PXE 网络启动服务器 作者: Matei Cezar 译者: LCTT joeren | 2015-02-17 14:28   评论: 13 收藏: 8 分享:  ...

  3. Scala 关键字

    Java关键字 Java 一共有 50 个关键字(keywords),其中有 2 个是保留字,目前还不曾用到:goto 和 const.true.false 和 null 看起来很像关键字,但实际上只 ...

  4. S11 Linux系统管理命令

    11.1 lsof:查看进程打开的文件 11.2 uptime:显示系统的运行时间及负载 11.3 free:查看系统内存信息 11.4 iftop:动态显示网络接口流量信息 11.5 vmstat: ...

  5. centos 7修改yum源

    centos系统要定期更新,前天使用sudo yum update命令更新过程中出错,安装的是x64的系统,结果更新的内容有i686的依赖包,最终由于64与32位系统依赖的原因导致更新失败,更糟糕的是 ...

  6. 物联网设备OTA软件升级之:升级包下载过程之旅

    OTA概述 大家好,我是一个软件升级包.这几天呢,我将会进行一次神奇的网络之旅,从开发者的电脑中,一直跑到终端嵌入式设备中. 大家都把我的这个旅游过程叫做 OTA,也就是在线升级. 那么啥叫 OTA ...

  7. Xilinx Zynq FPGA Boards板

    Xilinx Zynq FPGA Boards板 Xilinx Zynq FPGA Boards 介绍 Styx是一个易于使用的Zynq开发模块,具有Xilinx的Zynq ZC7020 SoC和FT ...

  8. dataguard日志损坏处理

    ===== 问题 ===== 日志损坏无法应用日志(开启MRP应用系统会因无法应用日志而关闭) Completed: ALTER DATABASE RECOVER MANAGED STANDBY DA ...

  9. java后端知识点梳理——java基础

    面向对象 java三大特性 封装: 将事务封装成一个类,达到解耦,隐藏细节的效果.通过get/set等方法,封装了内部逻辑,并保留了特定的接口与外界联系. 继承: 从一个已知的类中派生出一个新的类,新 ...

  10. Python集合:set

    集合 集合的描述 set是一个无序不重复的序列,可以用{}或者 set() 函数创建集合,它存放不可变类型(如字符串.数字.元组)数据. 注意:创建一个空集合必须使用set()方法,因为{}是用来生成 ...