关于使用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.直接拉伸法 简单暴力,却是 ...
随机推荐
- 用JIRA管理你的项目——(三)基于LDAP用户管理
JIRA提供了基于LDAP方式的用户管理,也就是用户密码的管理交给LDAP,而JIRA只管理用户在系统中的角色. 要打开JIRA的LDAP设置,首先需要验证下你的LDAP服务是否正常! 几乎有所有的L ...
- [ML] 高德软件的路径规划原理
路径规划 Dijkstra s:起点:S:已知到起点最短路径的点:U:未知到起点最短路径的点 Step 1:S中只有起点s,从U中找出路径最短的 Step 2:更新U中的顶点和顶点对应的路径 重复St ...
- 将.netcore5.0(.net5)部署在Ubuntu的docker容器中
环境: 宿主机:winows 10 家庭版 虚拟机管理软件:Hyper-V 虚拟机系统:Ubuntu 20.10 Docker版本:Docker CE 20.10.2 ...
- 7.json&pickle及软件目录结构规范
json(可以序列化简单数据类型,用于不同语言之间的数据交换传输)import jsonjson.dumps() 写入json.loads() 读取json.dump(info,f) == f.wri ...
- 面试侃集合 | SynchronousQueue公平模式篇
面试官:呦,小伙子来的挺早啊! Hydra:那是,不能让您等太久了啊(别废话了快开始吧,还赶着去下一场呢). 面试官:前面两轮表现还不错,那我们今天继续说说队列中的SynchronousQueue吧. ...
- 论鸿蒙OS在某些人眼中的样子
对于鸿蒙OS,博客园有一篇文章<为鸿蒙OS说两句公道话(我对鸿蒙OS的一些看法)>.有兴趣的可以看看. 在这篇文章中,个人觉得最精彩的不是文章本身,而是评论内容. 下面我挑一些出来,和大家 ...
- [Windows] 将中文输入法热键改回Ctrl+Space
造冰箱的大熊猫@cnblogs 2021/6/6 之前因为Code Composer Studio的缘故将Windows XP上的中英文切换热键从Ctrl+Space改为了Ctrl+Shift+Spa ...
- 你是不是对MD5算法有误解?
大家常听到"MD5加密"."对称加密"."非对称加密",那么MD5属于哪种加密算法? 面试问这样的问题,准是在给你挖坑. "MD5 ...
- Python+Selenium - 鼠标操作
鼠标操作类:action_chains模块的ActionChains类 使用组成:操作 + 执行(perform()) 导入代码 from selenium.webdriver.common.acti ...
- 201871030137-杨钦颖 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
201871030137-杨钦颖 实验三 结对项目-<D{0-1}KP 实例数据集算法实验平台>项目报告 项目 内容 课程班级博客链接 班级连接 这个作业要求链接 作业连接 我的课程学习目 ...