关于使用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.直接拉伸法 简单暴力,却是 ...
随机推荐
- github祥解
github介绍 安装 仓库创建& 提交代码 代码回滚 工作区和暂存区 撤销修改 删除操作 远程仓库 分支管理 多人协作 github使用 忽略特殊文件.gitignore 为什么要用版本控制 ...
- Docker——安装部署
前言 从 2017 年 3 月开始 docker 在原来的基础上分为两个分支版本: Docker CE 和 Docker EE. Docker CE 即社区免费版,Docker EE 即企业版,强调安 ...
- git 速度慢问题解决
使用VPN上网后,如果git下载速度还是很慢说明没有正确设置代理 查看你的代理模式是否是pac代理,如果是改成全局或者Http代理,pac代理会选择性的代理网站,可能会略过某些网站. 如果还是比较慢则 ...
- nosql数据库之Redis持久化、备份和主从配置
一.持久化方式 Redis提供了两种数据备份的方式,一种是RDB,另外一种是AOF. RDB AOF 开启/关闭 开启:默认开启:关闭:把配置文件中所有的save注释就是关闭了 开启:在配置文件中 ...
- strcpy和memcpy的区别-(转自stone Jin)
strcpy和memcpy都是标准C库函数,它们有下面的特点.strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容之外,还会复制字符串的结束符. 已知strcpy函 ...
- 【数据结构与算法】多种语言(VB、C、C#、JavaScript)系列数据结构算法经典案例教程合集目录
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<数据结构与算法> 3. 专栏目录 [经典回放]多种语言系列数据结构算法 ...
- Python发送SMTP邮件指南
SMTP(Simple Mail Transfer Protocol)简单邮件传输协议,Python内置对SMTP的支持,可以发送纯文本文件,HTML邮件以及附带文件. 一.两个模块 Pyth ...
- 从7nm到5nm,半导体制程
从7nm到5nm,半导体制程 芯片的制造工艺常常用XXnm来表示,比如Intel最新的六代酷睿系列CPU就采用Intel自家的14nm++制造工艺.所谓的XXnm指的是集成电路的MOSFET晶体管栅极 ...
- Spring Cloud Alibaba(14)---SpringCloudAlibaba整合Sleuth
SpringCloudAlibaba整合Sleuth 上一篇有写过Sleuth概述,Spring Cloud Alibaba(13)---Sleuth概述 这篇我们开始通过示例来演示链路追踪. 一.环 ...
- 深入解读Redis分布式锁
之前码甲哥写了两篇有关线程安全的文章: 你管这叫线程安全? .NET八股文:线程同步技术解读 分布式锁是"线程同步"的延续 最近首度应用"分布式锁",现在想想, ...