关于使用Flex中图片处理
<?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中图片处理的更多相关文章
- Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]
最近在做一个基于BS结构的视频会议系统,决定采用开源的FluorineFx.net与Flex结合的方法进行开发,前期开发都非常顺利,包括同步白板等.但到了实时视频传输的时候,原本设计是每个客户端可以显 ...
- JS 与Flex交互:html中的js 与flex中的actionScript通信
Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...
- iOS 解决LaunchScreen中图片加载黑屏问题
iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- iOS相册中图片按照时间排序
ios相册默认是按照时间从过去到现在排列,图片顺序有正序和逆序,group可以用以下方法来选择顺序 /** @param NSIndexSet 需要获取的相册中图片范围 @param NSEnumer ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
- 关于Android中图片大小、内存占用与drawable文件夹关系的研究与分析
原文:关于Android中图片大小.内存占用与drawable文件夹关系的研究与分析 相关: Android drawable微技巧,你所不知道的drawable的那些细节 经常会有朋友问我这个问题: ...
- Android ListView滑动过程中图片显示重复错乱闪烁问题解决
最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...
- IOS中图片拉伸技巧与方法总结(转载)
以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...
随机推荐
- [刷题] 70 Climbing Stairs
要求 楼梯共有n个台阶,每次上一个台阶或两个台阶,一共有多少种上楼梯的方法? 示例 输入:n=3 [1,1,1],[1,2,],[2,1] 输出:n=3 实现 自顶向下(递归) 递归 1 class ...
- [刷题] 206 Reverse Linked List
要求 反转一个链表 不得改变节点的值 示例 head->1->2->3->4->5->NULL NULL<-1<-2<-3<-4<-5 ...
- Linux后台执行命令:&和nohup nohup和&后台运行,进程查看及终止
nohup和&后台运行,进程查看及终止 阅读目录 nohup和&后台运行,进程查看及终止 1.nohup 2.& 3.nohup和&的区别 &:是指在后台运 ...
- Flume 常用配置项
注:以下配置项均为常见配置项,查询详细配置项可以访问 flume 官网 Source 常见配置项 Avro Source 配置项名称 默认值 描述 Channel – type – 组件类型名称,必须 ...
- VMware安装RedHat7、CentOS7后无网卡解决办法
由于Vmware虚拟网卡和linux兼容问题导致驱动无法正常安装,默认的网卡类型不兼容找到我们的Vmware虚拟机文件夹,将VMware 虚拟机配置 (.vmx),追加一条设置,网卡类型etherne ...
- TCP/IP、Http的区别--(转自任智康)
TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据.关于TCP/IP和HTTP协议的关系,网络有一段比较容易理解的介绍:"我们在传输数据 ...
- 3.20 tr:替换或删除字符
tr命令 从标准输入中替换.缩减或删除字符,并将结果写到标准输出. tr [option] [SET1] [SET2] tr [选项] [字符1] [字符2] -d 删除字符 -s ...
- mysql数据库-备份与还原-Percona XtraBackup 2.4备份工具使用
目录 xtrabackup 特点 备份生成的相关文件 xtrabackup 安装 xtrabackup 用法 1 备份 2 预备份 3 还原 4 其他 还原注意事项 xtrabackup实现完全备份及 ...
- Django(41)详解异步任务框架Celery
celery介绍 Celery是由Python开发.简单.灵活.可靠的分布式任务队列,是一个处理异步任务的框架,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务.Celery ...
- GO学习-(30) Go语言操作kafka
go操作kafka Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据,具有高性能.持久化.多副本备份.横向扩展等特点.本文介绍了如何使用Go语言发送和接收 ...